82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
||
<div :id="uuid" :style="style"></div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
const idGen = () => {
|
||
return new Date().getTime();//如果循环这个图表这个id需要传值
|
||
};
|
||
|
||
export default {
|
||
name:'ErpEchart',
|
||
props: {
|
||
height: {
|
||
type: String,
|
||
default: "400px",
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: "600px",
|
||
},
|
||
|
||
options: {
|
||
type: Object,
|
||
default: null,
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
uuid: null,
|
||
myChart: null,
|
||
};
|
||
},
|
||
|
||
watch: {
|
||
width(a, b) {
|
||
if (this.myChart) {
|
||
// 这里需要异步才能生效
|
||
setTimeout(() => {
|
||
this.myChart.resize({
|
||
animation: {
|
||
duration: 500,
|
||
},
|
||
});
|
||
}, 0);
|
||
}
|
||
},
|
||
options() {
|
||
if (this.myChart) {
|
||
// notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。
|
||
//合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件
|
||
this.myChart.setOption(this.options, {
|
||
notMerge: true,
|
||
});
|
||
}
|
||
},
|
||
},
|
||
|
||
computed: {
|
||
style() {
|
||
return {
|
||
height: this.height,
|
||
width: this.width,
|
||
};
|
||
},
|
||
},
|
||
|
||
created() {
|
||
this.uuid = idGen();
|
||
},
|
||
|
||
mounted() {
|
||
// 准备实例
|
||
this.myChart = echarts.init(document.getElementById(this.uuid));
|
||
|
||
// 应用配置项
|
||
this.myChart.setOption(this.options);
|
||
},
|
||
};
|
||
</script>
|
||
|