Echarts在线免费图表

 
            
let data = [
  { value: 666, name: '呼兰区' },
  { value: 193, name: '道里区' },
  { value: 300, name: '南岗区' },
  { value: 200, name: '松北区' },
];
const colorList = [
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: "rgba(69,233,254,1)"
            },
            {
              offset: 1,
              color: "rgba(69,233,254,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
              offset: 0,
              color: "rgba(255,181,111,1)"
            },
            {
              offset: 1,
              color: "rgba(255,181,111,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: "rgba(101,122,250,1)"
            },
            {
              offset: 1,
              color: "rgba(101,122,250,0.3)"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              offset: 0,
              color: "rgba(45,190,146,1)"
            },
            {
              offset: 1,
              color: "rgba(45,190,146,0.3)"
            }
          ]),
        ];
option =  {
  backgroundColor: '#fff',
  // color: color,
  tooltip: {
    trigger: 'item',
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: [8, 16],
    textStyle: {
      color: '#fff',
      fontSize: 16
    },
    
    formatter: function (params) {
      return (
        params.marker +
        '<span style="color:' +
        params.color +
        '">' +
        params.data['name'] +
        '\n' +
        params.data['value'] +
        '</span>'
      );
    }
  },
  title: {
      text: '数量',
      subtext: `1000`,
      top: '48%',
      left: 'center',
      textStyle: {
         color: '#222',
         fontSize: 20,
         fontWeight: 400
      },
      subtextStyle: {
         color: '#222',
         fontSize: 16,
         fontWeight: 400
      }
   },
  legend: {
   //  orient: 'vertical',
    icon: "circle",
    left: 'center', // 修改为居中
    bottom: '0',
    width:300,
    height:60,
    itemWidth: 30,
    itemGap: 40,
    textStyle: {
      rich: {
        a: {
          color: '#222222',
          fontSize: 16,
          padding: [0, 10, 0, 0]
        },
        b: {
          color: '#222',
          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: ['50%', '50%'], // 修改为居中
      avoidLabelOverlap: true,
      label: {
        normal: {
          show: true,
          position: 'inside',
          formatter: '{d}%',
          textStyle: {
            align: 'center',
            baseline: 'middle',
            fontSize: 16,
            fontWeight: '100',
            color: '#fff'
          }
        }
      },
      itemStyle: {
              color: params => {
                return colorList[params.dataIndex];
              }
            },
      labelLine: {
        show: false
      },
      data: data
    }
  ]
};