Echarts 柱状图: 数据叠加，且数据展示互不影响效果

1. 使用 echarts 版本: "echarts": "^4.3.0"

2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S

3. 在 main.js 入口文件中全局引入:

    import* Vue *from* 'vue'
    import* Echarts *from* 'echarts' *// 引入Echarts*
    Vue.prototype.$echarts = Echarts
   

4. echarts 配置文件( 文件名 echartsMould.js )

   1. 我这边的处理方式是将 echarts 的配置内容抽取为单独的 JS 文件，这样我维护起来会非常的方便舒服。
   
   2. 另外这样的处理方式也会减少 .vue 文件的大小，代码看起来也会非常方便整洁。 
   
   3. 这样的处理方式也方便组件化的实现。
   

import echarts from 'echarts'
var option_ZhuPillar = {
  color: ["#FFB63D", '#6E92BB'],
  title: {
    text: "统计总量",
    textStyle: {
      fontSize: 16,
      padding: "10px"
    },
    show: false,
  },
  legend: {
    data: ['评分', '配分'],
    textStyle: {
      fontSize: '12',
      color: '#333333'
    },
    right: 'center',
    bottom: 0,
  },
  grid: {
    top: 20,
    left: 30,
    right: 40,
    bottom: 10,
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    axisLine: { // y轴
      show: false
    },
    axisTick: { // y轴刻度线
      show: false
    },
    data: [
      "战略1111", "组织11111", "创新333333", "数字化44444", "质量5555", "品牌66666", "供应链77777", "文化建设-8888", "标准化9999", "风险-11-管控", "生产--11111", "研发与技术--2222"
    ],
    axisLabel: {
      rotate: 45, //斜体字可不用
      textStyle: {
        fontSize: '12',
        color: '#999999'
      }
    },
  },
  yAxis: {
    splitArea: {
      show: false
    },
    type: 'value',
    // min: 0,
    // max: 1,
    splitNumber: 10,
    axisLine: { // y轴
      show: false
    },
    axisTick: { // y轴刻度线
      show: false
    },
    splitLine: {
      lineStyle: {
        color: '#EBEEF5'
      }
    }, //设置横线样式
    axisLabel: {
      formatter: function (value, a, b) {
        var texts = []
        if (value == 0) {
          texts.push(0);
        } else if (value <= 0.1) {
          texts.push(10);
        } else if (value <= 0.2) {
          texts.push(20);
        } else if (value <= 0.3) {
          texts.push(30);
        } else if (value <= 0.4) {
          texts.push(40);
        } else if (value <= 0.5) {
          texts.push(50);
        } else if (value <= 0.6) {
          texts.push(60);
        } else if (value <= 0.7) {
          texts.push(70);
        } else if (value <= 0.8) {
          texts.push(80);
        } else if (value <= 0.9) {
          texts.push(90);
        } else if (value <= 1.0) {
          texts.push(100);
        }
        return texts;
      },
      textStyle: {
        fontSize: '12',
        color: '#333333'
      }
    }
  },
  series: [{
      barWidth: 22,
      name: '配分',
      type: 'bar',
      // stack: '排名',
      data: [
        1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
      ],
      label: {
        normal: {
          color: '#333333',
          show: true,
          position: 'top',
          zlevel: '1000',
        }
      },
    },
    {
      barGap: "-100%",
      barWidth: 22,
      data: [
        0.19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0.236
      ],
      name: '评分',
      type: 'bar',
      label: {
        normal: {
          color: '#333333',
          show: true,
          position: 'inside',
          zlevel: '1000',
        },
      },
    },
  ]
}
export {
  option_ZhuPillar
}

5. .vue 文件，当前 echarts 图表组件所在文件

<template>
    <div
    id="evaluationDiv"
    ref="evaluationDiv"
    style="width: 97%; height: 400px"
  ></div>
</template>

<script>
/**
 * 引入 echarts 模板
 */
import { option_ZhuPillar } from "./topFotZhu.js";


export default {
  data () {
    return {
      resizeTimer: null,
      option: option_carPillar,
      timerSetInterval: null,
      detailsChuData: null, // 接收后台请求数据结果
      optionZhu: option_ZhuPillar,
    }
  },
  mounted () {
    let _this = this
    _this.initEvaluation()
    window.addEventListener('resize', function () { // 实现 echarts 图表, 随页面宽高变化, 而变化 。
      if (_this.resizeTimer) {
        clearTimeout(_this.resizeTimer)
      }
      if (_this.carsource) {
        _this.resizeTimer = setTimeout(function () {
          _this.carsource.resize()
        }, 100)
      }
    }),
    // this.timerSetInterval = setInterval(() => {
    //   _this.getType()
    // }, 5 * 60 * 1000);
    _this.destroyed()
  },
  // 清除定时器
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timerSetInterval);
  },
  methods: {
// 图表渲染--中小制造企业管理测评图
    initEvaluation() {
      let dataNume = [];
      let dataNum1 = [];
      let dataNum2 = [];
      let needChildData = this.detailsChuData;
      needChildData.forEach((item) => {
        dataNume.push(item.tabName); // 显示名字
        dataNum1.push(item.relVal); // 实际值
        dataNum2.push(item.pipVal); // 标准值
      });
      /**
       * 具体的赋值方式在这里，大家可以根据得到的数据格式来赋值。
       */
      // this.optionZhu.xAxis.data = dataNume;
      // this.optionZhu.series[0].data = dataNum2;
      // this.optionZhu.series[1].data = dataNum1;
      /**
       * 初始化 echarts
       */
      let carsource = this.$echarts.init(this.$refs.evaluationDiv); // 初始化一个echarts
      this.carsource = carsource;
      carsource.setOption(this.optionZhu); // setOption 用this.option中的数据开始作图
    },
    destroyed () {
      window.removeEventListener('resize', this.carsource, 100)
    }
  }
}
</script>

<style scoped>

</style>

6. echarts 图表图片展示

双柱状图-叠加但是数据互不影响.gif

最近公司由于业务需求，需要实现一个双柱状叠加图，但是数据要求互不影响，同时 Y轴 显示的数据固定为 1--100，这个数据是百分比的效果；由于这个项目最近几周没有接触了，而且这个需求在之前的一些项目中自己做过相应的功能，一时又想不起来怎么做了，最终花了半个小时重新去看 API 才将其实现，感觉很是浪费时间，所以就将当前功能整理了一下，给大家做一个分享，节省大家的开发时间。

如果对你有所帮助，大家喜欢可以点个关注；如有问题还望不吝赐教，本人会及时更改。(如要转载，请注明出处)。