Echarts在线免费图表

 
             var datas = {
     value: 80,
     company: "%",
     ringColor: [{
         offset: 0,
         color: '#cf1c27' // 0% 处的颜色
     }, {
         offset: 1,
         color: '#5e37ac' // 100% 处的颜色
     }]
 }
 var option = {
     backgroundColor: "#142468",
     title: {
         text: datas.value + datas.company,
         x: 'center',
         y: 'center',
         textStyle: {
             fontWeight: 'bold',
             color: 'white',
             fontSize: '90'
         }
     },
     color: ['#282c40'],
     legend: {
         show: false,
         data: []
     },

     series: [{
             name: 'Line 1',
             type: 'pie',
             clockWise: false, //逆向
             startAngle: 90, //开始角度
             radius: ['50%', '60%'],
             itemStyle: {
                 normal: {
                     label: {
                         show: false
                     },
                     labelLine: {
                         show: false
                     }
                 }
             },
             hoverAnimation: false,
             data: [{
                     value: datas.value,
                     name: '',
                     itemStyle: {
                         normal: {
                             color: { // 完成的圆环的颜色
                                 colorStops: datas.ringColor
                             },
                             label: {
                                 show: false
                             },
                             labelLine: {
                                 show: false
                             }
                         }
                     }
                 }, {
                     name: '',
                     value: 100 - datas.value
                 },
                 {
                     name: '统计',
                     type: 'gauge',
                     splitNumber: 30, //刻度数量
                     min: 0,
                     max: 100,
                     radius: '68%', //图表尺寸
                     center: ['50%', '50%'],
                     startAngle: 90,
                     endAngle: -269.9999,
                     axisLine: {
                         show: true,
                         lineStyle: {
                             width: 0,
                             shadowBlur: 0,
                             color: [
                                 [0, '#0dc2fe'],
                                 [1, '#0dc2fe']
                             ]
                         }
                     },
                     axisTick: {
                         show: true,
                         lineStyle: {
                             color: '#0dc2fe',
                             width: 2
                         },
                         length: 20,
                         splitNumber: 5
                     },
                     splitLine: {
                         show: true,
                         length: 20,
                         lineStyle: {
                             color: '#0dc2fe',
                         }
                     },
                     axisLabel: {
                         show: false
                     },
                     pointer: { //仪表盘指针
                         show: 0,
                     },
                     detail: {
                         borderColor: '#fff',
                         shadowColor: '#fff', //默认透明
                         shadowBlur: 2,
                         offsetCenter: [0, '0%'], // x, y，单位px
                         textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                             color: '#fff',
                             fontSize: 30,
                         },
                         formatter: '{value}'
                     },
                     data: []
                 }
             ]
         },
         {
             type: 'pie',
             zlevel: 21,
             silent: true,
             radius: ['71%', '70%'],
             hoverAnimation: false,
             clockWise: false, //逆向
             startAngle: 90, //开始角度
             color: '#2dc0c9',
             // animation:false,
             data: [1],
             labelLine: {
                 normal: {
                     show: false
                 }
             }
         },
         {
             type: 'pie',
             zlevel: 20,
             silent: true,
             radius: ['62%', '61%'],
             hoverAnimation: false,
             clockWise: false, //逆向
             startAngle: 90, //开始角度
             color: '#2dc0c9',
             // animation:false,
             data: [1],
             labelLine: {
                 normal: {
                     show: false
                 }
             }
         },
         {
             name: '统计',
             type: 'gauge',
             splitNumber: 30, //刻度数量
             min: 0,
             max: 100,
             radius: '68%', //图表尺寸
             center: ['50%', '50%'],
             clockWise: false, //逆向
             startAngle: 90, //开始角度
             endAngle: -269.9999,
             axisLine: {
                 show: true,
                 lineStyle: {
                     width: 0,
                     shadowBlur: 0,
                     color: [
                         [0, '#0dc2fe'],
                         [1, '#0dc2fe']
                     ]
                 }
             },
             axisTick: {
                 show: true,
                 lineStyle: {
                     color: '#0dc2fe',
                     width: 2
                 },
                 length: 20,
                 splitNumber: 5
             },
             splitLine: {
                 show: true,
                 length: 20,
                 lineStyle: {
                     color: '#0dc2fe',
                 }
             },
             axisLabel: {
                 show: false
             },
             pointer: { //仪表盘指针
                 show: 0,
             },
             detail: {
                 show: false
             }
         }
     ]
 };