v-charts的使用

首先安装

npm i v-charts echarts -S

然后引入需要的图表模块

// main.js
import VeRing from "v-charts/lib/ring.common";
Vue.component(VeRing.name, VeRing);

// html
<ve-ring
     :data="chartData"
     :settings="chartSettings"
     :tooltip-visible="false" // 隐藏工具栏
     :legend-visible="false" // 隐藏标识信息
     :colors="colors"
      width="100px"
      height="100px"
  ></ve-ring>

<script>
  export default {
  data() {
    return {
      colors: ["#29b1f5", "#fc4442", "#7dd85b"], // 颜色的配置
      chartData: {
        columns: ["name"],
        rows: []
      },
      // chart 配置项
      chartSettings: {
        dimension: "", // 这个是图表的维度信息
        metrics: "name", // 这个是图表数据指标信息
        labelLine: {     // 隐藏指引线
          show: false
        },
        radius: [25, 45], // 环的半径
        offsetY: 50,  // y轴上的偏移量
        hoverAnimation: false // 取消滑动、点击事件
      },
   }
  }
}
</script>