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 还没加载不能获取该节点会报错