echarts 点击legend改变x轴的值

rightBarEchart() {
    var chartDom = document.getElementById('rightBar');
    var myChart = echarts.init(chartDom);
    var option= myChart.getOption();
    var colors = ['#00BFFF', '#FFA500', '#00FF00'];
    option = {
      color: colors,
      // title: {
      //   text: '',
      //   subtext: ''
      // },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['昨日', '今日', '前日']
      },
      toolbox: {
        show: false,
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          dataView: {readOnly: false},
          magicType: {type: ['line', 'bar']},
          restore: {},
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.today.timeList,

      },
      yAxis: {
        type: 'value',
        axisLabel: {
          // formatter: '{value} °C'
        },

      },
      series: [

        {
          name: '昨日',
          type: 'line',
          data: this.yesterday.valueList,
          animationDelay: function (idx) {
            return idx * 300 + 50;
          },
          // markPoint: {
          //   data: [
          //     {type: 'max', name: '最大值'},
          //     {type: 'min', name: '最小值'}
          //   ]
          // },
          // markLine: {
          //   data: [
          //     {type: 'average', name: '平均值'}
          //   ]
          // }
        },
        {
          name: '今日',
          type: 'line',
          data: this.today.valueList,
          animationDelay: function (idx) {
            return idx * 300;
          },
          // markPoint: {
          //   data: [
          //     {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
          //   ]
          // },

          markLine: {

            symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
            label: {
              position: 'middle',
              formatter: this.lowerLimit,
            },
            data: [{
              silent: false, //鼠标悬停事件 true没有,false有
              lineStyle: { //警戒线的样式 ,虚实 颜色
                color: "#7CFC00",
              },
              yAxis: this.lowerLimit // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
            }]
          }
        },
        {
          name: '前日',
          type: 'line',
          data: this.theDayBeforeYesterday.valueList,
          markLine: {

            symbol: ['none', 'arrow'], //['none']表示是一条横线;['arrow', 'none']表示线的左边是箭头,右边没右箭头;['none','arrow']表示线的左边没有箭头,右边有箭头
            label: {
              position: "middle", //将警示值放在哪个位置,三个值“start”,"middle","end" 开始 中点 结束
              formatter: this.upperLimit
            },
            data: [{
              silent: false, //鼠标悬停事件 true没有,false有
              lineStyle: { //警戒线的样式 ,虚实 颜色
                // type:"dotted", //样式  ‘solid’和'dotted'
                color: "#FA3934",
                // width: 3   //宽度
              },
              yAxis: this.upperLimit // 警戒线的标注值,可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'},type值有 max min average,分为最大,最小,平均值
            }]
          }
        },
      ]
    };
    const _this = this;
    myChart.on('legendselectchanged', function(obj) {
      var name=obj.name;
      var option=myChart.getOption();

      if(name=='今日'){
        option.xAxis[0].data=_this.today.timeList;

      }else if(name=='昨日'){
        option.xAxis[0].data=_this.yesterday.timeList;
      }else if(name=='前日'){
        option.xAxis[0].data=_this.theDayBeforeYesterday.timeList;
      }
      myChart.setOption(option,true);
    });

    option && myChart.setOption(option);

  }
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值