vue使用echarts实现水平柱形图

原创

于 2019-08-27 15:26:28 发布 · 3.3k 阅读

本文详细介绍了如何在Vue项目中利用ECharts库创建水平柱形图。首先，文章列出了项目的文件结构，包括testData.js用于存放数据，dtuDistributionCurve.js作为图表组件，以及包含ECharts集成的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',

标签

#vue使用echarts实现水平柱形图