Echarts在线免费图表

 
            const colorList = ['#66DE69', '#CBD26D', '#0AE3F4', '#1483FF', '#a814ff', '#41CBAB', '#7BDD43', '#FFC653', '#FF6519', '#EE3939', '#FFAFDA', '#00FFFF'];
let seriesdata1 = [
    {
        name: '玉米',
        value: 3200,
        percent: 5.01,
        itemStyle: {
            normal: {
                color: colorList[0],
            },
        },
    },
    {
        name: '土豆',
        value: 1400,
        percent: 5.12,
        itemStyle: {
            normal: {
                color: colorList[1],
            },
        },
    },
    {
        name: '大豆',
        value: 3400,
        percent: 1.87,
        itemStyle: {
            normal: {
                color: colorList[2],
            },
        },
    },
    {
        name: '番茄',
        value: 3400,
        percent: 1.87,
        itemStyle: {
            normal: {
                color: colorList[3],
            },
        },
    },
    {
        name: '茄子',
        value: 3000,
        percent: 0.87,
        itemStyle: {
            normal: {
                color: colorList[4],
            },
        },
    }];
let objData = array2obj(seriesdata1, 'name');



option = {
        backgroundColor: '#000',
        grid: {
          top: '10%',
          left: '70%',
          right: '10%',
          bottom: '40%',
          borderWidth: 1,
          borderColor: '#f0f0f0',
        },
        title: [{
          text: '总种植面积',
          top: '34%',
          left: '34%',
          padding: [-15, 0, 0, -15],
          textStyle: {
            color: '#fff',
            fontSize: 12,
            fontWeight: 'bold',
          },
        }, {
          text: '11000',
          top: '33%',
          left: '37%',
          padding: [15, 0, 0, -20],
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: '400',
          },
        }],
        legend: {
          show: true,
          orient: 'horizontal',
          bottom: '2%',
          left: '10%',
          itemGap: 15,
          itemWidth: 10,
          itemHeight: 10,
          data: seriesdata1,
          formatter: function (name) {
            return '{a|' + name + '}{c|' + objData[name].value.toFixed(0) + 'm²}';
          },
          textStyle: {
            rich: {
              a: {
                align: 'left',
                fontSize: 12,
                color: 'rgba(255,255,255,1)',
                width: 40,
                padding: [0, 0, 0, 10],
              },
              c: {
                align: 'right',
                fontSize: 12,
                color: 'rgba(255,255,255,1)',
                width: 30,
                padding: [0, 0, 0, 20],
              },
            },
          },
        },
        series: {
          type: 'pie',
          center: ['38%', '35%'],
          radius: ['25%', '40%'],
          clockwise: true,
          //startAngle: 50,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
            },
          },
          label: {
            show: true,
            position: 'outside',
            formatter: function (data) {
              //console.log('data',data)
              return (
                '{name|' + data.name + ':' + '\n}' + ' \n{value|' + data.percent.toFixed(0) + '%}'
              );
            },
            rich: {
              name: {
                fontSize: 10,
                color: '#ffffff',
              },
              value: {
                fontSize: 10,
                color: '#ffffff',
              },
            },
          },
          labelLine: {
            show: false,
            normal: {
              length: 5,
              length2: 20,
              align: 'right',
              lineStyle: {
                width: 1,
              },
            },
          },
          data: seriesdata1,
          seriesIndex: 0,
        },
      };

function array2obj(array, key) {
    var resObj = {};
    for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
    }
    return resObj;
}