VUE2
<template>
<div :id="id" class="echart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
id: {
type: String,
default: () => {
return 'mychart';
}
},
options: {
type: Object
}
},
data() {
return {
myChart: null,
};
},
mounted() {
const el = document.querySelector(`#${this.id}`);
if (el) {
this.myChart = echarts.init(el);
if (this.options) {
const opt = JSON.parse(JSON.stringify(this.options));
this.myChart.setOption(opt);
}
setTimeout(() => {
this.resizeChart();
}, 0);
window.addEventListener('resize', this.resizeChart);
}
},
destroyed() {
window.removeEventListener('resize', this.resizeChart);
},
methods: {
resizeChart() {
this.myChart.resize();
},
changeOptions() {
const opt = JSON.parse(JSON.stringify(this.options));
this.myChart.setOption(opt);
}
},
watch: {
options: {
handler() {
this.changeOptions();
},
deep: true
}
}
};
</script>
<style lang="scss" scoped>
.echart {
width: 100%;
height: 100%;
}
</style>
用法
<SkChart id="stockCharts" :options="stockOpt" class="chart" />
//id旨在唯一化图表 可在一个页面通过不同id去区分不同图表 options就是echarts配置项
VUE3
<template>
<div :id="id" class="echart"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, onUnmounted, PropType, toRaw, watch } from 'vue';
import * as echarts from 'echarts';
import { EChartsType } from 'echarts';
export default defineComponent({
props: {
id: {
type: String as PropType<string>,
default: () => {
return 'mychart';
},
requierd: true,
},
options: {
type: Object as PropType<any>,
},
},
setup(props, ctx) {
let myChart: EChartsType | null = null;
// 监听设置项数据改变
// 页面布局变化
const resizeChart = () => {
myChart?.resize();
};
// 图表数据改变
const changeOptions = () => {
let opt = toRaw(props.options) as any;
myChart?.setOption(opt);
if (props.isImage) {
setTimeout(() => {
ctx.emit('getImg', getImageData());
}, 0);
}
};
watch(
() => props.options,
() => {
changeOptions();
},
{
deep: true,
immediate: true,
}
);
onMounted(() => {
let el: HTMLElement | null = document.querySelector(`#${props.id}`);
if (el) {
myChart = echarts.init(el);
if (props.options) {
let opt = toRaw(props.options) as any;
myChart.setOption(opt);
}
setTimeout(() => {
resizeChart();
}, 0);
window.addEventListener('resize', resizeChart);
}
});
onUnmounted(() => {
window.removeEventListener('resize', resizeChart);
});
return { myChart};
},
});
</script>
<style lang="scss" scoped>
.echart {
width: 100%;
height: 100%;
}
</style>
用法
<SkChart id="invoiceTrendChart" :options="lineOption" class="chart"></SkChart>