Echarts在线免费图表

 
            let data = [
    { value: 150, name: "光伏" },
    { value: 100, name: "水电" },
    { value: 200, name: "风电" },
    { value: 300, name: "火电" },
    { value: 120, name: "储能" },
    { value: 130, name: "自备" }
  ];
option = {
    // grid: {
    //   left: "10%",
    //   right: "4%",
    //   top: "20%",
    //   bottom: "16%",
    // },
    backgroundColor:'black',
    tooltip: {
      trigger: "item",
    },
    legend: {
      show: true,
      orient:'vertical',
      top: "center",
      right: "4%",
      icon: "circle",
      itemWidth:12,
      itemHeight:12,
      itemGap: 13,
      textStyle: {
        color: "#fff",
      },
       formatter(name) {
            // console.log(option);
            let than = option.series[0].data; //获取series中的data
            let total = 0;
            let tarValue;
            for (let i = 0, l = than.length; i < l; i++) {
              total += than[i].value;
              if (than[i].name == name) {
                tarValue = than[i].value;
              }
            }
            let p = (tarValue / total) * 100;
            return " " + name + "    " + "    " + p + "%";
          },
    },
    color: ["#fdff68", "#4dfffd", "#6cffa7", "#52b0ff", "#ee945f", "#f36c3e"],
    series: [
      {
        name: "",
        type: "pie",
        radius: ["30%", "50%"],
        center:["35%","50%"],
        labelLine:{
          length:40,
          length2:80,
          lineStyle:{
            color:'#fff'
          }
        },
        label:{
          formatter: [
        '{a|{c}}',
        '{s|{b}}'
    ].join('\n'),
          rich: {
            a:{
              color:'#57baff',
              fontSize:18,
              fontWeight:'bold'
            },
            s:{
              color:'#fff',
              fontSize:14,
            }
          }
        },
        data: data
      },
      {
        type: "pie",
        radius: ["58%", "56%"],
        center:["35%","50%"],
        color:'rgba(253,185,78,.6)',
        roseType: 'radius',
        startAngle:30,//起始角度
        hoverAnimation: false,//禁止hover
        tooltip:{
          show:false
        },
        labelLine:{
          show:false
        },
        data: [
          30,30,30,60,30,30,30,60,30,30,30,60,30,30,30,60
        ]
      }
    ],
  };