Vue +Echars折线图使用

最近在忙工作,抽空写篇文章

注意：最好将图表封装成一个组件

首先引包

npm install echarts --save

本文使用该案例

Examples - Apache EChartshttps://echarts.apache.org/examples/zh/editor.html?c=line-stack

(案例中有代码)

如图将案例代码放置Scrtpt标签中引入

 放置容器代码

 <div ref="myDiv" class="radar-echart" />

在meodths新建方法

方法中执行

 const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
   myChart.setOption({option代码})

将option中的代码复制

 这条放到上面的option代码中即可

 页面加载执行欧克