Echarts实现高亮某一个点

背景

接口会返回所有点的数据，以及最优点的数据。产品要求在绘制图形后，高亮最优点，添加一个红色的样式，如图。点击select选择器时，可选择不同指标和花费对应的关系。

以下介绍实现思路

1、自定义配置选择器的数据源，默认选中roi。

chartParams: 'roi',
chartOption: [
    {
        label: 'ROI、边际ROI和花费的关系',
        value: 'roi',
        otherValue: 'incre_roi',
        name1: 'ROI',
        name2: '边际ROI',
    },
    {
        label: '点击价值、边际点击价值和花费的关系',
        value: 'vpc',
        otherValue: 'incre_vpc',
        name1: '点击价值',name2: '边际点击价值',
    },
    {
        label: '加购成本、边际加购成本和花费的关系',
        value: 'cpca',
        otherValue: 'incre_cpca',
        name1: '加购成本',
        name2: '边际加购成本',
    },
],

<el-select v-model="chartParams" @change="handleAnalysis">
    <el-option v-for="item in chartOption"
        :key="item.value"
        :value="item.value"
        :label="item.label"></el-option>
</el-select>

2、绘制echarts

• 引入

import * as echarts from 'echarts';

• 设置宽高

<div ref="myChart1" style="width: 50%; height: 280px"></div>

• 在data中，定义一个myChart1的变量用来保存eCharts实例，echarts的基础配置

其中：formatNum方法为公共方法，功能：数字增加千分位，如果有小数点保留2位小数。文章末尾有提供

tooltip对象中的formatter函数，当鼠标悬浮时，标记点（即最优点）不展示悬浮数据，其他点展示固定的指标数据

myChart1: '',
echartsData1: {
    legend: {
        data: ['ROI','边际ROI'],
        selectedMode: false, // 是否允许点击
    },
    grid: {
        show: false,
        top: '40px', // 一下数值可为百分比也可为具体像素值
        right: '50px',
        bottom: '40px',
        left: '40px',
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
            show: true,
            lineStyle: {
                type: 'dashed',
                color: '#eee', // 左边线的颜色
                width: '1', // 坐标线的宽度
            },
        },
        data: [1,2,3,4,5,6,7,8,9,10],
        axisLine: {
            show: true,
            lineStyle: {
                type: 'solid',
                color: '#ccc', // 左边线的颜色
                width: '1', // 坐标线的宽度
            },
        },
        axisLabel: {
            interale: 0,
            rotate: 45, //防止x轴坐标数据过大放不下，倾斜45°
            color: '#aaa', // 坐标轴label颜色
            formatter: (value) => {
                return formatNum(value)
            }
        },
    },
    yAxis: [
        {
            type: 'value',
            name: 'ROI',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#eee', // 左边线的颜色
                    width: '1', // 坐标线的宽度
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#ccc', // 左边线的颜色
                    width: '1', // 坐标线的宽度
                },
            },
            axisLabel: {
                formatter: '{value}',
                color: '#aaa',
            },
        },
        {
            type: 'value',
            name: '边际ROI',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#eee', // 左边线的颜色
                    width: '1', // 坐标线的宽度
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    type: 'solid',
                    color: '#ccc', // 左边线的颜色
                    width: '1', // 坐标线的宽度
                },
            },
            axisLabel: {
                formatter: '{value}',
                color: '#aaa',
            },
        },
    ],
    tooltip: {
        trigger: 'item', // 设置触发类型为坐标轴
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999',
            },
        },
        formatter: (value) => {
            if(value.componentType === "markPoint") return
            let str= ``
            let color = value.color
            let color2 = "#91cc75"
            str += `<p style="line-height: 26px;color: ${color}">花费：${formatNum(Math.trunc(value.data['budget']))}</p>`
            str += `<p style="line-height: 26px;color: ${color}">GMV：${formatNum(Math.trunc(value.data['pred_gmv']))}</p>`
            str += `<p style="line-height: 26px">
                <span style="display: inline-block; width: 110px;color: ${color}">ROI: ${value.data['roi']}</span> 
                <span style="display: inline-block; min-width: 150px;color: ${color2};">边际ROI: ${value.data['incre_roi']}</span></p>`
            str += `<p style="line-height: 26px">
                <span style="display: inline-block; width: 110px;color: ${color}">点击价值: ${value.data['vpc']}</span> 
                <span style="display: inline-block; min-width: 150px;color:${color2};">边际点击价值: ${value.data['incre_vpc']}</span></p>`
            str += `<p style="line-height: 26px">
                <span style="display: inline-block; width: 110px;color: ${color}">加购成本: ${value.data['cpca']}</span> 
                <span style="display: inline-block; min-width: 150px;color:${color2};">边际加购成本: ${value.data['incre_cpca']}</span></p>`
            return str                  
        }
    },
    series: [
        {
            name: 'ROI',
            data: [12, 25, 45, 35, 55],
            yAxisIndex: 0, // 使用第1个Y轴
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#5470c6',
                type: 'solid',
            },
            symbol:'circle', 
            showSymbol: true,
            symbolSize: 6,
            markPoint: { //给第一条y轴添加标记点
                data: [{ 
                    value: 'best', 
                    xAxis: 1, 
                    yAxis: 2.68,
                    itemStyle: {
                        color: 'red' //颜色设置为红色
                    },
                }]
            },
        },
        {
            name: '边际ROI',
            data: [1, 2, 44, 35, 155],
            yAxisIndex: 1, // 使用第2个Y轴
            type: 'line',
            smooth: true,
            lineStyle: {
                color: '#5470c6',
                type: 'dashed'  // 这里设置线的类型为'dashed'，即虚线
            },
        }
    ],
},

• 初始化echarts，绑定点击事件（通过样式来实现高亮）

this.$nextTick(()=> {
    this.myChart1 = echarts.init(this.$refs['myChart1'])
    this.myChart1.setOption(this.echartsData1)
    this.myChart1.on('click', (event) => {
        this.echartClick(event)
    })
})
//切换最优点
echartClick(event) {
    this.bestSpotInfo = event.data
    this.handleSetHighLight(event.dataIndex)
},
//设置高亮事件
handleSetHighLight(idx) {
    this.echartsData1.series[0].data.map((item,index) => {
        item.itemStyle.color = index===idx? 'red' : '#5470c6'
        item.symbolSize = index===idx? 11 : 6
    })
    this.myChart1.setOption(this.echartsData1)
},

• 获取数据后处理数据

//处理三个关系的折线图
handleAnalysis() {
    let tempObj = this.chartOption.find(item=>item.value==this.chartParams)
    this.echartsData1.xAxis.data = this.allSpotInfo.map(item => item.budget)
    this.echartsData1.legend.data = [tempObj.name1, tempObj.name2]
    this.echartsData1.yAxis[0].name = tempObj.name1
    this.echartsData1.yAxis[1].name = tempObj.name2
    this.echartsData1.series[0].name = tempObj.name1
    this.echartsData1.series[1].name = tempObj.name2

    //寻找最优点的坐标 设置默认高亮
    let bestIndex = this.allSpotInfo.findIndex(item => item.budget == this.bestSpotInfo.budget)
    this.echartsData1.series[0].markPoint.data[0].xAxis = bestIndex
    this.echartsData1.series[0].markPoint.data[0].yAxis = this.bestSpotInfo[tempObj.value]
    this.echartsData1.series[0].data = this.allSpotInfo.map((item,index) => {
        return {
            value: item[tempObj.value],
            ...item,
            itemStyle: {
                color: '#5470c6'
            },
            symbolSize: 6
        }
    })
    this.echartsData1.series[1].data = this.allSpotInfo.map(item => {
        return {
            value: item[tempObj.otherValue],
            ...item,
        }
    })
    this.handleSetHighLight(bestIndex)
    if(this.myChart1) {
        this.myChart1.setOption(this.echartsData1)
    }
},

4、监听eCharts的宽度变化，实现页面宽度自适应

mounted() {
    window.addEventListener('resize', () => {
        if (this.$refs['myChart1']) {
            this.myChart1.resize();
        }
    })
},

/* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次,容易导致内存泄漏和额外CPU或GPU占用哦 */
beforeDestroy () {
    window.removeEventListener('resize', () => {
        this.myChart1.resize()
    })
},

最后贴上

// 数字增加千分位，如果有小数点保留2位小数
function formatNum(str) {
  if (str === 0) {
    return 0;
  }
  if (str === null || str === undefined || str === "--") {
    return "- -";
  }
  var newStr = "";
  var count = 0;
  str = str.toString();
  str = str.replace(/,/g, "");
  if (str.indexOf(".") === -1) {
    for (var i = str.length - 1; i >= 0; i--) {
      if (count % 3 === 0 && count !== 0) {
        newStr = str.charAt(i) + "," + newStr;
      } else {
        newStr = str.charAt(i) + newStr;
      }
      count++;
    }
    str = newStr;
    return str;
  } else {
    for (var j = str.indexOf(".") - 1; j >= 0; j--) {
      if (count % 3 === 0 && count !== 0) {
        newStr = str.charAt(j) + "," + newStr;
      } else {
        newStr = str.charAt(j) + newStr;
      }
      count++;
    }
    str = newStr + (str + "00").substr((str + "00").indexOf("."), 3);
    return str;
  }
}