本文例項為大家分享了+echart實現雙柱狀圖的具體程式碼，供大家參考，具體內容如下

效果圖：

一、安裝

版本號建議安裝"echarts": "^4.8.0”，其它版本init會報錯

1、 首先需要安裝echarts依賴www.cppcns.com包

npm install --save [email protected]

2、 或者使用國內的淘寶映象：

npm install -g cnpm --registry=https://registry.npm.taobao.org

<template>
  <div class="echarts_con">
    <div
      class="echarts_main"
      ref="dialog_root"
      title="節點指標"
      @close="hideData()"
    >
      <!--負載情況-->
      <div
        ref="bar_dv"
        :style="{
          width: '100%',minHeight: '300px',}"
      ></div>
    </div>
  </div>
</template>
 
<script>
import echarts from 'echarts'
// import myIcon from './image/hot_icon.png' //自定義圖示
// import averageIcon from './image/hot_icon.png'
export default {
  name: "Echarts",data () {
    return {
      maxStr: 400,yInterval: 80,myData: [122,45,67,78,46],averageData: [32,34,6,73,84,40]
    }
  },//外部傳入資料的話要監聽資料start
  // props: {
  //   myData: {
  //     type: Array,//     default: []
  //   },//   averageData: {
  //     type: Array,//     default: []
  //   }
  // },// computed: {
  //   address () {
  //     const { myData,averageData } = this
  //     return {
  //       myData,//       averageData
  //     }
  //   }
  // },// watch: {
  //   address: {
  //     handler: function (val) {
  //       this.compare(val.myData,val.averageData)
  //       let newArr = val.myData.concat(val.averageData)
  //       let maxNum = Math.max(...newArr)
  //       this.maxStr = maxNum
  //       if (maxNum >www.cppcns.com
 
;= 500) {
  //         this.yInterval = 200
  //       } else {
  //         this.yInterval = 50
  //       }
  //       this.drawLine(val.myData,val.averageData)
  //     },//     deep: true

  //   }
  // },// mounted () {
  // this.$nextTick(function () {
  //   this.drawLine();
  // });
  // },//外部傳入資料的話要監聽資料end

  mounted () {
    this.drawLine(this.myData,this.averageData)
  },methods: {
    //判斷一一對應資料低於平均就提示
    compare (arr1,arr2) {
      if (arr1[0] < arr2[0]) {
        this.isCompare = true
      } else if (arr1[1] < arr2[1]) {
        this.isCompare = true
      } else if (arr1[2] < arr2[2]) {
        this.isCompare = true
      } else if (arr1[3] < arr2[3]) {
        this.isCompare = true
      } else {
        this.isCompare = false
      }
    },clickClose () {
      this.isCompare = false
    },/*負載情況圖示*/
    drawLine (a,b) {
      var myData = a;
      var averageData = b;
      let bar_dv = this.$refs.bar_dv;
      let myChart = echarts.init(bar_dv);
      var autoHeight = parseInt(this.maxStr / 100) * 10 + 100;
      myChart.getDom().style.height = autoHeight + "px";
      myChart.resize(); //自適應高度

      // 繪製圖表
      myChart.setOption({
        title: { text: '報表展示' },grid: {
          // left: 40,containLable: true
        },tooltip: {},xAxis: {
          data: ["看過我的","溝通過的","收到簡歷","曝光人數"],axisLine: {
            lineStyle: {
              type: 'solid',color: '#eeeeee',//x左邊線的顏色
              fontSize: 13,width: '0.5' //座標線的寬度
            }
          },axisLabel: { //x軸字型
            textStyle: {
              color: '#333333',fontSize: 13
            }
          },},yAxis: {
          type: 'value',min: 0,max: this.maxStr,interval: this.yInterval,color: '#fff',//左邊線的顏色
              width: '0.5' //座標線的寬度
            }
          },axisLabel: {
            textStyle: {
              color: '#333333',splitLine: {
            show: true,lineStyle: {
              color: ['#eeeeee'],width: 1,type: 'solid'
            }
          }

        },legend: {
          itemWidth: 11,itemHeight: 12,symbolKeepAspect: true,http://www.cppcns.com
 
        textStyle: {
            fontSize: 11,lineHeight: 0,backgroundColor: "rgba(11,164,19,1)"
          },// icon: `image://${averageIcon}`,data: [
            {
              name: '我的',// icon: `image://${myIcon}`//自定義小圖示
            },{
              name: '行業平均',// icon: `image://${averageIcon}`
            }
          ],align: 'left',right: 40,top: '0',textStyle: {
            fontSize: 12,textAlign: 'center',color: '#333333',magrinRight: 3
          },series: [{
          name: '我的',type: 'bar',data: myData,barWidth: 16,//柱子寬度
          barGap: '50%',//間距
          label: {
            show: true,position: 'top',textStyle: {
              color: '#4695F3'
            },formatter: function (params) {
              return params.value
            }
          },itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0,1,[{
                offset: 0,color: '#A5CCF6'
              },{
                offset: 1,color: '#4695F3'
              }]),barBorderRadius: [4,4,0],}
          }
        },{
          name: '行業平均',data: averageData,barGap: '50%',label: {
            show: true,textStyle: {
              color: '#FE8401'
            },color: '#FFB235'
              },color: '#FE8401'
              }]),emphasis: {
              barBorderRadius: 30
            },}
        }
        ]
      },true);
    },hideData () {
      this.$emit("hideDialog")
    },confirm () {
      this.hideData();
    },}
}
</script>
 
<style scoped>
.echarts_con {
  width: 100%;
  margin: 0 auto;
  margin-top: 8px;
  border-radius: 20px;
  background: #fff;
  padding-bottom: 35px;
}
.echarts_main {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
  margin-bottom: -32px;
  margin-right: 20px;
  margin-left: 20px;
}
.bottom {
  width: 90%;
  margin: 0 auto;
  background: #fef8e1;
  border-radius: 6px;
  height: 100%;
  margin-top: 16px;
}
.bottom_con {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 34px;
  line-height: 34px;
}
.bottom_text {
  height: 34px;
  line-height: 34px;
  font-size: 13px;
  font-family: PingFang,PingFang-SC;
  font-weight: SC;
  text-align: left;
  color: #fa5d1d;
}
.right_close {
  width: 13px;
  height: 13px;
}
</style>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。