Echarts在线免费图表

 
            var fontSize = 10;
var colorListLabel = [
  "rgb(148, 248, 199)",
  "rgb(204, 218, 245)",
  "rgb(173, 219, 246)",
  "rgb(250, 231, 177)",
];
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(121, 240, 182)",
  "rgb(186, 206, 246)",
  "rgb(141, 204, 241)",
  "rgb(250, 220, 135)",
];

var echartData = [
  {
    value: 154,
    name: " 设备设施",
  },
  {
    value: 56,
    name: " 突发事件",
  },
  {
    value: 89,
    name: " 物业服务",
  },
  {
    value: 76,
    name: " 物业收费",
  },
];
//把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{three|  {d}%} ",
      rich: {
        test: {},
        white: {
          align: "left",
          color: "#666666",

          // fontSize: fontSize * 1.4,

        },
        yellow: {
          color: "#666666",
          align: "left",
          // fontSize: fontSize * 1.4,

        },
        three: {
          color: "#000",
          align: "left",
          padding: [6, 0],
          fontSize: fontSize * 1.6,
        },
      },
    },
  };
});

option = {
  title: {
    show: true,
    text: '20%',
    itemGap: 0, //主副标题之间的距离
    x: 'center', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
    y: 'center',
    subtext: '公共设施',
    textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
      fontSize: 24,
    },
    subtextStyle: {//副标题文本样式{"color": "#aaa"}
      fontSize: 16,
      color: '#17A6FA'
    },
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}<br/>{c} ({d}%)",
    textStyle: {
      fontSize: fontSize * 1.6,
    },
  },
  series: [
    {
      name: "pie",
      type: "pie",
      radius: ["20%", "30%"],
      hoverAnimation: false,
      color: ["#14cf75", "#73a0fa", "#17a6fa", "#fcc529"],
      itemStyle: {
        //饼图之间颜色
        normal: {
          borderColor: "#fff",
          borderWidth: 4,
        },
      },
      labelLine: {
        length: 10,//视觉引导线第一段的长度
        length2: 70,//视觉引导线第二段的长度
        lineStyle: {
          color: "#e9e9e9"  // 改变标示线的颜色
        }
      },
      data: seriesData,
    },
  ],
};