option = {
  tooltip: {//提示框元件，也就是我們平時經常看見的滑鼠移入後會有一個框框，顯示你當前移入的引數名稱和資料
    trigger: 'item'//設定觸發型別 'item'資料項觸發主要是散點圖，餅圖/ 'axis'座標軸觸發主要就是柱狀圖，折線圖 /'none'不觸發
  },
  legend: {//圖例元件，我理解的就是旁邊那個文字
    orient: 'vertical',//佈局朝向這個是豎著排 'horizontal'就是橫著排
    bottom: '0',//距離容器的距離
    left: 'right',//整個圖例的位置
    align: 'left',//這個可以設定圖例標記相對於文字的位置
    formatter: function (name) {//這個函式就是為了滿足圖例上也可以看到資料是多少寫出來的
      // 獲取legend顯示內容
      let data = option.series[0].data;
      let total = 0;
      let tarValue = 0;
      for (let i = 0, l = data.length; i < l; i++) {
        total += data[i].value;
        if (data[i].name == name) {
          if (data[i].name.length > 4) {
            name = name.slice(0, 4) + '...';
          }
          tarValue = data[i].value;
        }
      }
      let p = ((tarValue / total) * 100).toFixed(0);
      return p + '%' + '  ' + name;
    },
    data: ['Search Engine', 'Direct', 'Email', 'Union Ads', 'Video Ads']
  },

  grid: {
    top: '8%',
    left: '-30%',
    right: '10%',
    bottom: '10%'
  },
  series: [//相當於圖案本體了，也就是餅圖這個裡面設定的就是這個餅的樣子
    {
      name: 'Access From',
      type: 'pie',
      center: ['25%', '50%'],//可以設定圖案的在容器的位置
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center',
        fontSize: 12
      },
      emphasis: {
        label: {//這個是我這個圓環中心文字的樣式

          show: true,
          fontSize: '12',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ]
    }
  ]
};

此條用於記錄，自己對部分使用echarts時的部分總結