vue项目中使用echarts完成图表类的开发之柱状堆叠图

柱状堆叠图，其实跟柱状图是一样的，本质上就是数据复杂一点：如何才能实现堆叠呢，就是一个属性：stack: "total",该属性在数据列表中也就是series数组中，针对每一个数据对象指定stack: "total"，stack的值要一致，下面我们看一个简单的例子：

子组件：请看代码

<template>
  <div class="histogram" :style="{ 'width': histogramLevelData.width }">
    <div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramLevelData.histogramBarHeight}"></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    histogramLevelData: {
      type: Object,
    },
  },
  data() {
    return {
      myHisLevelChart: "",
    };
  },
  created() {
    _c.id++;
    this.id = "c_histogramlevel_" + _c.id;
  },
  mounted() {
    // 初始化echarts
    this.$nextTick(()=>{
      this.initChart();
    })
    // 监听浏览器变化初始化echarts
    window.addEventListener('resize',this.initChart,false);
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.initChart)
  },
  methods: {
    initChart() {
      let _this=this
      var chartDom = document.getElementById(this.id);
      if (
        this.myHisLevelChart != null &&
        this.myHisLevelChart != "" &&
        this.myHisLevelChart != undefined
      ) {
        this.myHisLevelChart.dispose(); //销毁
      }
      this.myHisLevelChart = echarts.init(chartDom);
      // 监听页面变化图表自适应
      this.myHisLevelChart.resize()
      var option = {
        tooltip:{
          trigger: "axis",
          axisPointer: {
            type: "shadow",//鼠标悬停显示样式
            shadowStyle:{
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 2
            }
          },
        },
        legend:this.histogramLevelData.legend,//标记属性
        grid: this.histogramLevelData.grid,//绘图区调整
        yAxis:this.histogramLevelData.yAxis,//y轴显示数值，以及范围
        xAxis: {//X轴显示类型
          type: this.histogramLevelData.xAxis.type,
          data: this.histogramLevelData.xAxis.dataList,
          axisLabel: {//坐标轴文字显示样式
            interval: 0,
            lineHeight:this.histogramLevelData.xAxis.axisLabel.lineHeight,
            rotate:this.histogramLevelData.xAxis.axisLabel.rotate,
            formatter:function(value){  
                var str = ""; 
                var num = _this.histogramLevelData.xAxis.axisLabel.fontNum; //每行显示字数 
                var valLength = value.length; //该项Y轴字数  
                var rowNum = Math.ceil(valLength / num); // 行数  
                if(rowNum > 1) {
                    for(var i = 0; i < rowNum; i++) {
                        var temp = "";
                        var start = i * num;
                        var end = start + num;
                        temp = value.substring(start, end) + "\n";
                        str += temp; 
                    }
                    return str;
                } else {
                    return value;
                } 
            }
          }
        },
        series: this.histogramLevelData.series
      };
      this.myHisLevelChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  width: 100%;
}
</style>

父组件：

<template>
  <div class="indicatorsCity">
    <div class="questions-other">
      <HistoGramLevel
        class="histogram"
        :histogramLevelData="histogramLevelData"
      />
    </div>
  </div>
</template>

<script>
import HistoGramLevel from "@/components/histogramlevel.vue";
export default {
  components: {
    HistoGramLevel,
  },
  data() {
    return {
      // 水平柱状图
      histogramLevelData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "46.782vw",
        legend: {
          //标记属性
          data: ["已整改", "未整改"],
          orient: "horizontal", //标记排列显示
          top: 15, //标记位置
          left: 3 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 10,
          itemHeight: 10,
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          //Y轴显示数值
          type: "value",
          boundaryGap: [0, 0.01], //数值精度
          splitNumber: 1,
          min: 0,
          max: 250,
          interval: 50,
          axisLabel: {},
        },
        xAxis: {
          //X轴显示分类
          type: "category",
          dataList: [
            "城市综合环境秩序",
            "城市道路（河道）及两侧环境",
            "园林绿化环境",
            "建设工地环境秩序",
            "住宅小区环境秩序",
            "公路铁路两侧环境",
            "道路交通秩序",
            "城市生态环境",
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 20, //每行显示字数
            rotate: 45, //文字旋转角度，0不旋转
          },
        },
        series: [
          //柱状图数据
          {
            name: "已整改",
            type: "bar",
            stack: "total",//堆叠的属性配置，如果没有这个配置，柱状图将会水平并排显示
            data: [175, 84, 112, 114, 82, 92, 160, 235],
            itemStyle: {
              //柱状图样式设置
              color: "#1492FF",
            },
            label: {
              show: false,
            },
            // emphasis: {//鼠标移入是否展示当前的柱状图
            //   focus: "series",
            // },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "未整改",
            type: "bar",
            stack: "total",//堆叠的属性配置
            data: [18, 11, 13, 14, 17, 0, 2, 0],
            itemStyle: {
              color: "#FF9314", //柱状图颜色
            },
            label: {
              show: false,
            },
            // emphasis: {//鼠标移入是否展示当前的柱状图
            //   focus: "series",
            // },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },
      
    };
  },
  mounted() {
   
  },
};
</script>

<style lang="scss" scoped>
.indicatorsCity {
 
</style>