index.vue
可复用的子组件,echarts
所需的data
通过props
传入<template>
<div ref="myEchart" :style="{height:height,width:width}"></div>
</template>
<script>
import echarts from "echarts";
export default {
name: "echarts",
data() {
return {};
},
props: {
height: { type: String, default: "80vh" },
width: { type: String, default: "100%" },
options: { type: Object, default: () => {} }
},
computed: {
myOptions: function() {
return this.options || {};
}
},
mounted() {
this.drawLine();
},
methods: {
drawLine() {
let myChart = echarts.init(this.$refs.myEchart);
myChart.setOption(this.myOptions); // 绘制图表
window.onresize = () => myChart.resize();
// window.addEventListener("resize", () => myChart.resize());
}
}
};
</script>
2.pie.vue
引用的父组件,需要异步访问的data
在此页面进行,其余的echarts配置在一个配置文件pie.js
声明
<template>
<v-echarts :options="options"></v-echarts>
</template>
<script>
import vEcharts from "./index";
import echartSettings from "./pie.js";
export default {
name: "",
components: { vEcharts },
data() {
return {
options: echartSettings
};
},
methods: {
getData() {
new Promise(resolve => {
let obj = [
{ value: 335, name: "直接访问" },
{ value: 310, name: "邮件营销" },
{ value: 234, name: "联盟广告" },
{ value: 135, name: "视频广告" },
{ value: 1548, name: "搜索引擎" }
];
resolve(obj);
}).then(res => {
let arr = [];
res.forEach(item => arr.push(item.name));
echartSettings.legend.data = arr;
echartSettings.series[0].data = res;
});
}
},
mounted() {
this.getData();
}
};
</script>
pie.js
echarts
配置,放在和pie.vue
的同级目录下export default {
title: {
text: "某站点用户访问来源",
subtext: "纯属虚构",
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
left: "left",
data: []
},
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
}
}
]
};