vue使用环图 百分比显示

1.安装

npm i v-charts echarts -S

2.在main.js中引入环图

因为只用到环图，所以只引入VeRing，需要其他的可以用同样方式引入

// main.js
import VeRing from 'v-charts/lib/ring.common'// 环形图

Vue.component(VeRing.name, VeRing)

3.页面中插入环图标签

    <ve-ring
      height="250px"
      width="350px"
      :data="chartData"
      :extend="chartExtend"
      :settings="chartSettings"
    >
    </ve-ring>

我用的是下面这个

 <ve-ring :data="chartData" :settings="chartSettings"></ve-ring>

4.传入数据

export default {
  name: 'Dashboard',
  data() {
    return {
      dd: '222',
      pie: '',
      radar: '',
      a: '',
      charts: '',

      type: 'pie',

      chartData:{
        columns: ['日期', '访问用户'],
        formatter: '{b}: {d}',

        rows: [
          { '日期': '1/1', '访问用户': 1393 },
          { '日期': '1/2', '访问用户': 3530 },
          { '日期': '1/3', '访问用户': 2923 },
          { '日期': '1/4', '访问用户': 1723 },
          { '日期': '1/5', '访问用户': 3792 },
          { '日期': '1/6', '访问用户': 40000 }
        ]
      },
      chartSettings : {
        radius: [60, 100],
        offsetY: 200,
        label: {
          // show: true,
          formatter: '{b}: {d}%',


        }

      },
      // cDataType: 'percent',



    }
  },

5.显示效果

6.参考资料

vue 使用 v-charts 实现环形图
https://blog.csdn.net/luyu13141314/article/details/94992121
vue中使用v-charts
https://juejin.im/post/6844903863917494286
官方文档
https://v-charts.js.org/#/ring
在线示例
https://echarts.apache.org/zh/option.html#series-pie.label.show