real3d-portalsite/src/components/echartsTemplate/ratio.vue

<template>
  <div id="ratio_echart" ref="echart"></div>
</template>

<script>
let option = {
  title: [
    {
      text: "rate",
      x: "center",
      y: "35%",
      textStyle: {
        fontSize: 16,
        color: "#fff",
        fontWeight: "bold",
      },
    },
    {
      text: "关联率",
      x: "center",
      y: "55%",
      borderColor: "#fff",
      textStyle: {
        fontWeight: "normal",
        fontSize: 12,
        color: "#fff",
      },
    },
  ],
  polar: {
    center: ["50%", "55%"],
    radius: ["65%", "95%"],
  },
  angleAxis: {
    max: 100,
    startAngle: 180,
    show: false,
  },
  radiusAxis: {
    type: "category",
    show: true,
    axisLabel: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      data: [80],
      name: "",
      type: "bar",
      roundCap: true,
      showBackground: true,
      // backgroundStyle: {
      //   color: 'rgba(19, 84, 146, .4)',
      // },
      coordinateSystem: "polar",
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: "#005DCF",
            },
            {
              offset: 1,
              color: "#00CCFF",
            },
          ]),
        },
      },
    },
  ],
};
export default {
  name: "ratio_echart",
  components: {},
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    setOptions(cartData) {
      if (!this.myChart) {
        // var dom = document.getElementById("ratio_echart");
        this.myChart = echarts.init(this.$refs.echart);
      }
      option.title[0].text = cartData.ratio + "%";
      option.title[1].text = cartData.name;
      option.series.data = [cartData.ratio];
      this.myChart.resize();
      this.myChart.setOption(option);
    },
  },
  mounted() {
    // this.setOptions();
  },
};
</script>
<style lang="scss" scoped>
.ratio_echart {
  width: 100%;
  height: 100%;
}
</style>