1.通过以下命令安装echarts
npm install echarts --save
2.在main.js文件里全局引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.单页面引用echarts
import echarts from 'echarts'
// html代码<div v-if="noData">123</div><div v-else class="details-ECharts" style="width:100%;overflow-x: scroll;"> <div id="myECharts" style="width:100%;height:220px;background-color:#ffffff;"></div></div><script>// js代码import echarts from 'echarts'export default { name: 'aaa', data () { return { xData: [], tionData: [], noData: false } }, methods: { statistics () { var myChart myChart = echarts.init(document.getElementById('myECharts')) myChart.setOption({ title: { text: '对比图', x: 'center', y: 'bottom', textStyle: { color: '#666666', fontWeight: 'normal', fontSize: 13 } }, xAxis: [ { type: 'category', data: this.xData, axisLine: { show: false }, axisTick: { show: false } } ], yAxis: [ { type: 'value', axisLine: { show: false }, show: false } ], series: [ { name: '222', type: 'bar', barWidth: '10px', data: this.tionData, smooth: true, itemStyle: { normal: { barBorderRadius: [5, 5, 0, 0], label: { show: true, position: 'top', rotate: '30', color: '#999999', formatter: '￥{c}' }, color: (params) => { return this.tionData.length-1 === params.dataIndex ? '#E8B003' : '#E1E1E1'; } } } } ] }) }, // 请求后台接口 aaa(data) { if(data){ this.noData = false this.$nextTick(()=> { this.statistics() }) } else { this.noData = true this.statistics() } } }, mounted () { this.statistics() }}</script>4.总结
1.在methods钩子函数里自定义一个statistics()去渲染echarts
2.在mounted钩子函数里执行this.statistics()
3.请求后台接口时候如果echarts图表所在的dom存在（this.noData = false）放在this.$nextTick(()=> {this.statistics()})里执行，否则（this.noData = true）直接this.statistics()
Vue.nextTick()作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom
如果不使用this.$nextTick() 再切换tab的时候dom还没加载不能获取该节点会报错