vue使用echarts實現水平柱形圖

文件結構:

testData.js文件

const dtuEdition = {
  name: '有方有線',
  number: 60,
  proportion: 40,
  edition: {
    '有方有線V1.0.0': 20,
    '有方有線V1.2.0': 15,
    '有方有線V2.0.1': 10,
    '有方有線V3.0.0': 8,
    '有方有線V3.2.0': 5,
    '有方有線V3.4.0': 4,
    '有方有線V4.0.0': 3,
    '有方有線V4.0.2': 2,
    '有方有線V4.0.3': 1
  }
}

export default {
  namespaced: true, // 用於在全局引用此文件裏的方法時標識這一個的文件名
  dtuEdition
}

dtuDistributionCurve.js文件

// DTU連接率bar圖的option
let barOption = {
  grid: {
    // width: '85%', // 設置gird寬度
    left: 40,    // gird距離容器左邊距
    right: 65,
    top: 20,
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    show : false,   // 不顯示橫軸
    type: 'value',
    max: 1000,   // 橫軸最大值
  },
  yAxis: {
    type: 'category',
    data: [],
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    splitLine: {
      show: false
    }
  },
  series: [{
    type: 'bar',
    stack: 'chart',
    z: 3,
    itemStyle: {
      normal: {
        color: '#a7c7e9'
      }
    },
    data: []
  }, {
    type: 'bar',
    stack: 'chart',
    silent: true,
    label: {
      normal: {
        formatter: (params) => {
          // console.log(params)
          return barOption.xAxis.max-params.value
        },
        color: '#666666',
        position: 'right',
        distance: 10,
        show: true
      }
    },
    itemStyle: {
      normal: {
        color: '#f3f3f6'
      }
    },
    barWidth : 10,//柱圖寬度
    data: []
  }]
}

// 設置y軸標籤
export function setYAxisData(edition) {
  let data = []
  for (let key in edition) {
    data.push(key)
  }
  barOption.yAxis.data = data.reverse()
  console.log(barOption.yAxis.data)
}

// 設置x軸最大值
export function setXAxisMax(number) {
  barOption.xAxis.max = number
}

// 設置series的data數據
export function setSeriesData(edition, number) {
  let data0 = []
  let data1 = []
  for(let key in edition) {
    data0.push(edition[key])
    data1.push(number - edition[key])
  }
  barOption.series[0].data = data0.reverse()
  barOption.series[1].data = data1.reverse()
}

export default {
  barOption,
  setYAxisData,
  setXAxisMax,
  setSeriesData
}

vue文件

<template>
    <div ref="dtuEdition" class="project-survey-dtu-edition"></div>
</template>

<script>
    import testData from '../constvalue/testData'
    import dtuDistributionOption from '../curveoption/dtuDistributionCurve'
    export default {
        name: 'ProjectSurvey',
        data() {
            return {
				dtuEditionChart: null
			}
        },

        methods: {
			// 點擊DTU模塊數量分佈展示圖的扇區item
			distributionChartClick(param) {
				console.log(param)
				let dtuEdition = testData.dtuEdition
				this.dtuName = dtuEdition.name
				this.dtuNumber = dtuEdition.number
				this.dtuProportion = dtuEdition.proportion + '%'
				dtuDistributionOption.setYAxisData(dtuEdition.edition)
				dtuDistributionOption.setXAxisMax(dtuEdition.number)
				dtuDistributionOption.setSeriesData(dtuEdition.edition, dtuEdition.number)
				this.dtuEditionChart.setOption(dtuDistributionOption.barOption)
				this.dtuEditionChart.resize()
			},
			// 點擊tab的某頁
			tabClick(tab, event) {
				console.log(this.activeName)
				if(this.activeName === 'first') { // 從後端獲取連接率統計數據

				} else { // 從後端獲取模塊數量分佈展示數據
					let distributionInfo = testData.dtuDistribution.distributionInfo
					this.deadline = testData.dtuDistribution.deadline
					dtuDistributionOption.setSectorValue(distributionInfo)
	              dtuDistributionOption.setSectorName(testData.dtuDistribution.allDistribution)
					this.distributionChart.setOption(dtuDistributionOption.pieOption)
					this.distributionChart.resize()
					this.distributionChart.on('click', this.distributionChartClick)
				}
			}
		},
		mounted() {
			this.dtuEditionChart = this.$echarts.init(this.$refs.dtuEdition)
			this.distributionChart = this.$echarts.init(this.$refs.dtuDistribution)
			let maxV = this.getMaxV()
			let minV = this.getMinV()
			for(let item of this.connectionInfo) {
				this.charts[item.dtuName] = this.$echarts.init(document.getElementById(item.dtuName))
				let normalizationRatio = this.normalization(item.connectionRatio, maxV, minV)
				dtuConnectionOption.setSectorColor(normalizationRatio)
				dtuConnectionOption.setTitleText(item.dtuName)
				dtuConnectionOption.setSectorValue(item.connectionRatio)
				dtuConnectionOption.setSectorName(item.connectionRatio)
				// console.log(dtuConnectionOption.option)
				this.charts[item.dtuName].setOption(dtuConnectionOption.option)
				this.charts[item.dtuName].resize()
			}
			window.onresize = () => {
				this.distributionChart.resize()
				this.dtuEditionChart.resize()
    	}
		},
		updated() {
			this.distributionChart.resize()
			for(let item of this.connectionInfo) {
				this.charts[item.dtuName].resize()
			}
		}		

  }
</script>

<style>
	.project-survey-dtu-edition {
		height: 580px;
	}
</style>

圖表