echarts在vue中简单绘图

---

前言

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的菜鸡的一点心得。