在vue中如何使用echart
1.在前面基础上搭建好vue环境,初始化webpack后,在终端使用npm i echarts -s 下载echart
2.下载完成后全局使用echart 在main.js文件中导入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.现在就可以全局使用echart了,在methods里写一个drawchart(){}方法,里面写
let myChart = this.$echarts.init(document.getElementById("myChart"));
var option ={
写echart的表格内容
}
myChart.setOption(option)
4.在mounted钩子函数里调用一个方法 this.drawchart(),图表就会显示在页面id为mychart的地方
5.echar最后的自适应
this.$nextTick(function() {
window.onresize = function() {
laChart.resize();//各个图表都写在一个onresize里,因为这个方法只能被调用一次
qualitychart.resize();
safetychart.resize();
machart.resize();
};
});