zoukankan      html  css  js  c++  java
  • Echarts柱状图添加点击事件

    Echarts基本显示:

    var c1 = echarts.init(document.getElementById('pic_01'));
    
    var op1= {
      title : {
        text: '某地区蒸发量和降水量',
        subtext: '纯属虚构'
      },
      tooltip : {
        trigger: 'axis'
      },
      legend: {
        data:['蒸发量','降水量']
      },
      toolbox: {
        show : true,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {show: true, type: ['line', 'bar']},
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : true,
      xAxis : [
        {
          type : 'category',
          data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
      ],
      yAxis : [
        {
          type : 'value'
        }
      ],
      series : [
        {
          name:'蒸发量',
          type:'bar',
          data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
          markPoint : {
          data : [
            {type : 'max', name: '最大值'},
            {type : 'min', name: '最小值'}
          ]
        },
        markLine : {
          data : [
            {type : 'average', name: '平均值'}
          ]
        }
      },
      {
        name:'降水量',
        type:'bar',
        data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
        markPoint : {
          data : [
            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
          ]
        },
        markLine : {
          data : [
            {type : 'average', name : '平均值'}
          ]
        }
      }
    ] };
    //显示折线图 c1.setOption(op1); c1.on('click', function (params) {   //柱状图下边的名称(1月,2月,……,11月,12月)params.name   //柱子的值(2.6, 5.9, ……,6.0,2.3)params.value   //每个月份的第几个柱子params.seriesIndex;   switch (params.seriesIndex) {   case 0: alert(params.name+"蒸发量是"+params.value);   break;   case 1:alert(params.name+“降水量是”+params.value);   break;   default: break; } });
  • 相关阅读:
    [SDOI2008]递归数列
    [SCOI2008]奖励关
    [SCOI2010]幸运数字
    [ZJOI2007]矩阵游戏
    [HAOI2006]旅行
    [ZJOI2008]泡泡堂
    [BZOJ1800][Ahoi2009]fly 飞行棋
    [POJ2288]Islands and Bridges
    [LUOGU] 3959 宝藏
    [BZOJ]1029: [JSOI2007]建筑抢修
  • 原文地址:https://www.cnblogs.com/ZbsCc/p/10861743.html
Copyright © 2011-2022 走看看