pieEcharts.vue 代码
<template>
<div class="Echarts">
<div ref="pieEcharts" style="width: 100%; height: 300px"></div>
</div>
</template>
<script>
import * as echarts from "echarts/core";
import { black, light } from '@/assets/js/theme.js';
import {
TitleComponent,
TooltipComponent,
LegendComponent,
} from "echarts/components";
import { PieChart } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
TitleComponent,
TooltipComponent,
LegendComponent,
PieChart,
CanvasRenderer,
LabelLayout,
]);
//data.chalk-'black'黑暗主题 'light'亮色
//legendBottom legend放在下方
export default {
name: "pieEcharts",
props: ["data"],
components: {},
data() {
return {};
},
computed: {},
watch: {
data(val) {
if (this.$refs.pieEcharts) {
this.$nextTick(() => {
this.myEcharts();
});
}
},
},
methods: {
myEcharts() {
if (this.data.height) {
this.$refs.pieEcharts.style.height = this.data.height;
}
// 基于准备好的dom,初始化echarts实例
echarts.registerTheme("black", black);
echarts.registerTheme("light", light);
var myChart = echarts.init(this.$refs.pieEcharts, this.data.chalk);
let data = this.getPieData(this.data)
var option = data
console.log(option);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
},
},
created() { },
mounted() {
if (this.$refs.pieEcharts) {
this.$nextTick(() => {
// //console.log(this.data);
this.myEcharts();
});
}
},
destroyed() {
window.onresize = null;
},
};
</script>
<style scoped lang="scss"></style>
使用
data格式示例
pieData: {
title: '',
series: [{
value: 1,
name: '1'
}, {
value: 2,
name: '2',
}]
}
异步传输数据示例
添加echartShow 以保证正确渲染
<pie-echarts
v-if="echartShow"
style="height: 400px"
:data="pieData"
></pie-echarts>
.then((res) => {
let pieData= [
{
value: res.data.data1,
name: "1",
},
{
value: res.data.data2,
name: "2",
},
];
this.pieData= {
title: this.type,
series: optionData,
};
this.echartShow=true
});