自定义echarts的toolbox事件实现动态切换图表

描述:需求是根据年份显示的数据是柱状图,月份是折线图,折线图是累增模式,比如 0,1,0,2=> 0,1,1,(1+2=3)  这样的数据。

首先echarts的toolbox中的feature属性下的toolbox.feature. magicType (动态类型切换)没法自定义点击时间,那么切换的时候就无法按照对应的数据进行显示。我这边是把这个属性工具直接隐藏,然后自己自定义工具栏来实现。

echarts的toolbox.feature 自定义

注意,自定义的工具名字,只能以 my 开头,例如下例中的 myTool1myTool2

        toolbox: {
            top: "top",
            show: true,
            feature: {
              mark: {
                show: true
              },
              /**自定义的工具栏 */
              myTool1: {
                show: true,
                title: '切换为折线图',
                icon: 'path://M85.333333 896h853.333334v42.666667H85.333333z,M85.333333 85.333333h42.666667v853.333334H85.333333zM575.317333 650.325333l-187.946666-177.28-168.064 163.413334-29.781334-30.592 197.376-191.914667 188.757334 178.048 321.152-295.168 28.885333 31.402667z',//可以复制阿里矢量图标的svg代码,path多个值用“,”隔开
                onclick: function () {
                  that.myToolHandlerLine()
                }
              },
              myTool2: {
                show: true,
                title: '切换为柱状图',
                icon: 'path://M109.03 844.9h805.95v85H109.03zM168.72 547.42h89.55v226.66h-89.55zM467.22 320.76h89.55v453.32h-89.55zM765.72 94.1h89.55v679.97h-89.55z',
                onclick: function () {
                  that.myToolHandlerBar()
                }
              },
              magicType: {
                show: false,
                type: ["line", "bar"],
              },
              restore: {
                show: false
              },
              saveAsImage: {
                show: true
              }
            },
            width: "120px"
          },

 最终效果,2个图标对应切换图标显示

 


版权声明:本文为qq_31452297原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。