vue echarts 堆叠面积图

堆叠面积图代码如下：

父组件代码：

<template>
  <div>
    <stackAreaChart 
      :chartId="chartId"
      :width="width"
      :height="height"
      :chartColor="chartColor"
      :xData="xData"
      :seriesData="seriesData"
      :chartLegend="chartLegend"
    ></stackAreaChart>
  </div>
</template>

<script>
import stackAreaChart from '@/components/stackAreaChart/index.vue'
export default {
  name: 'assetConfigration',
  components: { stackAreaChart },
  props: {},
  data () {
    return {
      chartId: 'assetConfigrationId',
      width: '100%',
      height: '450px',
      chartColor: ['#6181ff','#f49644','#6c64ef','#86d100','#e04890'],
      xData: [ 
          '2019-01',
          '2019-02',
          '2019-03',
          '2019-04',
          '2019-05',
          '2019-06',
          '2019-07',
          '2022-01',
          '2022-02',
          '2022-03',
          '2022-04',
          '2022-05',
          '2022-06',
          '2022-07'],
      YData: {
        stock: ["7.12", "7.13", "7.14", "87.15", "7.17", "7.17", "7.17", "7.21", "7.21", "7.22", "7.21", "7.22"],
        bond: ["4.93", "4.91", "94.90", "4.89", "4.85", "4.85", "4.85", "4.82", "4.83", "4.81", "4.29", "4.07"],
        convertibleBonds: ["6.68", "6.69", "6.66", "6.65", "6.65", "6.65", "6.65", "6.62", "6.63", "6.63", "6.64", "6.66"],
        cash: ["20.57", "20.58", "20.56", "20.55", "20.55", "20.55", "20.56", "20.53", "20.57", "20.57", "20.60"],
        other: ["47.36", "47.35", "47.38", "47.39", "47.42", "47.42", "47.42", "47.42", "47.47", "47.50", "47.99"]
      },
      chartLegend: ['股票','债券','可转债','现金','其他'],
      chartName: '资产配置',
      seriesData: [],

    }
  },
  created () {},
  mounted () {
    this.getchartData()
  },
  computed: {},
  watch: {},
  methods: {
    getchartData () {
      this.seriesData = [
        {
          name: '股票',
          type: 'line',
          stack: 'total',
          symbol: 'none',
          areaStyle: {},
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.YData.stock
        },
        {
          name: '债券',
          type: 'line',
          stack: 'total',
          symbol: 'none',
          areaStyle: {},
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.YData.bond
        },
        {
          name: '可转债',
          type: 'line',
          stack: 'total',
          symbol: 'none',
          areaStyle: {},
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.YData.convertibleBonds
        },
        {
          name: '现金',
          type: 'line',
          stack: 'total',
          symbol: 'none',
          areaStyle: {},
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.YData.cash
        },
        {
          name: '其他',
          type: 'line',
          stack: 'total',
          symbol: 'none',
          areaStyle: {},
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.YData.other
        },
      ]
    },
  },
}
</script>

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

子组件代码：

<template>
  <div>
    <div :id="chartId" :style="{width: width, height: height}"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'stackAreaChart',
  components: {},
  props: {
    chartId: {
      type: String,
    },
    width: {
      type: String,
    },
    height: {
      type: String,
    },
    chartColor: {
      type: Array,
    },
    xData: {
      type: Array,
    },
    seriesData: {
      type: Array,
    },
    chartLegend: {
      type: Array,
    },

  },
  data () {
    return {
      chart: null,
      _thisForChart: null,
      _thisForWindow: null,
    }
  },
  created () {},
  mounted() {
    this.$nextTick(() => {
      this.initBarChart()
      this.addEventListenerToSidebarContainer(this)
      this.addEventListenerToWindowResize(this)
    })
  },
  beforeDestroy () {
    this.removeEventListenerToSidebarContainer()
    this.removeEventListenerToWindowResize()
  },
  computed: {},
  watch: {},
  methods: {
    initBarChart() {
      var chartDom = document.getElementById(`${this.chartId}`);
      this.chart = echarts.init(chartDom);
      let option = {
        color: this.chartColor,
        legend: {
          x: 'left',
          y: 'top',
          top: 10,
          padding: [0, 0, 0, 20],
          itemWidth: 8, // 图例标记的图形宽度
          itemHeight: 8, // 图例标记的图形高度
          icon: 'rect',
          data: this.chartLegend,
        },
        grid: {
          top: '15%',
          left: '2%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba( 0, 0, 0,0.7)',
          borderColor: 'rgba( 0, 0, 0,0.7)',
          formatter:function(params) {
            var str = params[0].name + '</br>'
            for(let item of params) {
              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;'>${item.seriesName}</span></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style='color: #fff;'>${item.value}%</span></div>`
            }
            return str;
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            color: '#000',
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '',
            },
          },
          axisTick: {
            show: false
          }, 
          data: this.xData,
        },
        yAxis: {
          name: '权重（%）',
          nameTextStyle: {
            color: '#000',
            fontWeight: 700
,            padding: [20, 0, 0, -60] // 上右下左的间距，单位为像素
          },
          type: 'value',
          axisLabel: {
            show: true,
            color: '#000',
            formatter: (value) => {
              return `${value.toFixed(2)}%`
            }
          
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
          },
        },
        series: this.seriesData,
      }
      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>

展示效果图如下：

在这里插入图片描述