echarts修改tooltip默认的圆点图标为其他样式

echarts修改tooltip默认的圆点图标为其他样式_第1张图片

echarts修改tooltip默认的圆点图标为其他样式_第2张图片

业务需求,默认是圆点,需要把线的由圆点改为线

红色线是理论,点是历史理论,绿色线是实际, 点是历史实际,在series里的顺序也是这样排的。

打印出来的params里的marker就是圆点,改这段代码就可以了

echarts修改tooltip默认的圆点图标为其他样式_第3张图片

 tooltip: {
    trigger: 'axis',
    axisPointer: {
      crossStyle: {
        color: '#999'
      }
    },
    backgroundColor: appStore.getThemeObj['--xxx-content-bg'],
    borderColor: appStore.getThemeObj['--xxx-content-bg'],
    textStyle: {
      color: appStore.getThemeObj['--xxx-second-content-color']
    },
    confine: true,
    formatter(params) {
      let tip = ''
      let text
      let title
      const therolineMarker = ``
      const AclineMarker = ``

      for(let i = 0; i < params.length; i++) {
        title = params[0].axisValueLabel + '
' if (params[i].componentSubType === 'line') { const name = params[i].seriesIndex === 0 ? '理论xxx:' : '实际xxx:' const lineStyle = params[i].seriesIndex === 0 ? therolineMarker : AclineMarker text = `${lineStyle}${name}${params[i].value[1]} ℃
` } if (params[i].componentSubType === 'scatter') { const name = params[i].seriesIndex === 1 ? '历史理论xxx:' : '历史实际xxx:' text = `${params[i].marker}${name}${params[i].value[1]} ℃
` } tip += text } // console.log(tip,'--tip--'); return `${title}${tip}` }, },

你可能感兴趣的:(web前端,vue,echarts,javascript,前端)