vue echarts 圆环饼图

通过控制起始角度实现

<template>
  <div style="height:100%;width:100%;">
    <div id="myCharted" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {};
  },
  // props: {
  //     xvalue:Array,
  //     servalue:Array
  // },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myCharted"));
      myChart.setOption({
        legend: {
          show: false
        },
        series: [
             {
            name: "",
            type: "pie",
            clockWise: false,
            radius: ["40%", "45%"],
            center: ["15%", "25%"],
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                shadowBlur: 0,
                shadowColor: "#183665"
              }
            },
            hoverAnimation: false,
            startAngle: -60,
            data: [
              {
                value: 15,
                name: "",
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#D0D0D0",
                        align: "center",
                        fontSize: 16,
                        fontWeight: "bold",
                        lineHeight: 30
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: 18   // '90%' 百分比代替
                      },
                      c:{
                        fontSize: 16
                      }
                    },
                    formatter: function(params) {
                      return "{b|30} " + "{a|℃}" +"\n{c|空气温度}";
                    },
                    position: "center",
                    show: true
                  }
                },
                itemStyle: {
                  normal: {
                    color: "#17F4A5"
                  }
                }
              },
              {
                value: 10,
                name: "01",
                itemStyle: {
                  normal: {
                    color: "rgba(255,300,305,0.8)",
                    label: { show: false },
                    labelLine: { show: false }
                  }
                }
              }
            ]
          }
        ]
       });
      window.onresize = myChart.resize;
    }
  }
};
</script>
<style lang="less" scoped>
</style>