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

所有的图表配置基本上大同小异，下面就列举一下有关柱状图的配置项：

废话不多说，请看代码：

子组件：水平柱状图（也就是图一）

<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="histogram" :style="{ 'width': histogramData.width }">
  <div class="histogramBar" :id="id" :style="{'width':'100%','height': histogramData.histogramBarHeight}"></div>
  </div>
</template>

<script>
let _c = { id: 1 };
let echarts = require("echarts");
export default {
  props: {
    histogramData: {
      type: Object,
    },
  },
  data() {
    return {
      myHisChart: "",
    };
  },
  created() {
    _c.id++;
    this.id = "c_histogram_" + _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.myHisChart != null &&
        this.myHisChart != "" &&
        this.myHisChart != undefined
      ) {
        this.myHisChart.dispose(); //销毁
      }
      this.myHisChart = echarts.init(chartDom);
      // 监听页面变化图表自适应
      this.myHisChart.resize()
      var option = {
        tooltip:{
          trigger: "axis",
          axisPointer: {
            type: "shadow",//鼠标悬停显示样式
            shadowStyle:{
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              shadowBlur: 2
            }
          },
        },
        legend:this.histogramData.legend,//标记属性
        grid: this.histogramData.grid,//绘图区调整
        xAxis:this.histogramData.xAxis,//x轴显示数值，以及范围
        yAxis: {//Y轴显示类型
          type: this.histogramData.yAxis.type,
          data: this.histogramData.yAxis.dataList,
          axisLabel: {//坐标轴文字显示样式
            interval: 0,
            lineHeight:this.histogramData.yAxis.axisLabel.lineHeight,
            rotate:this.histogramData.yAxis.axisLabel.rotate,
            formatter:function(value){  
                var str = ""; 
                var num = _this.histogramData.yAxis.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.histogramData.series
      };
      this.myHisChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.histogram {
  width: 100%;
  .companyList-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 22px;
    line-height: 22px;
    .slide-line {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #1d96ff;
      border-radius: 2px;
      margin: 0;
      margin-right: 16px;
    }
    .companyList-header--one {
      font-weight: 600;
      font-size: 14px;
      color: #333;
    }
  }
}
</style>

父组件

<template>
  <div class="indicators">
    <!-- 垂直柱状图 -->
    <div class="histogram-box">
      <HistoGramClum class="histogram" :histogramData="histogramData" />
    </div>
    <!-- 水平柱状图 -->
    <div class="histogram-box-level">
      <HistoGramLevel
        class="histogram"
        :histogramLevelData="histogramLevelData"
      />
    </div>
  </div>
</template>

<script>
import HistoGramClum from "@/components/histogramclum.vue";
import HistoGramLevel from "@/components/histogramlevel.vue";
export default {
  name: "indicators",
  components: {
    HistoGramClum,
    HistoGramLevel,
  },
  data() {
    return {
      // 垂直柱状图
      histogramData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "34.282vw",
        legend: {
          //标记属性
          data: ["未批复", "批复"],
          orient: "vertical", //标记排列显示
          top: -1, //标记位置
          right: 1 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 8,
          itemHeight: 8,
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          //X轴显示数值
          type: "value",
          boundaryGap: [0, 0.01], //数值精度
          splitNumber: 1,
          min: 0,
          max: 20,
          interval: 5,
          axisLabel: {},
        },
        yAxis: {
          //Y轴显示分类
          type: "category",
          dataList: [
            "建筑工程施工许可证",
            "建设工程规划许可证",
            "政府投资项目初步设计批复",
            "建设工程设计方案确认书",
            "建设用地规划许可证",
            "企业投资项目备案表/政府投资项目可行性研究报告批复",
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 14, //每行显示字数
            rotate: 0, //文字旋转角度，0不旋转
          },
        },
        series: [
          //柱状图数据
          {
            name: "未批复",
            type: "bar",
            data: [1, 0, 2, 7, 16, 10],
            itemStyle: {
              color: "#FF9314", //柱状图颜色
            },
            label: {
              show: true,
              position: "right", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "批复",
            type: "bar",
            data: [2, 2, 9, 12, 15, 14],
            itemStyle: {
              color: "#1492FF",
            },
            label: {
              show: true,
              position: "right", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },
      // 水平柱状图
      histogramLevelData: {
        width: 100 + "%", //柱状图盒子宽度
        histogramBarHeight: "37.005vw",
        legend: {
          //标记属性
          data: ["月度上报完成率", "问题项目督查反馈率", "年度目标完成率"],
          orient: "horizontal", //标记排列显示
          top: 15, //标记位置
          left: 3 + "%", //标记位置
          icon: "roundRect",
          itemWidth: 8,
          itemHeight: 8,
        },
        grid: {
          //绘图区调整
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: {
          //Y轴显示数值
          type: "value",
          boundaryGap: [0, 0.01], //数值精度
          splitNumber: 1,
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {},
        },
        xAxis: {
          //X轴显示分类
          type: "category",
          dataList: [
            "北山街道",
            "西溪街道",
            "翠苑街道",
            "古荡街道",
            "留下街道",
            "转塘街道",
            "蒋村街道",
            "灵隐街道",
            "文新街道",
            "三墩镇",
            "双浦镇",
            "艺创小镇",
            "云栖小镇",
            "紫荆港科技城",
            "西溪谷"
          ],
          axisLabel: {
            //坐标轴文字显示样式
            lineHeight: 18, //字体行高
            fontNum: 18, //每行显示字数
            rotate: 45, //文字旋转角度，0不旋转
          },
        },
        series: [
          //柱状图数据
          {
            name: "月度上报完成率",
            type: "bar",
            data: [23, 43, 70, 22, 41, 83, 42, 81, 8, 30, 29, 4,39,62,96],
            itemStyle: {
              color: "#1492FF", //柱状图颜色
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "问题项目督查反馈率",
            type: "bar",
            data: [58, 23, 72, 18, 83, 79, 81, 89, 56, 100, 9, 37,43,40.5,73],
            itemStyle: {
              color: "#09C592",
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
          {
            name: "年度目标完成率",
            type: "bar",
            data: [100, 82, 42, 56, 82, 77, 76, 78, 14, 94, 10, 9,62,58,39],
            itemStyle: {
              color: "#FF9314",
            },
            label: {
              show: false,
              position: "top", //数值在右边显示
            },
            labelLine: { show: false }, //是否显示线条
          },
        ],
      },
    };
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.indicators {
  width: 100%;
  margin-top: 16px;
  .pie-box {
    width: 100%;
    height: 300px;
    padding-top: 15px;
    background-color: #fff;
  }
  .histogram-box {
    width: 100%;
    height: 300px;
    margin-top: 16px;
    background-color: #fff;
    padding-top: 15px;
    padding-bottom: 20px;
  }
  .histogram-box-level {
    width: 100%;
    margin-top: 16px;
    background-color: #fff;
    height: 300px;
    padding-top: 15px;
    padding-bottom: 20px;
  }
}
</style>

代码展示完毕，均可复制粘贴直接使用，相关调整，请手动调节