Echarts在线免费图表

 
            var dataList = [{
   "name": "酒店和餐饮业",
   "value": 12
}, {
   "name": "线上销售",
   "value": 47
}, {
   "name": "兔产品加工厂",
   "value": 18
}, {
   "name": "零售商超",
   "value": 23
}]

option = {
   backgroundColor: '#020F37',
   color: ['#6552D5', '#70D9DA', '#54A8BF', '#3180C0' ],
   grid: {
      bottom: 150,
      left: 100,
      right: '10%'
   },
   legend: {
      show: false,
      orient: 'vertical',
      top: "10%",
      left: "10%",
      textStyle: {
         color: '#f2f2f2',
         fontSize: 10,
      },
      icon: 'roundRect',
      data: dataList,
   },
   series: [
      {
         radius: ['32%', '50%'],
         center: ['50%', '35%'],
         type: 'pie',
         // silent: true,//图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
         label: {
            fontSize: 16,
            show: true,
            formatter: "{b} {c}%",
            color: "#fff",
            position: 'outside',
         },
         emphasis: {
            disabled: true
         },
         labelLine: {
            show: true,
            length: 20,
            length2: 25
         },
         name: "",
         data: dataList,

      },
      {
         radius: ['30%', '31%'],
         center: ['50%', '35%'],
         silent: true,
         type: 'pie',
         label: { show: false },
         labelLine: { show: false },
         animation: false,
         tooltip: {
            show: false
         },
         data: [{
            value: 1,
            itemStyle: {
               color: "rgba(250,250,250,0.3)",
            },
         }],
      }, {
         name: '外边框',
         type: 'pie',
         clockwise: false, //顺时加载
         // silent: true,
         center: ['50%', '35%'],
         radius: ['53%', '53%'],
         label: { show: false },
         data: [{
            value: 9,
            name: '',
            itemStyle: {
               borderWidth: 2,
               borderColor: '#0b5263'
            }
         }]
      }
   ]
};