系统要使用echarts,而且是频繁的使用,如果通过【一】这篇中所使用,首先造成的问题就是代码不美观,且冗余太多,因此,如果可以将Echarts封装成组件,那么在调用图表时,通过传递图表参数即可生成图表。
Vue使用:【props】用来接收父组件传递的参数,同时给props设置一个默认值,在没有传递数据的时候,也会显示图表。
实现步骤:
charts.vue
添加watch监听option的变化,如果有新的option,图标刷新。
<template>
<div :id="id" :style="style"></div>
</template>
<script>
export default {
name: 'charts',
data () {
return {
chart: ''
}
},
props: {
id: {
type: String
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
option: {
type: Object,
default() {
return {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
},
computed: {
style() {
return {
width: this.width,
height: this.height
}
}
},
watch: {
option: {
handler(newVal, oldVal) {
if (this.chart) {
this.chart.setOption(newVal)
} else {
this.init();
}
},
deep: true
}
},
mounted() {
this.init()
},
methods: {
init() {
this.chart = this.$echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
window.addEventListener("resize", this.chart.resize);
}
}
}
</script>
父组件
其余的参数,可以根据自己需求添加
<template>
<div>
<chart id="demo" height="400px" :option='ChartTestData'></chart>
</div>
</template>
<script>
//引入组件 略去
export default{
components:{
ChartsPart
},
data(){
return {
ChartTestData:{
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
series: [
{
data: [3, 2, 5, 1, 5, 6, 2],
type: "line",
},
],
}
}
}
}
</script>
即完成对Echarts的组件封装。
注:子组件可以直接复制粘贴使用,父组件记得import组件