1.安装Ecahrts依赖
npm install echarts -S
2.全局引入
在main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.组件中使用
一个具备宽高的DOM容器,如下:
<div id="myChart" :style="{width: '300px', height: '300px'}">
初始化Echarts实例对象
注意:初始化应当在mounted这个生命周期中进行
let myChart = this.$echarts.init(document.getElementById('myChart'))
调用setOption()方法绘制图表
myChart.setOption(option)
option:
1.首先进入https://www.echartsjs.com/examples/
2.其次在侧边栏选择所需要的图表类型
3.然后选择所需要的图表样式点击进入展示界面
4.最后复制左侧option对象放到setOption方法中
注意:option中还有很多效果配置,有需要的可以根据所选图表进行搜索