Echarts在线免费图表

 
            option = {
   //你的代码
};
const colors = ['#0192df', '#1f9393', '#c9ac29', '#ad5547', '#cdab30', '#a75046', '#2a67d2', '#c9ac29', '#2a67d2'];
var clen = colors.length;
var datas = [];
const dataList = [
  { name: '其他', cnt: 2 },
  { name: '飞行区', cnt: 4 },
  { name: '航站区', cnt: 3 },
  { name: '配套', cnt: 10 },
  { name: '市政', cnt: 5 },
  { name: '信息', cnt: 7 },
  { name: '设备', cnt: 7 },
]
function generateData(totalNum, bigvalue, smallvalue) {
   let dataArr = [];
   for (var i = 0; i < totalNum; i++) {
      if (i % 2 === 0) {
         dataArr.push({
            name: (i + 1).toString(),
            value: bigvalue,
            itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: "rgba(58, 87, 105, 1)" }, 
                { offset: 1, color: "rgba(151, 151, 151, 0)" }
              ]),
               borderWidth: 0,
            }
         });
      } else {
         dataArr.push({
            name: (i + 1).toString(),
            value: smallvalue,
            itemStyle: {
               color: "rgba(0,0,0,0)",
               borderWidth: 0,
            }
         });
      }

   }
   return dataArr;
}

const dolitData = generateData(10, 30, 10);
const dolitData2 = generateData(10, 20, 10);

for (var index = 0; index < dataList.length; index++) {
  var dataItem = dataList[index];
  var name = dataItem["name"];
  var cnt = +dataItem["cnt"];
  if (cnt == undefined || cnt == null || cnt <= 0) {
    continue;
  }
  var coloIdx = index % clen;
  var dataItem = {
    "value": cnt,
    "name": name,
    "itemStyle": {
      "borderWidth": 1,
      "borderColor": "transparent",
      "color": new echarts.graphic.LinearGradient(0, 0, 1, 1, [
        { offset: 0, color: colors[coloIdx] }, 
        { offset: 0.3, color: colors[coloIdx] }, 
        { offset: 1, color: 'transparent' }
      ]),
    }
  };
  datas.push(dataItem);
}
option = {
  backgroundColor: "#1D303F",
  tooltip: {
    position: function (point, params, dom, rect, size) {
      //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
      var x = point[0]; //
      var y = point[1];
      var boxWidth = size.contentSize[0];
      var boxHeight = size.contentSize[1];
      var posX = 0; //x坐标位置
      var posY = 0; //y坐标位置

      if (x < boxWidth) { //左边放不开
        posX = 5;
      } else { //左边放的下
        posX = x - boxWidth;
      }

      if (y < boxHeight) { //上边放不开
        posY = 5;
      } else { //上边放得下
        posY = y - boxHeight;
      }

      return [posX, posY];

    }
  },
  series: [
    {
         name: '不动外圆',
         type: 'pie',
         
         silent: true,
         radius: ['73%', '75%'],
         label: {
            normal: {
               show: false
            },
         },
         labelLine: {
            normal: {
               show: false
            }
         },
         data: dolitData
      },
    {
      name: '工作督办',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: true,
      minAngle: 5,
      zlevel: 4,
      label: {
        align: 'left',
        normal: {
          show: true,
          color: "#fff",
          lineHeight: 20,
          formatter: function (data) {
            return (data.name).replace(/(\S{})/g, '$1\n').replace(/\n$/, '') + ':' + data.value;
          },
          rich: {
            b: {
              //用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
              fontSize: 12,
              color: '#FFFFFF',
              textStyle: {
                padding: [10], // 修改文字和图标距离
              },
            },

            per: {
              //用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
              fontSize: 12,
              color: '#FFFFFF',
              textStyle: {
                padding: [10], // 修改文字和图标距离
              },
            },
          },
        },
      },
      data: datas
    },
    {
         name: '不动内环',
         type: 'pie',
         
         silent: true,
         radius: ['45%', '47%'],
         label: {
            normal: {
               show: false
            },
         },
         labelLine: {
            normal: {
               show: false
            }
         },
         data: dolitData2
      },
  ]
};