Echarts在线免费图表

 
            let seriesData = [
  [
    { series_name: '收入', name: '投资', value: '33' },
    { series_name: '收入', name: '投资1', value: '23', isDecal: true },
    { series_name: '收入', name: '投资2', value: '83' },
    { series_name: '收入', name: '投资3', value: '63' }
  ],
  [
    { series_name: '支出', name: '投资', value: '53' },
    { series_name: '支出', name: '投资1', value: '53', isDecal: true },
    { series_name: '支出', name: '投资2', value: '53' },
    { series_name: '支出', name: '投资3', value: '53' }
  ],
  [
    { series_name: '执行率', name: '投资', value: '53' },
    { series_name: '执行率', name: '投资1', value: '53' },
    { series_name: '执行率', name: '投资2', value: '53', isDecal: true },
    { series_name: '执行率', name: '投资3', value: '53' }
  ]
],
  colorList = ['#A86B30', '#B39293', '#5C7BD9', '#FF7070', '#7ED3F4'],
  series = [],
  seriesPosition = [
    ['20%', 'center'],
    ['50%', 'center'],
    ['80%', 'center']
  ];
seriesData.forEach((item, index) => {
  var data = [];
  item.forEach((i, index) => {
    if (i.isDecal) {
      data.push(
        Object.assign(i, {

          itemStyle: {
            color: colorList[index],
            decal: {
              show: true,
              color: 'rgba(0, 0, 0, 0.2)',
              dashArrayX: [
                [1, 0],
                [1, 8]
              ],
              dashArrayY: [1, 0, 8, 0],
              symbol: 'rect',
              symbolSize: 1,
              rotation: 0.7853981633974483,
              dirty: false
            }
          }
        })
      );
    } else {
      data.push(
        Object.assign(i, {
          itemStyle: {
            color: colorList[index],
            decal: {
              symbol: 'none'
            }
          }
        })
      );
    }
  });

  series.push({
    name: item[0].series_name,
    type: 'pie',
    radius: ['20%', '30%'],
    center: seriesPosition[index],
    labelLine: {
      show: false
    },
    data: data,
    label: {
      show: true,
      position: 'center'
    }
  });
});

var option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: series
};