前言
工作中经常要绘制echart
图,为了防止一个.vue
文件代码过多,echart
都会单独抽离到一个.vue
文件里,然后通过组件的形式加载。写了很多了,个人感觉下面的这种形式是比较好的
示例
父组件中加载
<send-money-back-line ref="lineRef"></send-money-back-line>
this.$refs.lineRef.init();
echart代码
<template>
<div class="line" ref="line">
</div>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
};
},
mounted() {
this.init();
},
methods: {
// 初始化柱状图
init() {
let legend = ['21年应收账款', '20年应收账款', '19年应收账款'];
let xAxisData = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
let seriesData = [
[135, 147, 260,150,150, 230, 224, 218, 230, 224, 218, 135],
[150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135],
[260,150, 230, 224, 218, 135,150, 230, 224, 218, 135, 147]
];
this.setOption(legend,xAxisData,seriesData);
},
setOption(legend,xAxisData,seriesData) {
let myChart = echarts.init(this.$refs.line);
let option = {
tooltip: {
trigger: 'axis'
},
title: {
left: 'center',
textStyle: {
fontSize: 28,
color: '#755978'
}
},
legend: {
data: legend,
top: '5%'
},
xAxis: {
type: 'category',
data: xAxisData
},
yAxis: {
type: 'value'
},
series: [
{
data: seriesData[0],
type: 'line',
name: legend[0],
color: '#4F81BD'
},
{
data: seriesData[1],
type: 'line',
name: legend[1],
color: '#C0504D'
},
{
data: seriesData[2],
type: 'line',
name: legend[2],
color: '#9BBB59'
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
});
}
}
};
</script>
<style scoped lang="scss">
.line{
width: 100%;
height: 100%;
}
</style>
效果