highcharts柱状图如何实现鼠标移入高亮颜色，鼠标移出恢复颜色

最新推荐文章于 2022-12-08 00:09:05 发布

Orange301511

最新推荐文章于 2022-12-08 00:09:05 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/LQS5858/article/details/124454527

版权

大前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

highcharts柱状图如何实现鼠标移入高亮颜色，鼠标移出恢复颜色

如下图，需要实现鼠标移入高亮柱状图颜色，鼠标移出恢复颜色
在这里插入图片描述
只需要在series对象中添加一个hover属性，将属性按如下设置即可

series: [
          {
            color: {
              linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
              stops: [
                [0, 'rgba(0, 184, 164, 0)'],
                [1, 'rgba(0, 184, 164, 0.3']
              ]
            },
            states: {
              hover: {
                color: {
                  linearGradient: { x1: 0, x2: 0, y1: 1, y2: 0 },
                  stops: [
                    [0, 'rgba(0, 184, 164, 0)'],
                    [1, 'rgba(0, 184, 164, 1']
                  ]
                }
              }
            },
            data: [[1527832563000, 29.9], [1527918791000, 71.5], [1528005191000, 106.4], [1528091591000, 129.2], [1528177991000, 144.0], [1528264563000, 176.0], [1528350963000, 135.6], [1528437363000, 148.5], [1528523763000, 216.4], [1528610163000, 194.1], [1528696563000, 95.6], [1528782963000, 54.4]]
          }
        ]