ECharts

初次接触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
      },)
  }