Echarts在线免费图表

 
            let chartData=[
        { value: 336, name: "架空线路设备" },
        { value: 285, name: "电缆线路设备" },
        { value: 378, name: "控制及保护装置（系统）" },
        { value: 111, name: "站内换流一次设备" },
        { value: 213, name: "在线监测设备" },
        { value: 993, name: "生产辅助设施" },
        { value: 421, name: "自动化设备" },
        { value: 561, name: "调相机SFC系统" },
        { value: 1252, name: "低压台区" },
        { value: 1520, name: "工器具" },
        { value: 99, name: "换流站阀内冷水系统" },
        { value: 132, name: "换流站阀内冷却系统" },
        { value: 666, name: "电站" },
      ]
 let sum = 0;
      for (let item of chartData) {
        sum += item.value;
      }
option = {
        title: {
          text: "{a|总数}" + "\n{c|" + sum + "}",
          x: "center",
          y: "center",
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                color: "#5e5e5e",
              },
              c: {
                fontSize: 14,
                color: "#5e5e5e",
                padding: [10, 0],
              },
            },
          },
        },
        color: [
          "#85acfb",
          "#cfdffd",
          "#85e2bd",
          "#daf6eb",
          "#8795ae",
          "#dbdfe6",
          "#f8ce52",
          "#fdf0cb",
          "#9488fb",
          "#d5d0fd",
          "#93d6f1",
          "#def2fb",
          "#b088cb",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}  {d}%",
        },
        toolbox: {
          show: true,
        },
        legend: {
          top: "30%", //水平位置，【left\center\right\数字】
          left: '8%',
          align: "left", //字在图例的左边或右边【left/right】
          orient: "vertical", //图例方向【horizontal/vertical】
          icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
          textStyle: {
            color: "#8C8C8C",
          },
          height: 260,  //设置高度，超出翻页
          type: "scroll", //必须设置为scroll,才可以超出翻页
          pageIconColor: "#000000", //激活的分页按钮颜色
          pageIconInactiveColor: "#8c8c8c", //没激活的分页按钮颜色
        },
        series: [
          {
            type: "pie",
            radius: ["20%", "40%"],
            label: {
              normal: {
                show: true,
                formatter: "{c}",
              },
              emphasis: {
                show: true,
              },
            },
            data: chartData,
          },
        ],
      };