big_data_ott/src/views/Country/components/pieCharts.vue

<template>
  <div class="countryLineChart" ref="countryLineChart"></div>
</template>

<script>
// import * as echarts from "echarts";
// import config from "@/config/index";
import * as echarts from "echarts/core";
import { GaugeChart } from "echarts/charts";
import { TooltipComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([CanvasRenderer, TooltipComponent, GaugeChart]);

export default {
  name: "countryLineChart",
  props: ["list"],
  data: function() {
    return {
      leftList: [],
      rightList: [],
      chart: undefined,
    };
  },
  filters: {},
  watch: {
    list() {
      this.createChart();
    },
  },
  methods: {
    createChart() {
      if (!this.$refs.countryLineChart) return;
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.countryLineChart);
        this.chart.resize({
          height: (this.$refs.countryLineChart.offsetWidth * 6) / 16,
        });
      }
      var option = {
        series: this.list.map((v, i) => {
          let y = i < 5 ? 25 : 75;
          return {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            center: [((10 + i * 20) % 100) + "%", y + "%"],
            pointer: {
              show: false,
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 0,
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 5,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            radius: "40%",
            data: [
              {
                value: (v.score * 100).toFixed(2) - 0,
                name: v.name,
                title: {
                  offsetCenter: ["0%", "-15%"],
                  width: 100,
                   overflow: 'truncate'
                },
                detail: {
                  valueAnimation: true,
                  offsetCenter: ["0%", "15%"],
                },
              },
            ],
            title: {
              fontSize: 14,
            },
            detail: {
              width: 20,
              height: 14,
              fontSize: 14,
              color: "inherit",
              borderWidth: 0,
              formatter: "{value}%",
            },
          };
        }),
      };

      option && this.chart.setOption(option);
    },
  },
  mounted() {
    this.createChart();
  },
  beforeUnmount: function() {
    this.chart.dispose();
  },
  components: {},
};
</script>
<style></style>