Echarts在线免费图表

 
            let data = [{
  name: '浇注机', value: 300
}, {
  name: '烘干机', value: 200
}, {
  name: '空压机', value: 400
}, {
  name: '折弯机', value: 500
}];
let list = data.map(v=>{return v.value})
let max = Math.max.apply(null, list);//最大值
let sum = list.reduce(function (prev, curr) {
  return prev + curr;
}, 0);//总和
let percent = (max/sum)*100;
console.log(percent)
option = {
  // backgroundColor: "#013954",
  backgroundColor: '#011C2F',
  tooltip: {
    trigger: "item",
    formatter: "{b}  <br/>用能: {c} kW.h  <br/>占比：({d}%)",
  },
  legend: {
    // show: false,
    orient: "vertical",
    left: 5,
    top: 5,
    itemWidth: 6,
    itemHeight: 6,
    textStyle: {
      color: "#fff",
      fontSize: 11,
    },
  },
  series: [
    {
      name: "内圆",
      type: "pie",
      radius: percent+"%",
      zlevel: 10,
      center: ["50%", "48%"],
      data: data,
      roseType: "radius",
      label: {
        show: false,
        color: "#fff",
      },
      labelLine: {
        show: false,
        lineStyle: {
          color: "#888",
        },
      },
      itemStyle: {
        color: function (params) {
          var colorList = [
            "#ccc016",
            "#1089E7",
            "#7bd42b",
            "#8B78F6",
            "#ffff99",
            "#00ffcc",
            "#00ff99",
            "#33ccff",
            "#388df6",
          ];
          return colorList[params.dataIndex % colorList.length];
        },
      },
      animationType: "scale",
      animationEasing: "elasticOut",
      animationDelay: function (idx) {
        return Math.random() * 200;
      },
    },


    {
      name: '外圆',
      type: 'pie',
      radius: "100%",
      color: '#cdcdcd',
      center: ["50%", "48%"],
      data: data,
      label: {
        formatter: "{d}%",
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ],
}