vue建立百分比的柱形图

要建立百分比的柱形图，你可以使用 Vue 和一个图表库，如 ECharts。以下是一个简单的示例：

1. 安装 ECharts

npm install echarts --save

2. 在 Vue 组件中引入 ECharts

import echarts from 'echarts'

3. 在 Vue 组件中创建一个 div 元素作为容器

<template>
  <div id="chart" style="width: 100%; height: 400px;"></div>
</template>

4. 在 Vue 组件中使用 ECharts 创建图表

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart'))

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '百分比柱形图'
      },
      tooltip: {},
      legend: {
        data: ['百分比']
      },
      xAxis: {
        data: ['项目1', '项目2', '项目3', '项目4', '项目5']
      },
      yAxis: {},
      series: [{
        name: '百分比',
        type: 'bar',
        data: [20, 30, 40, 50, 60],
        label: {
          normal: {
            show: true,
            position: 'inside'
          }
        }
      }]
    }

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option)
  }
}

在这个示例中，我们创建了一个简单的百分比柱形图，其中 x 轴表示项目名称，y 轴表示百分比值。数据使用一个数组来传递，每个项目对应一个百分比值。 `label` 选项可用于在柱形内部显示百分比。