运用ECharts实现堆叠柱状图与折线图的混合

产品经理来新需求啦，实现下图堆叠柱状折线图：

一，在我们的项目中安装echarts

npm install echarts --save

二，在需要使用图表的页面导入echarts：

import echarts from "echarts";

三，创建一个容器装图表：( 图表会根据容器的宽高自适应,容器一定要用ID命名作为标识 )

 <div
      id="employeeFollowEchart"
      style="height: 400px; margin-top: 20px"
      v-loading="loadingChart"
    ></div>

四，配置图表的参数，实际开发中可以与后端的同事协商给到适配的数据结构。

 // 配置图表
    initChart() {
      const chart = echarts.init(document.getElementById("employeeFollowEchart"));
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          show: true,
          data: ['日常跟进数', '拜访跟进数', '成交次数','实际跟进总数'],
        },
        xAxis: [
          {
            type: 'category',
            data: ['2011', '2012', '2013', '2014', '2015','2016','2017','2018','2019','2020','2021','2022'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#4874cb',
              fontSize: 14
            },
            axisLine: {
              // 轴线
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            position: 'left',
            axisLabel: {
              formatter: '{value}次'
            },
          },
          {
            type: 'value',
            name:'实际跟进总数',
            position: 'right',
            axisLabel: {
              formatter: '{value}次'
            },
          }
        ],
        series: [
          {
            name: '日常跟进数',
            data: [10, 10, 7, 7, 3,5,6,8,9,6,9,9],
            type: 'bar',
            yAxisIndex: 0,
            stack: 'Mon',
            itemStyle: {
              color: "#ee822f",
            },
          },
          {
            name: '拜访跟进数',
            data: [10, 3, 1, 6, 8,8,9,10,8,7,8,5],
            type: 'bar',
            stack: 'Mon',
            itemStyle: {
              color: "#f2ba02",
            },
          },
          {
            name: '成交次数',
            data: [1, 20, 10, 22, 0,5,7,9,5,7,7,5],
            type: 'bar',
            stack: 'Mon',
            itemStyle: {
              color: "#75bd42",
            },
          },
          {
            name: '实际跟进总数',
            type: 'line',
            yAxisIndex: 1,
            data: [23, 12, 25, 31, 9, 8, 9, 12,5,9,6,8],
            itemStyle: {
              color: "#4874cb",
            },
          }
        ]
      };
      chart.setOption(option);
    },

五，在mounted函数中调用即可，实际开发中应当在获取完数据之后调用this.initChart()函数，将initChart()函数里面的数据替换成后端返回的数据。（注意:数据类型要保持一致）

 mounted() {
    this.initChart();
  },

ECharts的配置数据在mounted中调用，主要是因为DOM元素在mounted阶段已经挂载完成，可以确保获取到正确的DOM元素，从而正确渲染图表。‌

在Vue的生命周期中，created阶段虽然已经完成了实例的创建和数据侦听、计算属性、方法等的配置，但挂载阶段还未开始，此时DOM元素尚未挂载，因此无法获取到DOM元素进行操作‌。而mounted阶段则表示实例已经被挂载到DOM上，此时可以获取到DOM元素并进行操作，适合进行ECharts的初始化‌。

此外，将ECharts的配置数据放在mounted阶段调用，还可以避免在页面加载时出现空白的情况。如果在created阶段调用，可能会因为DOM元素尚未完全挂载而导致图表无法正确渲染‌。