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: 'transparent',
  grid: {
    top: '10%',
    left: '20%',
    right: '20%',
    bottom: '40%',
    borderWidth: 1,
    borderColor: '#f0f0f0',
  },
  title: [{
    text: '总种植面积',
    top: '47%',
    left: '46%',
    padding: [-15, 0, 0, -15],
    textStyle: {
      color: '#6B6B6B',
      fontSize: 12,
      fontWeight: 'Regular',
    },
  }, {
    text: '11000',
    top: '45%',
    left: '47%',
    padding: [15, 0, 0, -20],
    textStyle: {
      color: '#333',
      fontSize: 21,
      fontWeight: '400',
    },
  }],
  series: {
    type: 'pie',
    center: ['50%', '50%'],
    radius: ['35%', '50%'],
    clockwise: true,
    //startAngle: 50,
    avoidLabelOverlap: true,
    hoverOffset: 15,
    itemStyle: {
      normal: {
        borderWidth: 5,
        borderColor: "#fff",
        boderRadius: 10,
        color: function (params) {
          return colorList[params.dataIndex];
        },
      },
    },
    label: {
      show: true,
      position: 'outside',
      formatter: function (data) {
        //console.log('data',data)
        return (
          '{name|' + data.name + ':' + data.percent.toFixed(1) + '%' + '\n}' + ' \n{value|' + data.value + 'm²}'
        );
      },
      rich: {
        name: {
          fontSize: 12,
          color: '#000',
          fontWeight: 'Bold'
        },
        value: {
          fontSize: 12,
          color: '#999',
          align: 'left'
        },
      },
    },
    labelLine: {
      show: false,
      normal: {
        length: 5,
        length2: 30,
        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;
}