前言
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
提示:以下是本篇文章正文内容,下面案例可供参考
准备好DOM容器
代码如下(示例):
<div id="myChart" ></div>
在生命周期钩子获取DOM节点
mounted(){
this.myChart = echarts.init(document.getElementById('myChart'));// 基于准备好的dom,初始化echarts实例
}
编写绘图函数,绑定到method中
drawLine(){
this.myChart.setOption({
title: { text: '近20天内营业额' },
tooltip: {
trigger: 'item'
},
xAxis: {
type: 'category',
data: this.chartAxisX
},
yAxis: {
type: 'value'
},
series: [
{
data: this.chartAxisY,
type: 'line'
}
]
});
},
在数据加载后绘图
一定要在数据加载后绘图,不然可能会显示空图。
watch:{
chartAxisX(){ //chartAxisX 为图表横坐标数据
this.$nextTick(()=>{
this.drawLine();
})
},
}
总结
以上就是今天要讲的内容,本文仅仅简单介绍了echarts在vue中的使用,也算是刚刚接触echarts的菜鸡的一点心得。