echart柱状图高亮示例，echart触发事件使用记录，dispatchAction代码触发事件

最新推荐文章于 2024-09-26 17:39:26 发布

程序员斯文

最新推荐文章于 2024-09-26 17:39:26 发布

阅读量1.4k

点赞数 17

分类专栏：前端 echarts 文章标签： javascript 前端 echarts

本文链接：https://blog.csdn.net/kissyulu/article/details/140011806

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

这篇文章主要记录echart柱状图高亮效果的option配置结果，包括代码触发echarts事件高亮，监听echart事件处理对象等等，其实echarts还是功能齐全的，文档好好看大部分需求都能满足

用echarts画图

找到官方文档，先找了官方文档，默认文档看的是最新5.0的，4.0的文档地址是这个echart4.0文档，看了下设置option的type:bar就可以画一个柱状图了，使用data指定数据

"series": [{
        "data": [{
            "value": -0.52,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }, {
            "value": -0.23,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }],
        "itemStyle": {
            "barBorderRadius": 2
        },
        "type": "bar",
        "animation": false,
        "barWidth": 30,
        "smooth": true,
        "symbol": "none",
        "selectedMode": true,
        "label": {
            "show": true
        }
    }]

max\min设置图表间隔

当有大小不一的数据时，默认下的y轴值间隔很难看，还有超出图表的，可以实现一个找出valuelist内最大最小值的算法来控制图表间隔，例如

 var maxNum = parseInt(_.max(valueList) + 1);
 var minNum = parseInt(_.min(valueList) - 2);

max\min设置y轴永远水平居中

假设我想要y轴永远水平居中呢？那需要算法找出maxNum并计算一下给个合理最大最小值，我这里假设splitNumber为5：

var maxNum = parseInt(_.max(valueList) + 1);
maxNum = Math.max(0, maxNum);
maxNum = Math.abs(maxNum) < 2 ? maxNum : maxNum + Math.abs(maxNum) / 2;
while (Math.abs(maxNum) > 5 && Math.abs(maxNum) % 5 != 0) {
    maxNum = Math.ceil(maxNum + 1)
}
var minNum = parseInt(_.min(valueList) - 2);
minNum = Math.abs(minNum) < 2 ? minNum : minNum - Math.abs(minNum) / 2;
while (Math.abs(minNum) > 5 && Math.abs(minNum) % 5 != 0) {
    minNum = Math.ceil(minNum - 1)
}
// maxNum = Math.ceil(Math.max(Math.abs(Math.ceil(_.max(valueList) + 1)), Math.abs(Math.ceil(_.min(valueList) - 1))) * 1.2)
maxNum = Math.abs(minNum) > Math.abs(maxNum) ? Math.floor(Math.abs(minNum) * 0.8) : Math.abs(maxNum)

通过算法计算出来的值，通过设置max min属性来实现y轴水平居中

yAxis: [
   {
      type: 'value',
      axisLine: {
          show: false,
      },
      splitLine: {
          show: true,
          lineStyle: { color: '#e9e9e9', opacity: 0.68, width: 0.5 }
      },
      // interval:interval,//一般不建议设置interval展示效果不好
      max: maxNum,
      min: minNum,
      // splitNumber:splitNumber,//使用splitNumber让ec自己算分割线
      // offset: 48*dpr,
      axisTick: {
          show: false
      }
  }
],

itemStyle自定义柱子外观

给显示的柱子加个圆角barBorderRadius，值代表圆角的大小

"itemStyle": {
   "barBorderRadius": 2
}

emphasis自定义高亮外观

当点击显示的柱子会有高亮，不过高亮的样式是默认的，如何自定义样式呢？例如当值>0显示红色<0显示绿色，使用emphasis属性可以设置高亮样式

emphasis: {
  itemStyle: +value > 0 ? {
                   color: '#f03030',
                   shadowBlur: 40,
                   borderColor: '#f03030',
                   shadowColor: '#f03030'
               } : {
                   color: '#00a444',
                   shadowBlur: 40,
                   borderColor: '#00a444',
                   shadowColor: '#00a444'
               }
}

echarts.setOption配置使用

指定label位置

如果要值正echart的label要再上面反之再下效果，通过label的position属性设置方向，颜色字体都可以设置具体可以参考文档

自定义label显示文案

比如值是10，y轴柱子默认显示原始值，我这假设需要显示10%，那需要用到formatter属性来实现格式化文案

label: {
     show: true,
     formatter: function (params) {
         return (params.value > 0 ? '+' : '') + params.value + '%'
     }
  }

比高亮更好看的axisPointer指示器

axisPointer类型可以有line、shadow，我这指定默认为shadow

"axisPointer": {
     "show": true,
     "triggerTooltip": false,
     "label": {
         "show": false
     },
     "shadowStyle": {
         "color": "#e9e9e9",
         "opacity": 0.3
     },
     "type": "shadow"
 }

代码触发echarts事件dispatchAction

触发echarts事件highlight

看文档介绍echart的事件与行为教程，可知echart提供了一个dispatchAction的api来统一调度事件分发，我这边想要指定某一个柱子高亮，可以通过触发highlight事件来实现

chart.dispatchAction({
        type: 'highlight',//选中高亮
      dataIndex: 0,//指定位置
      seriesIndex: 0
    })

高亮没有指示器axisPointer好看，触发指示器事件文档没有实际名字叫updateAxisPointer
触发echart.updateAxisPointer事件更新echart指示器位置

myChart.dispatchAction({
type: 'updateAxisPointer',
dataIndex: 0,//取消话传未知位置下标如空
seriesIndex:0
});

监听echarts事件click

当鼠标点击echarts图表后触发一个弹窗，可以监听click事件来处理，还有另外一种情况点击的是图表的边角处而不是柱子这时就需要通过getZr().on('click')去捕获事件了，如下

chart.getZr().on('click', function(event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            return
        }
    });

EventParams的数据信息

所有的鼠标事件包含参数 params，这是一个包含点击图形的数据信息的对象，如下格式：

type EventParams = {
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string;
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string;
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number;
  // 数据在传入的 data 数组中的 index
  dataIndex: number;
};

params.componentType区分用户点击位置

如何区分鼠标点击到了哪里：

myChart.on('click', function(params) {
  if (params.componentType === 'markPoint') {
    // 点击到了 markPoint 上
    if (params.seriesIndex === 5) {
      // 点击到了 index 为 5 的 series 的 markPoint 上。
    }
  } else if (params.componentType === 'series') {
    if (params.seriesType === 'graph') {
      if (params.dataType === 'edge') {
        // 点击到了 graph 的 edge（边）上。
      } else {
        // 点击到了 graph 的 node（节点）上。
      }
    }
  }
});

销毁echarts清理事件clear

当退出页面时，如果需要清理已存在的echarts光设置变量echartsInstance=null还不够，还需要使用clear事件详细说明见文档

var chart = self.echartsInstance
 // if(chart){
 //     chart.clear()
 //     chart.dispose()
 //     chart=null
 // }
 if (!chart) {
     chart = self.echartsInstance = echarts.init($('#echart'));
 }

最后

总结

画个echart流程使用图

还有很多特性控制联动多个图表conect属性，我觉得也不错

this.$echarts.connect([myChart1,myChart2]);

虽然echarts现在都更新到5.5版本了，我这份代码4.0版本下也能用

完整代码示例

//调试echart
var option = {}
option = {
    "backgroundColor": "#fff",
    "textStyle": {
        "fontSize": 12,
        "color": "#333",
        "fontFamily": "DINPro"
    },
    "axisPointer": {
        "animation": false
    },
    "grid": [{
        "top": 2,
        "left": 5,
        "right": 5,
        "bottom": 22,
        "show": true,
        "borderWidth": 0.5,
        "borderColor": "#e9e9e9"
    }],
    "xAxis": [{
        "type": "category",
        "data": ["上证指数", "上证50", "沪深300", "科创50", "创业板", "成长40"],
        "axisTick": {
            "show": false
        },
        "axisLine": {
            "show": true,
            "lineStyle": {
                "type": "dashed",
                "color": "#e9e9e9",
                "opacity": 0.68,
                "width": 0.5
            }
        },
        "axisLabel": {
            "interval": 0,
            "show": true,
            "fontSize": 11,
            "color": "#888888"
        },
        "axisPointer": {
            "show": true,
            "triggerTooltip": false,
            "label": {
                "show": true,
                "color": "orange",
                "backgroundColor": "#fff",
                "fontWeight": "bold"
            },
            "shadowStyle": {
                "color": "#e9e9e9",
                "opacity": 0.3
            },
            "type": "shadow"
        }
    }],
    "yAxis": [{
        "type": "value",
        "axisLine": {
            "show": false
        },
        "splitLine": {
            "show": true,
            "lineStyle": {
                "color": "#e9e9e9",
                "opacity": 0.68,
                "width": 0.5
            }
        },
        "max": 4.5,
        "min": -3,
        "axisTick": {
            "show": false
        }
    }],
    "series": [{
        "data": [{
            "value": -0.52,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }, {
            "value": -0.23,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }, {
            "value": -0.47,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }, {
            "value": -1.46,
            "itemStyle": {
                "color": "#00a444"
            },
            "label": {
                "color": "green",
                "position": "bottom"
            }
        }, {
            "value": 0.02,
            "itemStyle": {
                "color": "#f03030"
            },
            "label": {
                "color": "red",
                "position": "top"
            }
        }, {
            "value": 2.02,
            "itemStyle": {
                "color": "#f03030"
            },
            "label": {
                "color": "red",
                "position": "top"
            }
        }],
        "itemStyle": {
            "barBorderRadius": 2
        },
        "type": "bar",
        "animation": false,
        "barWidth": 30,
        "smooth": true,
        "symbol": "none",
        "selectedMode": true,
        "label": {
            "show": true
        }
    }]
}

$("#debugChart").remove()
var body = document.getElementsByTagName('body')[0];
var div = document.createElement('div');
div.id = "debugChart"
div.style.height = '3.2rem';
//body.appendChild(div);
var app = document.getElementById("app")
app.insertBefore(div, app.children[0])

exec = function(echarts) {
    var $el = $("#debugChart")[0];
    window.chart = echarts.init($el);
    chart.setOption(option);
    chart.getZr().on('click', function(event) {
        // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
        if (!event.target) {
            // 点击在了空白处，做些什么。
            return
        }
    });

    //选中
    //     chart.dispatchAction({
    //         type: 'updateAxisPointer',//highlight
    //         dataIndex: 0,
    //         seriesIndex: 0
    //     })
}

if (window.echarts) {
    exec(echarts)
} else {
    require(["echartsNew"], function(echarts) {
        window.echarts = echarts
        exec(echarts)
    })
}