echart两个年份对比图表

echart下载到本地项目，通过import引入使用

<template>
  <div
    class="com-contain"
    :style="[{ position: 'relative' }, { height:  height + 'px' }]"
    style="overflow-y: auto; overflow-x: hidden; width: 100%;"
  >
    <template v-if="loading">
      <t-loading fix>
        <t-icon type="loading"></t-icon>
        <div>加载中...</div>
      </t-loading>
    </template>
    <template v-else-if="!pagedata.length">
      <div class="hrrc-no-data">暂无数据</div>
    </template>
    <template v-else>
      <div
        class="com-chart"
        ref="seller_ref"
        :style="optionStyle"
        style="min-height: 100%; width: 100%"
      ></div>
    </template>
  </div>
</template>

<script>
import * as echarts  from './echarts.min.js'
export default {
  props: {
    loading: Boolean,
    pagedata: Array,
    height: Number
  },
  data() {
    return {
      chartInstance: null,
      allData: []
    }
  },
  mounted() {
    this.initChart()
    this.updateChart()
  },
  computed: {
    optionStyle() {
      const style = {}
      let arr = []
      this.pagedata.forEach(item => {
        if (item.data && item.data.length) {
          item.data.forEach((subItem) => {
            if (!arr.includes(subItem.technologyTypeName)) {
              arr.push(subItem.technologyTypeName)
            }
          })
        }
      })
      let percentage = arr.length * 55
      style.height = percentage + 'px'
      return style
    }
  },
  methods: {
    // 初始化chartInstance对象
    initChart() {
      this.chartInstance = echarts.init(this.$refs.seller_ref)
    },
    // 更新图表
    updateChart() {
    console.log(this.pagedata)
      let labelData = []
      let yearArr = []
      const json = {}
      this.pagedata.map((item, index) => {
        if (item.data && item.data.length) {
          const arr = []
          const arr1 = []
          const arr2 = []
          item.data.forEach((subItem) => {
            if (!labelData.includes(subItem.technologyTypeName)) {
              labelData.push(subItem.technologyTypeName)
            }
            arr.push({
              name: subItem.technologyTypeName,
              value: subItem.technologyTypeSum ? subItem.technologyTypeSum : 0
            })
            arr1.push({
              name: subItem.technologyTypeName,
              value: subItem.technologyTypeUpSum ? subItem.technologyTypeUpSum : 0
            })
            arr2.push({
              name: subItem.technologyTypeName,
              value: subItem.technologyTypeDownSum ? subItem.technologyTypeDownSum : 0
            })
          })
          json[item.year] = [arr, arr1, arr2]
        }
        console.log(json[item.year])
        yearArr.push(item.year)
      }),
      console.log(json)
      console.log(labelData, 'labelData')
      console.log(yearArr, 'yearArr')
      let xData = labelData
      // let xData = ['IT运维', 'IT运营', '架构/规划', 'IT发', '信息安全']
      // let eventHandling = [11, 38, 23, 139, 66]
      // let eventWarning = [3, 20, 122, 134, 55]
      let legend = ['总人数', '晋级人数', '降级人数']
      this.tyLine = {
        // backgroundColor: "#fff",
        timeline: {
          show: false
        },
        tooltip: {
          // trigger: 'axis', // 悬浮提示 全部展示
          // axisPointer: {
          //   type: 'shadow'
          // },
          backgroundColor: 'rgba(0,0,0,0.5)',
          borderWidth: 0,
          extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);',
          textStyle: {
            fontSize: 14,
            color: '#fff'
          }
        },
        legend: {
          bottom: '3%',
          // left: '1%',
          // itemWidth: 14,
          // itemHeight: 14,
          // itemGap: 10,
          // icon: 'rect',
          // selectedMode: true,
          // textStyle: {
          //   color: '#fff',
          //   fontSize: 14,
          //   padding: [0, 6]
          // }
          top: 5,
          left: 0,
          textStyle: {
            color: '#fff',
            fontSize: 14
          },
          itemWidth: 8,
          itemHeight: 8,
          icon: 'rect',
          orient: 'horizontal'
        },
        grid: [
          //
          // 左边
          {
            show: false,
            left: '0%',
            top: '15%',
            bottom: '10%',
            containLabel: true,
            width: '38%',
            color: '#fff'
          },
          // 中间
          {
            show: false,
            left: '48%',
            top: '15%',
            bottom: '10%',
            width: '0%'
          },
          // 右边
          {
            show: false,
            right: '0%',
            top: '15%',
            bottom: '10%',
            containLabel: true,
            width: '38%'
          }
        ],
        xAxis: [
          {
            type: 'value',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          {
            gridIndex: 1,
            show: false
          },
          {
            gridIndex: 2,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,
            name: yearArr[0], // 图表名
            position: 'right',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: { // y轴 刻度尺
              show: false
            },
            axisLabel: {
              show: false
            },
            // data: xData
          },
          {
            gridIndex: 1,
            type: 'category',
            inverse: false,
            position: 'right',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              // 对应中文标签样式
              show: true,
              color: '#fff',
              fontSize: 14,
              align: 'center'
            },
            data: xData.map(function (value) { // 中文标签数据 y轴几个排列
              return {
                value: value,
                textStyle: {
                  align: 'center'
                }
              }
            })
          },
          {
            gridIndex: 2,
            type: 'category',
            name: yearArr[1],
            inverse: true,
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            // data: xData // y轴几个排列
          }
        ],
        series: [
          // 左边
          {
            name: legend[0],
            type: 'bar',
            stack: '1',
            barWidth: 20,
            itemStyle: {
              color: '#2A82FE'
            },
            label: {
              show: false,
              position: 'left',
              color: '#2A82FE'
            },
            data: json[yearArr[0]][0],
            animationEasing: 'elasticOut'
          },
          {
            name: legend[1],
            type: 'bar',
            stack: '1',
            itemStyle: {
              color: '#37D3A4'
            },
            label: {
              show: false,
              position: 'left',
              color: '#37D3A4'
            },
            data: json[yearArr[0]][1],
            animationEasing: 'elasticOut'
          },
          {
            name: legend[2],
            type: 'bar',
            stack: '1',
            itemStyle: {
              color: '#F6BD16'
            },
            label: {
              show: false,
              position: 'left',
              color: '#F6BD16'
            },
            data: json[yearArr[0]][2],
            animationEasing: 'elasticOut'
          }, // 右边
          {
            name: legend[0],
            type: 'bar',
            stack: '2',
            barWidth: 20,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: '#2A82FE'
            },
            label: {
              show: false,
              position: 'right',
              color: '#2A82FE'
            },
            data: json[yearArr[1]][0],
            animationEasing: 'elasticOut'
          },
          {
            name: legend[1],
            type: 'bar',
            stack: '2',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: '#37D3A4'
            },
            label: {
              show: false,
              position: 'right',
              color: '#37D3A4'
            },
            data: json[yearArr[1]][1],
            animationEasing: 'elasticOut'
          },
          {
            name: legend[2],
            type: 'bar',
            stack: '2',
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              color: '#F6BD16'
            },
            label: {
              show: false,
              position: 'right',
              color: '#F6BD16'
            },
            data: json[yearArr[1]][2],
            animationEasing: 'elasticOut'
          }
        ]
      }
      this.chartInstance.setOption(this.tyLine)
    }
  }
}
</script>

<style>
</style>