Echarts在线免费图表

 
            // 默认数据
let pieData = [
   { value: randomNum(100, 1000), name: '外购电力' },
   { value: randomNum(100, 1000), name: '外购天然气' },
   { value: randomNum(100, 1000), name: '外购热力' },
   { value: randomNum(100, 1000), name: '物流运输' },
   { value: randomNum(100, 1000), name: '员工商旅' },
];
// 默认配色
let colorsList = ['#25c897', '#b5dbe3', '#d1c157', '#6663ec', '#2abee6'];
const sum = pieData.reduce((p, i) => p += i.value, 0);
const option = {
   color: colorsList,
   tooltip: {
      formatter: '{b} : {c} ({d}%)',
   },
   title: [
      {
         text: sum,
         left: 'center', // 图表内容水平居中
         top: '40%', // 图表内容垂直居中
         textStyle: {
            color: '#2D3C59',
            fontSize: 28,
            fontWeight: 'bold',
            width: 95,
         },
      },
      {
         text: '减排潜力',
         left: 'center', // 图表内容水平居中
         top: '52%', // 图表内容垂直居中
         textStyle: {
            color: '#2D3C59',
            fontSize: 14,
            width: 56,
         },
      },
      {
         text: '吨CO2e',
         left: 'center', // 图表内容水平居中
         top: '58%', // 图表内容垂直居中
         textStyle: {
            color: '#2D3C59',
            fontSize: 14,
            width: 52,
         },
      },
   ],
   // 图表配置
   series: [
      {
         type: 'pie', // 图表类型为饼图
         radius: ['60%', '76%'], // 控制内外圆环的半径，18%代表内圆，26%代表外圆
         center: ['50%', '50%'],
         avoidLabelOverlap: true, // 是否启用防止标签重叠策略
         showEmptyCircle: true, // 是否在无数据的时候显示一个占位圆
         label: {
            show: true, // 是否显示引导文本
            normal: {
               // formatter: '{b}{d}%',
               formatter: "{b|{b}}\n{d|{d}%}",
               rich: {
                  d: {
                     fontSize: 14,
                     padding: [5, 0, 0, 0],
                     color: '#2D3C59',
                  },
                  b: {
                     fontSize: 14,
                     padding: [0, 0, 5, 0],
                     color: '#2D3C59',
                  },
               },
            }
         },
         data: pieData, // 饼图数据
         labelLine: {
            normal: {
               length: 10,
               length2: 25,
            },
         },
      },
      {
         type: 'pie',
         tooltip: {
            show: false,
         },
         center: ['50%', '50%'],
         radius: ['54%', '54%'],
         label: {
            show: false, // 不展示data中的value和name
         },
         data: [
            {
               value: 1, // 此处的值无所谓是多少
               name: '', // 因为不展示label，可不填
               itemStyle: {
                  // 边框样式，浅蓝色，颜色可自行修改
                  borderWidth: 2, // 边框宽度
                  borderColor: '#b3c9d5', // 边框颜色
               },
            },
         ],
      },
   ],
}

function randomNum(min, max) {
   return Math.floor(Math.random() * (min - max) + max);
}