vue中使用v-charts代替echarts（附环形图的属性配

最近项目需要用到图标，发现了一个很方便的库v-charts
v-charts 官网地址 https://v-charts.js.org/#/start

安装

npm i v-charts echarts -S

引入

• 全部引入

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

• 按需引入

import Vue from 'vue'
import VeLine from 'v-charts/lib/line.common'
import App from './App.vue'

Vue.component(VeLine.name, VeLine)

new Vue({
  el: '#app',
  render: h => h(App)
})

使用

<template>
       <div class="ring-chart">
         <ve-ring
           :data="ringChart.chartData"
           :colors="ringChart.colors"
           :tooltip-visible="false"
           :settings="ringChart.settings"
           :legend="ringChart.legend"
           width="50px"
           height="50px"
           :extend="ringChart.chartExtend"
         ></ve-ring>
       </div>
</template>

<script>
export default {
  name: "hh",
  data() {
    return {
      //环形图配置
      ringChart: {
        // 环形图颜色
        colors: ["rgb(223, 240, 216)", "rgb(242, 222, 222)"],
      //通过extend属性实现对已配置好的内部属性进行单独的设置,即可以覆盖默认的值
        chartExtend: {
        //环形图的中心点在左25px，上25px的地方
          series: {
            center: [25, 25]
          }
        },
      //配置项
        settings: {
      //如图1
          label: {
            show: false
          },
    //hover的时候是否变大
          hoverAnimation: false,
          // 环图 -- 内外径
          radius: [10, 20]
        },
//如图2
        legend: {
          show: false
        },
       //数据
        chartData: {
          columns: ["是否引入bug", "commits数"],
          rows: [
            {
              是否引入bug: "没有引入bug",
              commits数: 50
            },
            {
              是否引入bug: "可能引入bug",
              commits数: 50
            }
          ]
        }
      }
    };
  },

• 效果：

  
  image.png

调整大小和位置：

• 直接在标签上设置width和height，即为画布的大小
• 调整环形图的中心点位置，使其出现在画布上面
• 调整位置需要在其上面套一层div，控制div的位置即可