vue2.x Echart markPoint在hover图表时才出现

四喜花露水

已于 2024-08-08 17:31:30 修改

阅读量173

点赞数 2

文章标签： javascript 开发语言 echarts vue

于 2024-08-08 17:30:03 首次发布

本文链接：https://blog.csdn.net/gaowxx/article/details/141032087

版权

要求：

1.markPoint在hover图表时才出现：echart.on('mousemove', (params) ... 监听这个事件

2.hover markPoint 时候的tooltip要展示另一个数据：再写一个tooltip在markPoint里

Data

const data = [
  { name: 'val1', value: 99, data: 'markpoint：sec-data001', yAxis: 99, },
  
  // ...
]

Method 关键部分截取

drawChat() {

  // ...

  // 添加悬浮事件监听
  echart.on('mousemove', (params) => {
    let index = params.dataIndex
    if (params.componentType == 'series') {
      const newOption = {
        series: [{
          markPoint: {
            tooltip: {
              trigger: 'item',
              backgroundColor: "#fff",
              textStyle: {
                color: "#333",
                fontSize: 12
              },
              padding: [0, 8, 8, 8],
              extraCssText: 'box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);',
              formatter: function (params) {
                var html = [];
                html.push('<div style="font-size:12px;">');
                html.push('<div style="margin :15px 0 6px  0; font-weight: 700;">Title</div>');
                html.push('<div style="margin : 8px 0; color: #666"><span>' + params.data.data + ' </span></div>');
                return html.join("");
              },
            },
            label: {
              show: true,
              color: "#333",
              offset: [0, -5]
            },
            emphasis: {
              label: {
                show: true,
                color: "#333"
              }
            },
            data: [
              {
                name: data[index].name,
                value: data[index].value,
                data: data[index].data,
                xAxis: index,
                yAxis: data[index].yAxis,
                symbol: 'image://' + require('../../assets/images/bg.png'),
                symbolOffset: [0, '-60%'],
                symbolSize: [47, 43],
              },
            ],
          }
        }]
      };
      echart.setOption(newOption);
    }
  });
}

【参考资料】

echarts markPoint标注自定义图片、自定义内容、文字文本、标注便宜距离_echarts markpoint自定义图标-CSDN博客