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

實現效果：

程式碼：

<template>
  <div class="OverYearsPompany">
    <div id="OverYearsPompanyChart" style="flex: 1; height: 368px; margin-top: -42px"></div>
  </div>
</template>
<script>
import { getProposedInvestments } from '@/api/government';
const colors = [
  ['rgba(240,7,100,1)','rgba(0,215,229,1)'],['rgba(240,];
export default {
  data() {
    return {
      investmentsWayData: [],investmentsWayDataCount: [],investmentsWayDataCounts: [],};
  },mounted() {
    this.getProposedInvestments();
  },methods: {
    initMap() {
      var myChart = this.$echarts.init(document.getElementById('OverYearsPompanyChart'));
      const option = {
        tooltip: {
          show: true,trigger: 'axis',axisPointer: {
            type: 'shadow',},xAxis: {
          type: 'value',axisLabel: {
            show: true,color: '#02CFFCFF',fontFamily: 'TencentSans',axisLine: {
            show: truewww.cppcns.com
 
,lineStyle: {
              color: '#02CFFCFF',splitLine: {
            show: true,lineStyle: {
              color: 'rgba(71,126,171,yAxis: [
          YrbjQ{
            type: 'category',inverse: true,//倒敘
            axisLabel: {
              color: '#02CFFCFF',axisTick: {
              show: false,axisLine: {
              show: true,lineStyle: {
                color: '#02CFFCFF',splitLine: {
              show: true,lineStyle: {
                type: 'dotted',color: 'rgba(71,data: this.investmentsWayData,],series: [
          {
            type: 'bar',http://www.cppcns.com
 
    barWidth: 15,label: {
              position: ['98%',-20],show: true,color: '#fff',data: this.investmentsWayDataCount,itemStyle: {
              color(params) {
                const { dataIndex } = params;
                let color = {
                  type: 'linear',x: 1,y: 0,x2: 0,y2: 0,colorStops: [
                    {
                      offset: 0,color: colors[dataIndex] ? colors[dataIndex][0] : 'red',{
                      offset: 1,color: colors[dataIndex] ? colors[dataIndex][1] : 'red',};
                return color;
              },};
      myChart.setOption(option);
    },getProposedInvestments() {
      getProposedInvestments().then((res) => {
        const { status,data } = res;
        const { proposedInvestmentsWayDis } = ON.parse(data);
        if (status === 200) {
          // this.investmentsWayData=[{0: "合資",1: "合作",2: "獨資",3: "其他"}]
          this.investmentsWayData = proYrbjQ
 
posedInvestmentsWayDis.map((item) => {
            return item.wayDis;
          });
          // this.investmentsWayDataCount=[{0: "496",1: "372",2: "248",3: "124"}]
          this.investmentsWayDataCount = proposedInvestmentsWayDis.map((item) => {
            return item.count;
          });
          // this.investmentsWayDataCounts=[{itemStyle:
    // color:{
    // 0: "rgba(240,1)"
    // 1: "rgba(0,1)"}
    // value: "496"}]
          this.investmentsWayDataCounts = proposedInvestmentsWayDis.map((item,index) => {
            return {
              value: item.count,itemStyle: {
                color: colors[index],};
          });
          this.initMap();
        }
      });
    },};
</script>

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