本文归柯三(kesan)所有,转载请注明出处 https://www.cnblogs.com/kesan/p/11255859.html
前置条件
系统中已经安装如下组件
- node.js
- npm
- vue
- vue-cli
安装echarts
npm install echarts
引入echarts
在组件源码处引入echarts组件
import echarts from 'echarts'
如果需要按需引入,请参考官方文档
点此查看官方文档
柱形图组件开发
先定义一个宽高均为500px的div以供echarts绘出组件
<template>
<div>
<div id="test" style="width:500px;height:500px">
</div>
</div>
</template>
定义组件需要的属性
在本例中,我们定义了两个需要由用户来提供数据的属性
- xData 即x轴的数据
- yData 即y轴的数据
props: {
'xData': Array,
'yData': Array
}
初始化柱形图组件
首先我们需要定义柱形图的option (title也可以抽出来设置为属性)
option: {
title: {
text: 'Vue柱形图组件'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
}
** 初始化组件 **
this.chart = echarts.init(document.getElementById("test"))
this.option.xAxis.data = this.xData
this.option.series[0].data = this.yData
this.chart.setOption(this.option)
在何时初始化组件?
首先来看一看著名的Vue生命周期图:
很显然在Created时组件都还没渲染,因此比较合适的时机是在mounted完成之后执行ECharts组件初始化的操作。
也就是说我们要将ECharts初始化工作放到mounted函数中执行,如果放入到Created中就会出错,因为Created时组件还未进行渲染工作。
完整的代码
<template>
<div>
<div id="test" style="width:500px;height:500px">
</div>
</div>
</template>
<script>
/* eslint-disable */
import echarts from 'echarts'
export default {
name: 'Histogram',
data: function () {
return {
option: {
title: {
text: 'Vue柱形图组件'
},
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
name: '销量',
type: 'bar',
data: []
}
]
},
chart: {}
}
},
props: {
'xData': Array,
'yData': Array
},
methods: {
updateData: function () {
console.log("update data")
}
},
created: function (){
console.log(this.xData)
console.log('created')
},
mounted: function(){
this.chart = echarts.init(document.getElementById("test"))
this.option.xAxis.data = this.xData
this.option.series[0].data = this.yData
this.chart.setOption(this.option)
}
}
</script>
记得注册组件!!!
Vue.component('组件名', 组件)