Echarts在线免费图表

 
            var colorList = ["rgb(115,59,252)", "rgb(53,207,232)", "rgb(224,37,250)"];
var echartData = [
   {
      value: 48200,
      name: "未上报行程单",
   },
   {
      value: 32800,
      name: "途径购物店",
   },
   {
      value: 19000,
      name: "行程偏移",
   },
];
var seriesData = echartData.map((item, index) => {
   return {
      ...item,
      // value: Math.sqrt(item.value).toFixed(0) * 100,
      actValue: item.value,
      label: {
         show: true,
         position: "outside",
         borderRadius: 5,
         // padding: [0, 5, 3, -3],
         color: colorList[index],
         textStyle: {
            fontSize: 14,
            lineHeight: 20,
         },
         formatter: "{b}\n{c}\n{d}%",
      },
   };
});

option = {
   tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} ({d}%)",
      textStyle: {
         fontSize: 12,
      },
   },
   series: [
      {
         // name: "pie",
         type: "pie",

         hoverAnimation: false,
         color: ["rgb(115,59,252)", "rgb(53,207,232)", "rgb(224,37,250)"],
         // itemStyle: {
         //   //饼图之间颜色
         //   normal: {
         //     borderColor: "#fff",
         //     borderWidth: 4,
         //   },
         // },
         labelLine: {
            length: 10, //视觉引导线第一段的长度
            length2: 30, //视觉引导线第二段的长度
         },
         data: seriesData,
      },
   ],
};