vue echarts 折线图、区域面积图、散点图结合

echarts 折线图、区域面积图、散点图结合

1、三条数据 x轴共用一个；y轴是单独的，一共有三个y轴；
2、tooltip展示和legend展示有单独处理过；

具体代码如下：

<template>
  <div>
    <div 
      id="scatterChart" 
      ref="scatterChartRef" 
      style="width: 100%; height: 450px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'fundManagerLifeCycle',
  components: {},
  props: {},
  data () {
    return {
      chart: null,
      _thisForChart: null,
      _thisForWindow: null,
    }
  },
  created () {},
  mounted () {
    this.$nextTick(() => {
      this.initScatterChart()
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    })
  },
  beforeDestroy () {
    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()
  },
  computed: {},
  watch: {},
  methods: {
    initScatterChart() {
      var chartDom = document.getElementById('scatterChart');
      this.chart = echarts.init(chartDom);
      let option = {
        color: ['#e58a96','orange','#57a1ff',],
        legend: {
          show: true,
          data: [
            {name: '拟合净值',icon: 'rect'},
            {name:'管理基金数量',icon: 'rect'},
            {name: '合并规模',icon: 'circle'},
          ],
          x: 'left',
          y: 'bottom',
          itemWidth: 14, // 图例标记的图形宽度
          itemHeight: 6, // 图例标记的图形高度
        }, 
        grid: {
          top: '15%',
          left: '4%',
          right: '12%',
          bottom: '13%',
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          backgroundColor: 'rgba( 0, 0, 0,0.7)',
          borderColor: 'rgba( 0, 0, 0,0.7)',
          formatter: function (params) {
            console.log(params,'params');
            var str = params[0].name + '</br>'
            for(let item of params) {
              let title1 = item.seriesName === '拟合净值' ? '拟合净值' : item.seriesName === '管理基金数量' ? '管理基金数量（右）' : '合并规模（右）'
              let value1 = item.seriesName === '拟合净值' ? item.value : item.seriesName === '管理基金数量' ? item.data.label : item.value + '亿元'
              str = `<span style='color: #fff;'>${str}</span><div style='display:flex;align-items:center;justify-content:space-between;'><span>${item.marker}<span style='color: #fff;'>${title1}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${value1}</span></div>`
            }
            return str;
          },
        },
        xAxis: [
          {
            show: true,
            type: 'category',
            data: [ 
              '2019-01',
              '2019-02',
              '2019-03',
              '2019-04',
              '2019-05',
              '2019-06',
              '2019-07',
              '2022-01',
              '2022-02',
              '2022-03',
            ],
            boundaryGap: false,
            axisLine: { show: false },
            splitLine: { show: false },
            splitArea: { show: false },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              // color: '#aaa',
            },
          },
        ],      
        yAxis: [
          {
            type: 'value',
            name: '拟合净值',
            position: 'left',
            offset: 0,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              color: '#000',
              formatter: (value) => {
                return `${value.toFixed(2)}`
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
              }
            },
          },
          {
            type: 'value',
            position: 'right',
            offset: 10,
            name: '数量：个',
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              // formatter: (value) => {
              //   return `${value.toFixed(2)}%`
              // }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },

          },
          {
            type: 'value',
            position: 'right',
            offset: 100,
            name: '规模：亿元',
            axisLabel: {
              show: true,
              // formatter: (value) => {
              //   return `${value.toFixed(2)}%`
              // }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
          }
        ],
        series: [
          {
            name: '拟合净值',
            type:'line',
            symbol: 'none',
            yAxisIndex: 0,
            data:[12, 24, 72, 22, 29, 82, 32,10,31,56],
            zlevel: 100,
            z: 100,
          },
          {
            name: '管理基金数量',
            type: 'scatter',
            yAxisIndex: 1,
            symbolSize: 40,
            label: {
              normal:{
                show: true,
                formatter: (params) => {
                  return params.data.label;
                },
                color: '#fff',
                textStyle: {
                  fontSize: '12',
                },
              }
            },
            data: [
              {
                label: '3',
                value: [2, 8],
              },
              {
                label: '10',
                value: [6, 9],
              },
              {
                label: '5',
                value: [3, 7],
              },
              {
                label: '6',
                value: [5, 1],
              },
              {
                label: '2',
                value: [0, 3],
              },
              {
                label: '9',
                value: [4, 7],
              },
              {
                label: '4',
                value: [1, 3],
              },
              {
                label: '7',
                value: [10, 3],
              },
              {
                label: '1',
                value: [7, 6],
              },
              {
                label: '8',
                value: [9, 8],
              },
            ],
            zlevel: 99,
            z: 99,
          },
          {
            name: '合并规模',
            type: 'line',
            yAxisIndex: 2,
            showSymbol: false,
            symbol: null,
            lineStyle: {
              width: 0,
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#409eff",
                  },
                  {
                    offset: 1,
                    color: "#409eff",
                  },
                ],
              ),
            },
            data: [22, 102, 72, 62, 42, 82, 32, 10 ,21, 56],
            zlevel: 98,
            z: 98,
          },
          
          
        ],
      }
      this.chart.setOption(option,true);
    },

    // 监听侧边栏导航的宽度发生变化
    addEventListenerToSidebarContainer(_this) {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = _this;
      sidebarContainer &&
        sidebarContainer.addEventListener("transitionend", this.sidebarResizeHandler);
    },
    removeEventListenerToSidebarContainer() {
      let sidebarContainer = document.getElementsByClassName("sidebar-container")[0];
      this._thisForChart = null
      sidebarContainer &&
        sidebarContainer.removeEventListener("transitionend", this.sidebarResizeHandler);
    },

    sidebarResizeHandler(e) {
      if (e.propertyName === "width") {
        this._thisForChart.chart.resize();
      }
    },

    // window 的尺寸发生变化的时候 会执行图表的resize
    addEventListenerToWindowResize(_this) {
      this._thisForWindow = _this;
      window.addEventListener("resize", this.windowResizeHandler);
    },
    removeEventListenerToWindowResize(_this) {
     this. _thisForWindow = null
      window.removeEventListener("resize", this.windowResizeHandler);
    },

    windowResizeHandler(e) {
      this._thisForWindow.chart.resize();
    },
  },
}
</script>

<style lang="scss" scoped>
  
</style>

展示效果图如下：