Echarts在线免费图表

 
            var fontSize = 10;
var colorListLabel = [
  "rgb(234, 249, 237)",
  "rgb(254, 242, 243)",
  "rgb(241, 245, 255)",
  "rgba(226, 225, 255, 1)",
];
var colorList = [
  "rgba(0, 138, 255, 1)",
  "rgba(255, 155, 48, 1)",
  "rgba(0, 180, 76, 1)",
  "rgba(151, 101, 254, 1)",
];
var colorLabelTitle = [
  "rgb(215, 243, 220)",
  "rgb(253, 230,232)",
  "rgb(228, 236,255)",
  "rgba(252, 248, 227, 1)",
];

var echartData = [
  {
    value: 1000,
    name: " 水路",
  },
  {
    value: 3854,
    name: " 铁路",
  },
  {
    value: 3515,
    name: " A2407",
  },
];
//把echartData数据遍历实现不同指线文字背景色
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: [10, -10, 3, -3],
      color: colorList[index],
      textStyle: {
        fontSize: 15,
      },
      formatter:
        "{white|{b}}\n{yellow|成交额：     {c} }\n{three| 占比：       {d}%} ",
      rich: {
        test: {},
        white: {
          color: "#000",
          align: "left",
          fontSize: fontSize * 1.4,
          backgroundColor: colorLabelTitle[index],
          width: 120,
          borderRadius: [4, 4, 0, 0],
          padding: [8, 4],
        },
        yellow: {
          color: "#666666",
          align: "left",
          fontSize: fontSize * 1.4,
          padding: [6, 4],
          backgroundColor: colorListLabel[index],
          width: 120,
          borderRadius: [0, 0, 0, 0],
        },
        three: {
          color: "#666666",
          align: "left",
          fontSize: fontSize * 1.4,
          padding: [6, 4],
          backgroundColor: colorListLabel[index],
          width: 120,
          borderRadius: [0, 0, 4, 4],
        },
      },
    },
  };
});

option = {
  title: {
    text: "0.10%",
    left: "center",
    top: "47%",
    textStyle: {
      color: "#fff",
      fontSize: fontSize * 2.5,
      align: "center",
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} ({d}%)",
    textStyle: {
      fontSize: fontSize * 1.6,
    },
  },
  series: [
    {
      name: "pie",
      type: "pie",
      radius: ["30%", "50%"],
      hoverAnimation: false,
      color: ["#21CC88", "#FF85B8", "#0F63FF", "#034079", "#6f81da", "#00ffb4"],
      itemStyle: {
          //饼图之间颜色
        normal: {
          borderColor: "#fff",
          borderWidth: 2,
        },
      },
   labelLine: {
          length: 30,//视觉引导线第一段的长度
          length2: 10,//视觉引导线第二段的长度
        },
      data: seriesData,
    },
  ],
};