1，需要先行安装echart插件（代码可以直接用），uuid代表不可以重复，用于识别是第几个
<template>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div class="myCharts">
<div :id="uuid" :style="style" class="myChart" ></div>
</div>
</template>
<script>
import * as echarts from "echarts";
export default {
props: {
height: {
type: String,
default: "",
},
width: {
type: String,
default: "100%",
},
options: {
type: Object,
default: null,
},
uuid: {
type: Number,
},
},
computed: {
style() {
return {
height: this.height,
width: this.width,
};
},
},
data() {
return {
myChart: null,
};
},
watch: {
width() {
// 响应式改图表的宽度
if (this.myChart) {
this.myChart.resize({
animation: {
duration: 300, // 300ms 内完成尺寸变化
},
});
}
},
height() {
// 响应式改图表的宽度
if (this.myChart) {
this.myChart.resize({
animation: {
duration: 300, // 300ms 内完成尺寸变化
},
});
}
},
options() {
if (this.myChart) {
this.myChart.setOption(this.options, {
notMerge: true,
});
}
},
},
created() {
},
mounted() {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById(this.uuid));
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(this.options);
},
};
</script>
<style scoped lang="scss">
.myCharts{
width: 100%;
// min-width: 1400px;
background: #fff;
margin-top: 20px;
padding: 20px;
border-radius: 6px;
.myChart{
margin-top: 10px;
height: 384px;
width: 100% !important;
}
}
</style>
2.在需要使用的地方进行引用
网友评论