echarts折线图点击x值动态高亮且显示tooltip

预期效果：提示框显示时，相应的x坐标月份高亮（蓝色），同时提示框显示。

实现流程：
1.设置一个变量axisValue用于接收选中x值，当横轴值等于选中的axisValue时，设置蓝色

 axisLabel: {show: true,textStyle: {fontSize: 10, //更改坐标轴文字大小fontFamily: "PingFangSC-Regular",color: function (value, index) {return _this.axisValue !== "" && _this.axisValue === value? "#32AAFF": "#666666";},},interval: 0,},

代码片段截图：

2.设置chartsCurrentData用于接收tooltip显示时的charts信息。

 tooltip: {trigger: "axis",formatter: function (params) {_this.chartsCurrentData = params[0];}// 其他代码信息.....}

代码片段截图：

3.点击时需要拿到chartsCurrentData的值，同时需要把对应横坐标值给axisValue，并且相应月份高亮显示，提示框不消失。

 myChartId.getZr().on("click", (params) => {// 拿到当前坐标位置const pointInPixel = [ params.offsetX, params.offsetY ];// 点击空的地方不执行逻辑if (myChartId.containPixel("grid", pointInPixel)) {console.log("拿到当前点击节点的索引", _this.chartsCurrentData);const {name, dataIndex, seriesIndex} = _this.chartsCurrentData_this.axisValue = name;// 重新加载折线图myChartId.dispatchAction({type: "restore",});// 重新显示弹框位置myChartId.dispatchAction({type: "showTip",seriesIndex: seriesIndex,dataIndex: dataIndex,});}});

其实我想说的是，Echarts还可以通过dispatchAction来触发action。又多了解到一种解决问题的方法，特此记录一下。

大家想了解，可以查看官网api: https://echarts.apache.org/zh/api.html#action.tooltip.showTip

echarts折线图点击x值动态高亮且显示tooltip相关推荐

Echarts 折线图y轴标签值太长时显示不全的解决办法
问题分析解决办法问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全 ...
echarts折线图不显示y轴值_Echarts 折线图y轴标签值太长时显示不全的解决办法
问题先看一下正常的情况再看一下显示不全的情况所有的数据都是从后台取的,也就是说动态变化的,一开始的时候数据量不大不会出现问题,后面y轴的值越来越大的时候就出现了这个显示不全的情况. 分析先贴一 ...
echarts折线图曲线，每个值上面添加小圆点或者小圆圈
在折线图中,我们可能会在每个数值上面加小圆点或者小圆圈,只需要在series中加symbol即可,以下是两种效果,当symbol值为none的时候,则没有小圆点或者小圆圈,当值为false或者' '时 ...
echarts折线图鼠标悬浮竖线_echarts y轴，显示数据，但不显示竖线
在yAxis中插入: axisLine: {show:false}, axisTick: {show:false}, yAxis : [ { show:true, axisLine: {show:fa ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
echarts折线图实线加虚线
请将如下代码粘贴至echarts官网测试环境测试:http://echarts.baidu.com/examples/editor.html?c=line-simple option = {title ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
echarts 折线图线条粗细_echarts 折线图点击高亮
echarts中注册事件很多 ,记录下今天做的折线图点击高亮: 查了api,看了半天,发现折线图点击时只能做到圆点变大,并不能实现点击线条,整条线条高亮,也真是醉了. 上图: 如图所示,只能圆点变大. ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...

echarts折线图点击x值动态高亮且显示tooltip

预期效果：提示框显示时，相应的x坐标月份高亮（蓝色），同时提示框显示。

echarts折线图点击x值动态高亮且显示tooltip相关推荐

最新文章

热门文章