echarts 水球圖

//地址https://github.com/ecomfe/echarts-liquidfill
//<script src='echarts.js'></script>
//<script src='echarts-liquidfill.js'></script> //引入liquidFill,echarts

 // 1. 實例化對象
  var myChart = echarts.init(document.querySelector(".yesInternet"));
  // 2.指定配置
  const data = [yesInt];
 var option = {
      // x軸
      xAxis: {
          show: false, // 不顯示
      },
      // y軸
      yAxis: {
          show: false, // 不顯示
      },
      grid: {
          top: '2.5%',
          right: '40',
          bottom: '2.5%',
          left: 0,
      },
      series: [{
          type: 'liquidFill',
          radius: '96%', // 半徑大小
          center: ['50%', '50%'], // 布局位置
          data: data, // 水球波紋值
          color: ['#36A989'],//設置顏色系列
          label: {
              normal: {
                  // color: '#FC7272',
                  color: '#36A989',
                  textStyle: {
                      fontSize: 18
                  },
                  formatter: (params) => { //console.log(params)
                      let newValue = params.value * 100;
                      return newValue.toFixed(2) + '%\n聯網車位數\n' + ToInt
                  }
              }
          },
          outline: { // 輪廓設置
              show: true,
              borderDistance: 2, // 輪廓間距
              itemStyle: {
                  // borderColor: '#294D99', // 輪廓顏色
                  borderColor: '#36A989', // 輪廓顏色
                  borderWidth: 4, // 輪廓大小
                  shadowBlur: 'none', // 輪廓陰影
              }
          },
      }
    ]
  };

  // 3. 把配置給實例對象
  myChart.setOption(option);

  // 4. 讓圖表跟隨屏幕自動的去適應
  window.addEventListener("resize", function () {
    myChart.resize();
  });