Echarts在线免费图表

 
            var seriesData = [{
        name: '鸡',
        value: '5'
      }, {
        name: '鸭',
        value: '21'
      }, {
        name: '兔',
        value: '10'
      }, {
        name: '狗',
        value: '18'
      },{
        name: '猫',
        value: '18'
      }]
      var legendData1 = ['鸡', '鸭', '兔', '狗','猫']
      var colorList = ['#0278e6','#34d160','#fcdf39','#f19611','#00c6ff','#f76363']
option = {
   backgroundColor:'#181734',
   tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5,
          textStyle: {
            color: '#fff'
          },
          formatter: function(parms) {
            var str = parms.marker + '' + parms.data.name + parms.data.value + '(' + parms.percent + '%' + ')'
            return str
          }
        },
        legend: [{
          itemWidth: 10,
          itemHeight: 10,
          icon: 'rect',
          orient: 'vertical',
          align: 'right',
          top: '40%',
          right: '15%',
          itemGap: 18,
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
          data: legendData1
        }],
        series: [{
          type: 'pie',
          legendHoverLink: true,
          z: 3,
          center: ['40%', '50%'],
          radius: ['30%', '47%'],
          itemStyle: {
            normal: {
              color: function(params) {
                return colorList[params.dataIndex]
              }
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: function(parms) {
              var strs = parms.data.name + parms.data.value + '(' + parms.percent + '%' + ')'
              return strs
            }
          },
          labelLine: {
            normal: {
              length: 4,
              length2: 50,
              lineStyle: {
                width: 1
              }
            }
          },
          data: seriesData
        }]
};