初次接触ECharts,简单使用
安装
cnpm install echarts --save
在main.js中引入并且挂载在DOM上
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
创建放ECharts的容器
<div id="main" ref="chart"></div>
调用方法写ECharts中格式数据
drawChart() {
var bar_dv = this.$refs.chart;
if (bar_dv){
let myChart = this.$echarts.init(main)
let option = {
title:{
text:this.name+" 本周签到时长:"+this.total
},
tooltip:{},
xAxis:{
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis:{
type: 'value'
},
series:[{
name:'销量',
type:"line",
data:this.persondata
}
]
};
myChart.setOption(option);
}}
由于本次在vant组件中的弹出层显示ECharts,使得第一次加载弹出层的时候总是不能触发函数调用ECharts
解决方案:
在mounted中先把popup=设置为显示,但是不让透明度设置为0,不让用户看到,之后0.1s后在将popup重新设置不显示。
mounted() {
this.show = true;
setTimeout(()=>{
this.show = false;
this.opacity =1
this.overlay = true
},)
}