vue + Echart 實現可視化（一）圓環圖

安裝

npm install echarts --save

引入

import echart from "../mixins/echarts.js";

mixins 文件夾下

import Vue from "vue";
import ECharts from "vue-echarts";
import "echarts/lib/chart/pie";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/map";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/legend";
import "echarts/lib/component/title.js";
Vue.component("v-chart", ECharts);
export default {
  data() {
    return {
      count: 0
    };
  },
  components: {
    chart: ECharts
  },
  methods: {}
};

實列

<template>
  <div class="card-chart-circle" v-if="visible">
    <chart :options="option" ref="leaderEduBar" autoresize />
  </div>
</template>

mixins: [echart],

配置詳情

      option: {
        grid: { containLabel: true },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c}"
        },
        color: ["#1FC48D", "#F5A60A", "#6DC8EC", "#3F8FFF"],
        backgroundColor: "#ffffff",
        legend: {
          orient: "vertical",
          icon: "circle",
          align: "left",
          x: "right",
          y: "center",
          data: ["社保", "公積金", "個人所得稅", "實發工資"],
          itemGap: 20,
          itemWidth: 8
        },
        series: [
          {
            name: "繳納金額",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            center: ["40%", "50%"],

            label: {
              show: true,
              textStyle: { color: "#3c4858", fontSize: "18" },
              formatter: function(val) {
                return "{a|" + val.name + "}";
              },
              rich: {
                a: { color: "rgba(0,0,0,0.65)", fontSize: 12 }
              }
            },
            labelLine: {
              show: true,
              lineStyle: { color: "#6DC8EC" }
            },
            data: []
          }
        ]
      }