收藏
回答

tab切换, 点击tab切换 echart不显示,首次进入可以?

我每次点击tab之后发送请求, 请求成功之后初始化

最后一次编辑于  2022-02-23
回答关注问题邀请回答
收藏

1 个回答

  • 养乐多💍
    养乐多💍
    2022-02-23

    不能再初始化了,第一次初始化的时候canvas已经绘制完了,可以这样写

     chart.setOption(option,true);

    只改option里的数据就行了

    2022-02-23
    有用
    回复 3
    • 信仰风声
      信仰风声
      2022-02-23
      我每次的时候都要添加这个事件,
      2022-02-23
      回复
    • 养乐多💍
      养乐多💍
      2022-02-23回复信仰风声
      不能这样搞, Chart.setOption(option,true);//一定要吧这个true加上,每次只需要改变数据就行了,每次都添加事件不行的
      2022-02-23
      回复
    • 养乐多💍
      养乐多💍
      2022-02-23回复信仰风声
      我改了一下我之前写的demo,你看一下
      import * as echarts from '../../ec-canvas/echarts';
      Page({
        data: {
        },
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          let that=this;
          that.setData({
            ec: {
              onInit: that.initChart
            }
          })
          // 模拟请求
          var times=setTimeout(function(){
            console.log("模拟请求")
            // 数据
            that.data.xdata=['00:00','01:00', '02:00', '03:00', '04:00', '05:00', '6:00', '7:00','8:00','9:00','10:00','11:00','12:00','13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00','20:00','21:00','22:00','23:00'];
            that.data.data1=[18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65, 30, 78, 340, 33,18, 36, 65];
            that.data.data2=[12, 50, 51, 35, 70, 30, 200,12, 50, 51, 35, 70, 30, 20,12, 50, 51, 35, 70, 30, 200,12, 50, 51];
            clearTimeout(times);
          },1000)
        },
        // 数据切换
        qiehuan(){
          let that=this;
          // 修改数据
          that.data.xdata=['00:00','01:00'];
          that.data.data1=[ 36, 65];
          that.data.data2=[ 200,12];
          // 绘制
          that.chart.setOption(that.getOption(),true);
        },
        // 折线图
        initChart(canvas, width, height, dpr) {
          let that=this;
          // 由于请求数据有延迟所以写一个时间函数,当数据存在的时候再执行绘制
          var times=setInterval(function(){
            var xdata=that.data.xdata;
            var data1=that.data.data1;
            var data2=that.data.data2;
            if(xdata && data1 && data2){
              clearInterval(times)
              that.chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr // new
              });
              canvas.setChart(that.chart);
              that.chart.setOption(that.getOption(),true);
              return that.chart;
            }
          },100)
        },
        getOption(){
          let that=this;
          var xdata=that.data.xdata;
          var data1=that.data.data1;
          var data2=that.data.data2;
          return {
            title:{
              text: '停车场24小时流量动态图',
              left: 'center',
              top:'4%',
              textStyle:{
                fontSize:14,
                color:'#333333'
              }
            },
            legend: {
              data: ['已停车位', '剩余车位'],
              z: 100,
              top:'15%',
              right:'4%',
              icon:'rect',
              itemWidth:11,
              itemHeight:8,
              textStyle:{
                fontSize:12,
                color:'#8C8C8C'
              }
            },
            grid:{
              left: '5%',
              right: '5%',
              bottom: '5%',
              top:'30%',
              containLabel: true
            },
            tooltip: {
              show: true,
              trigger: 'axis',
            },
            xAxis: {
              type: 'category',
              data: xdata,
              axisLabel : {
                show : true,
                // interval: 0,
                // rotate:45, //代表逆时针旋转45度
                textStyle:{
                  color:'#8C8C8C',
                  fontSize:12
                }
              },
              axisLine : {
                show : true,
                lineStyle : {
                  color:'#8C8C8C'
                }
                // x轴坐标轴颜色
              },
              axisTick : {
                  show : true,
                  lineStyle : {
                    color:'#8C8C8C'
                  }
                  // x轴刻度的颜色
              },
            },
            yAxis: {
              x: 'center',
              type: 'value',
              axisLabel : {
                show : true,
                textStyle : {
                  color : '#999',
                  fontSize:12
                }
              },
              axisLine : {
                  lineStyle : {
                    color : 'transparent'
                  }
                  // y轴坐标轴颜色
              },
              axisTick : {
                  lineStyle : {
                    color : 'transparent'
                  }
                  // y轴刻度的颜色
              },
              //设置网格线颜色
              splitLine : {
                  show : true,
                  lineStyle : {
                    color : ['#D8D8D8'],
                    width : 1,
                    type : 'solid'
                  }
              },
            },
            series: [{
              name: '已停车位',
              type: 'line',
              smooth: false,//设置成曲线
              symbol:'none',//取消折点圆圈
              data: data1,
              itemStyle : {
                normal:{
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#04BEFE'},
                            {offset: 1, color: '#4481EB'}
                        ]
                    )
                }
              },
              areaStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: "#BEE2FC" // 0% 处的颜色
                      }, {
                        offset: 0.7,
                        color: "#BEE2FC" // 100% 处的颜色
                       }],
                        globalCoord: false // 缺省为 false
                      }
                    }
              },
            }, {
              name: '剩余车位',
              type: 'line',
              smooth: false,//设置成曲线
              symbol:'none',//取消折点圆圈
              data: data2,
              itemStyle : {
                normal:{
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#F9D423'},
                            {offset: 1, color: '#F83600'}
                        ]
                    )
                }
              },
              areaStyle: {
                normal: {
                  color: {
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: "#FEE7BB" // 0% 处的颜色
                      }, {
                        offset: 0.7,
                        color: "#FDC4B3" // 100% 处的颜色
                       }],
                        globalCoord: false // 缺省为 false
                      }
                    }
              },
            }]
          };
        }
      })
      2022-02-23
      回复
登录 后发表内容