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文件

图表