Echarts在线免费图表

 
            var data = [
  { value: 666, name: '巡查上报' },
  { value: 193, name: '自行处置' },
  { value: 300, name: '微信市民举报' },
  { value: 200, name: '微治理上报' },
  { value: 100, name: '视频抓拍' }
];
var color = ['#146de0', '#27ef5e', '#ffc140', '#d151d8', 'red'];
option = {
  backgroundColor: '#081736',
  color: color,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0.5)',
    color: '#fff',
    formatter: function (params) {
      return (
        params.name +
        '<br/>' +
        params.marker +
        '<span style="color:' +
        params.color +
        '">' +
        params.data['name'] +
        '\n' +
        params.data['value'] +
        '</span>'
      );
    }
  },
  legend: {
    orient: 'vertical',
    icon: "circle",
    left: '24.2%',
    top: '42%',
    itemWidth: 14,
    itemGap: 20,
    textStyle: {
      rich: {
        a: {
          color: '#fff',
          fontSize: 16,
          padding: [0, 10, 0, 0]
        },
        b: {
          color: '#fff',
          fontSize: 16,
          padding: [0, 10, 0, 10]
        }
      }
    },
    formatter: function (name) {
      var target, unit;
      for (var i = 0, l = data.length; i < l; i++) {
        if (data[i].name == name) {
          target = data[i].value;
          unit = data[i].unit;
        }
      }
      return `{a| ${name}}{b|${target}}`;
    }
  },
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['27%', '50%'],
      center: ['75%', '50%'],
      avoidLabelOverlap: true,
      label: {
        normal: {
          show: true,
          position: 'inside',
          formatter: '{d}%',
          textStyle: {
            align: 'center',
            baseline: 'middle',
            fontSize: 16,
            fontWeight: '100',
            color: '#fff'
          }
        }
      },
      labelLine: {
        show: false
      },

      data: data
    }
  ]
};