echarts图表堆叠图点击legend排序

multi_bubbleSort(obj) {
      let data0 = obj.data0;//横坐标数组
      let data = new Array(data0.length).fill(0);//定义一组与横坐标数组相同大小的且全部为0的数组,用来存储堆积柱状图的和
      let len = obj.data0.length;//横坐标数组长度
      for (let k = 0; k < len; k++) {
          for (let m = 0; m < obj.data1.length; m++) {
              data[k] = Number(data[k]) + Number(obj.data1[m][k]);//求和,用来排序
          }
      }
      console.log(555,obj,data0,data);
  //简单排序
      for (let i = 0; i < len; i++) {
          for (let j = 0; j < len - 1 - i; j++) {
              if (Number(data[j]) < Number(data[j + 1])) { //相邻元素两两对比
                  let temp = data[j + 1]; //元素交换
                  data[j + 1] = data[j];
                  data[j] = temp;
  //交换横坐标元素
                  let te = obj.data0[j + 1]; //元素交换
                  obj.data0[j + 1] = obj.data0[j];
                  obj.data0[j] = te;
  //交换各堆积柱状图元素
                  for (let m = 0; m < obj.data2.length; m++) {
                      let tem = obj.data2[m][j + 1];
                      obj.data2[m][j + 1] = obj.data2[m][j];
                      obj.data2[m][j] = tem;
                  }
              }
          }
      }
      // console.log(333333,obj);
      return obj;
  },
  sortBy(that){
    //Echarts legend的点击事件以及数据渲染
    that.chart.off('legendselectchanged')
    that.chart.on('legendselectchanged', function ({selected}) {
      //获取option对象
      let option = this.getOption()
      //清空需要重新渲染的数据
      option.xAxis[0].data = [];
      option.series.forEach(item => {
        item.data = []
      })
      //x轴对应数据
      let xData = that.chartData.xAxisData
      //y轴对应数据
      let seriesData = that.chartData.seriesData
      // console.log('seriesData',seriesData);
      //定义一个对象,data0:X轴坐标数组;data1:二维数组,存legend为true的series数组;data2:二维数组,存储所有的series数组
      let obj = {
          "data0": xData,
          "data1": [],
          "data2": seriesData.map(i => i.data)
      };
      // console.log(obj,seriesData);
      //获取legend各图例点击与否,true为未点击,false为点击;
      let legendArr = Object.keys(selected)
      // console.log(legendArr);
      //判断legend图例是否为true,是就给对象obj的data1追加相应的series数组
      legendArr.forEach((item,index) => {
        if(selected[item]) {
          obj.data1.push(seriesData[index].data)
        }
      })
      //调用排序方法,返回排序好的对象
      let multi_obj = that.multi_bubbleSort(obj)
      //给上面清空的数据添加值
      option.xAxis[0].data = multi_obj.data0;
      option.series.forEach((item,index) => {
        item.data = multi_obj.data2[index]
      })
      //调用setOption方法,重新渲染堆积柱状图
      this.setOption(option)                                
    })
    }
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Echarts实现堆叠条形点击事件的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echarts堆叠条形点击事件示例</title> <!-- 引入Echarts --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <!-- 为Echarts准备一个具备大小(宽高)的Dom容器 --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 初始化Echarts实例对象 var myChart = echarts.init(document.getElementById('main')); // 配置项数据 var option = { title: { text: '堆叠条形点击事件示例' }, tooltip: {}, legend: { data:['邮件营销','联盟广告','视频广告'] }, xAxis: { data: ["周一","周二","周三","周四","周五","周六","周日"] }, yAxis: {}, series: [ { name: '邮件营销', type: 'bar', stack: '广告', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'bar', stack: '广告', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'bar', stack: '广告', data: [150, 232, 201, 154, 190, 330, 410] } ] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 监听Echarts点击事件 myChart.on('click', function (params) { // 获取点击的系列名称和数据名称 var seriesName = params.seriesName; var dataName = params.name; // 弹出提示框显示点击信息 alert(seriesName + '在' + dataName + '的数据为' + params.value); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值