vue echarts 饼图半圆样式

<template>
  <div :id="halfCakeData.id" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "hello",
  props:{
halfCakeData:{
      type: Object,
}
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      let placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      };
      let total = 50;
      // 基于准备好的dom，初始化echarts实例
      let that=this;
      let myChart = this.$echarts.init(document.getElementById(that.halfCakeData.id));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "室内温度", //主标题
          subtext: "26℃", //副标题
          textStyle: {
            //主标题样式
            color: "#fff",
            fontWeight: "bold",
            fontSize: 20
          },
          subtextStyle: {
            //副标题样式
            color: "#fff",
            fontSize: 20,
            fontWeight: "bold",
            color: "#0f0"
          },
          left: "center",
          top: "middle"
        },
        tooltip: {
          show: true,
          trigger: "item", //提示框触发类型，item数据项图形触发，主要应用于无类目轴的图表（散点图、饼形图等）
          formatter: function(params, ticket, callback) {
            //第一个参数数据集、第二个参数是异步回调标志、第三个参数是异步回调
            return params.seriesName + ": " + params.value + "℃"; //系列名称：数据值
          }
        },
        series: [
          {
            name: "室内温度",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [50, 70],

            itemStyle: placeHolderStyle,
            data: [
              {
                value: 26,
                itemStyle: {
                   normal: {//颜色渐变
                        color: {
          type: "linear", //线性方式
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          // type:'radial',//径向渐变
          // x:0.5,
          // y:0.5,
          // r:0.5,
          colorStops: [
            {
              offset: 0, //0%处的颜色
              color: "#78cdd1"
            },
            {
              offset: 1, //100%处的颜色
              color: "#07A0F5"
            }
          ],
          global: false //缺省为false
                  }}
                }
              },
              {
                value: total - 26,
                itemStyle: {
                  normal: {
                    color: "transparent"
                  }
                }
              }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style>
</style>