Echarts在线免费图表

 
            var colorList = ['#04e389', '#fc874b', '#02d6ea', '#797aff', '#ff999a']
var seriesData = [{ "name": "双向四车道", "value": 5500.527 }, { "name": "双向五车道", "value": 27.193 }, { "name": "双向六车道", "value": 1167.47 }, { "name": "双向八车道", "value": 1014.973 }, { "name": "双向十车道", "value": 2.921 }]


var rich = {
   name: {
      color: "#666666",
      fontSize: 14,
      padding: [0, 0, 5, 0],
      fontWeight: '400',
      align: 'center'
   },
   value: {
      color: "#666",
      fontSize: 14,
      padding: [0, 0, 5, 0],
      fontWeight: '500',
      align: 'center'
   },
   percent: {
      color: "#FFF",
      align: 'right',
      fontSize: 12,
      fontWeight: '500',
      //padding: [0, 5]
   },
   hr: {
      borderColor: '#DFDFDF',
      width: '100%',
      borderWidth: 1,
      height: 0,
   },
   cir: {
      fontSize: 24,
   }
}
let option = {
   color: colorList,
   toolbox: {
      show: true,
      right: '0',
      feature: {
         mark: { show: true },
         restore: { show: false },
         saveAsImage: {
            show: true,
            pixelRatio: 1,
            title: '保存为图片',
            type: 'png',
            lang: ['点击保存']
         }
      }
   },
   tooltip: {
      show: true,
      transitionDuration: 0,

   },
   series: [
      // 主环
      {
         type: 'pie',
         radius: ['30%', '60%'],
         center: ["55%", "50%"],
         labelLine: {
            normal: {
               length: 15,
               length2: 0,
               lineStyle: {
                  color: 'transparent'
               }
            }
         },
         label: {
            normal: {
               formatter: params => {
                  return '{name|' + params.name + ':' + params.percent + '%' + '}' + '\n{hr|}\n' + '{value|' + params.value + ' 公里' + '}'
               },
               rich: rich,
               padding: [2, 25, 10, 15]
            }
         },
         data: seriesData,
         // z: -1
      }, 
      // 圆点
      {
         name: '详情',
         type: 'pie',
         radius: ['30%', '60%'],
         center: ["55%", "50%"],
         labelLine: {
            show: false
         },
         label: {
            show: true,
            position: 'outer',
            backgroundColor: 'auto',
            height: 0,
            width: 0,
            lineHeight: 0,
            distanceToLabelLine: 0,
            borderRadius: 6,
            padding: [6, -6, 6, -6],
         },

         data: seriesData
      }, 
      // 背景圆
      {
         itemStyle: {
            normal: {
               color: '#f2f9f7'
            }
         },
         type: 'pie',
         silent: true, //取消高亮
         radius: ['30%', '67%'],
         center: ["55%", "50%"],
         hoverAnimation: false, //取消动画效果
         data: [100],
         z: -1
      }]
}