Echarts在线免费图表

 
            let data = [
   {name: '淄川区', weight: 647},
   {name: '张店区', weight: 940},
   {name: '博山区', weight: 2509},
   {name: '临淄区', weight: 989},
   {name: '周村区', weight: 994},
   {name: '恒台县', weight: 622},
   {name: '高青区', weight: 340},
   {name: '沂源县', weight: 487},
   {name: '高新区', weight: 18},
   {name: '文昌湖区', weight: 2},
   {name: '经开区', weight: 6},
   {name: '其他', weight: 2446},
].map((item) => {
   return {
      name: item.name,
      value: Math.floor(item.weight * 1000) / 1000,
   };
});
option = {
   animation: true,
   grid: {
      top: "15%",
      bottom: "25%",
      right: "15%",
   },
   legend: {
      icon: "circle",
      orient: "vertical",
      right: 10,
      top: 120,
      bottom: 20,
   },
   tooltip: {
      show: true,
      backgroundColor:'#fff',
      borderColor:'#ddd',
      borderWidth:1,
      formatter: p => {
      let txtCon =
         "<div style='text-align:left'>" + 
         // `<div style="background:${p.color};width:15px;height:15px;borderRadius:50%"></div>` +
         `<span style='color:${p.color}'>` +
         p.name +
         `</span><br /><span style=color:${p.color}> `+
         p.percent +
         "%</span></div>";
      return txtCon;
      },
      textStyle: {
      rich: {
            a: {
               fontSize: 28,
               background: '#e4ff00',
               with:'10'
            },
            b: {
               fontSize: 20,
               color: '#e4ff00',
               padding: [0, 0, 14, 0]
            },
            c: {
               fontSize: 20,
               color: '#fff',
               padding: [5, 0]
            }
      }
   }
   },
   series: {
      type: "pie",
      radius: ["35%", "70%"],
      data: data,
      color: [
        '#3C97F2',
        '#44CC86',
        '#9BE2E8',
        '#6DC8EC',
        '#6E8CDE',
        '#EB5A49',
        '#FB9E02',
        '#F7DE2C',
        '#FF7081',
        "#F7DE2C",
        "#3C97F2",
        "#EB5A49",
        "#44CC86",
        "#9BE2E8",
        "#FB9E02",
        "#6DC8EC",
        "#6E8CDE",
        "#FF7081",
      ],
      labelLine: {
      show: true,
      },
      label: {
      show: true,
      // position:'inner',
      formatter: "{d}%",
      },
   },
};