vue里echarts实现折线图tooltip自定义样式

效果

实现

先编写父组件：

<stacked-line-chart :tooltipData="tooltipData" :monthNameData="monthNameData" :allApplyCountData="allApplyCountData"
  :hallApplyCountData="hallApplyCountData" :netApplyCountData="netApplyCountData"
></stacked-line-chart>
<script>
export default {
	data () {
    return {
      tooltipData: ['2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-09', '2020-10', '2020-12', '2021-01', '2021-02'],
      monthNameData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '9月', '10月', '12月', '1月', '2月'], // x轴月份数据
      allApplyCountData: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90], // 总申办量
      hallApplyCountData: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390], // 实体大厅申办量
      netApplyCountData: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290], // 网上大厅申办量
    };
  },
}
</script>

在编写StackedLineChart组件

<template>
  <div ref="stackedLineChart" class="stacked-line-chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'StackedLineChart',
  props: {
    // 用于提示
    tooltipData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // x轴月份数据
    monthNameData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 总申办量
    allApplyCountData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 实体大厅申办量
    hallApplyCountData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 网上大厅申办量
    netApplyCountData: {
      type: Array,
      default: () => {
        return [];
      }
    },
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          padding: [8, 10, 8, 10],
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.65)'
            },
          },
          // 自定义提示框的内容
          formatter: (params) => {
            let result = this.tooltipData[params[0].dataIndex] + "</br>";
            params.forEach(el => {
              result += `${this.markDot(el.color)}${el.seriesName}：${el.data}</br>`
            })
            return result;
          }
        },
        color: ['#9A47FF', '#1890FF', '#2FC25B'],
        legend: {
          data: ['总申办量', '实体大厅申办量', '网上大厅申办量'],
          left: 'left',
          icon: 'circle',
          padding: 0,
          itemGap: 24,
          itemWidth: 6,
          itemHeight: 6,
          textStyle: {
            color: '#333',
            padding: [2, 0, 0, 0],
            lineHeight: 20
          }
        },
        grid: {
          left: '0',
          right: '2%',
          bottom: '0',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: '#E9E9E9'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#E9E9E9'
            }
          },
          axisLabel: {
            color: '#777777'
          }
        },
        yAxis: {
          type: 'value',
          nameTextStyle: {
            color: 'red'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#777777'
          },
          splitLine: {
            lineStyle: {
              color: '#E9E9E9',
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '总申办量',
            zlevel: 1,
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: [2, 2],
            showSymbol: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff'
            },
            data: []
          },{
            name: '实体大厅申办量',
            zlevel: 1,
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: [2, 2],
            showSymbol: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff'
            },
            data: []
          },{
            name: '网上大厅申办量',
            zlevel: 1,
            type: 'line',
            stack: '总量',
            symbol: 'circle',
            symbolSize: [2, 2],
            showSymbol: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff'
            },
            data: []
          }
        ],
      }
    };
  },
  mounted() {
    this.initRender();
  },
  methods: {
    // 初始化渲染
    initRender() {
      this.option.xAxis.data = this.monthNameData; // x轴月份数据
      this.option.series[0].data = this.allApplyCountData; // 总申办量
      this.option.series[1].data = this.hallApplyCountData; // 实体大厅申办量
      this.option.series[2].data = this.netApplyCountData; // 网上大厅申办量
      let chartDom = this.$refs.stackedLineChart;
      let myChart = echarts.init(chartDom);
      myChart.setOption(this.option);
    },
    // 生成大小一样样色不同的圆点
    markDot(color) {
      let domHtml = '<span style="' +
        'display: inline-block;' +
        'margin-right: 8px;' +
        'margin-bottom: 2px;' +
        'border-radius: 6px;' +
        'width: 6px;' +
        'height: 6px;' +
        `background-color: ${color}` +
      '"></span>'
      return domHtml;
    }
  },
};
</script>

<style lang="scss" scoped>
.stacked-line-chart-box {
  height: 388px;
}
</style>