Echarts在线免费图表

 
            var center1= ['50%', '65%']
var data1='1200'
var data2='1800'
var Dvalue = ((data1/data2)*100).toFixed(2)

var startAngle=180
var endAngle=0
var min= 0
var max=100
var radius="85%"
var pointer={ show:false}
var axisLabel= {
        distance: 5,
        color: '#999',
        fontSize: 18,
        formatter: function (value) {
                return value + '%';
            }
      }

var axisTick = {
        distance: -65,
        splitNumber: 5,
        length: 6,
        lineStyle: {
          color: '#999'
        }
      }
var splitLine={
        distance: -65,
        length: 8,
        lineStyle: {
          width: 3,
          color: '#999'
        }
      }
var anchor= {show: false}

var axisLine={
        lineStyle: {
            width: 60,
           color: [
                [1, '#f4f4f4']
            ]
        }
    }
var textStyle={
            textAlign:'center',
            fontSize: 40,
            lineHeight:60,
            color: '#333',
            rich:{
                a:{
                    color:'#333',
                    fontSize:60,
                    fontWeight:'bold',
                    lineHeight:24
                }
            }
        } 

var title={
            show: true,
            offsetCenter: [0, '60%'],
            fontSize: 18
        }
var detail= {
            valueAnimation: true,
            fontSize: 90,
            lineHeight:60  ,
            color:'#106ae7',
            offsetCenter: [0, '-35%'],
            fontWeight:'bold',
            formatter: function (value) {
                return '{a|党员发展进度} '+'\n'+value + '{a|%}';
            },
            rich: {
                a: {
                    color:'#333',
                    fontSize:60,
                    lineHeight:90
                }
            }
        }
option = {
   title:[{
        text: '已完成发展指标\n{a|'+data1+'} 人',
        left: '10%',
        top: '67%',
        textStyle: textStyle 
    },
    {
        text: '上级下达指标\n{a|'+data2+'} 人',
        right: '10%',
        top: '67%',
        textStyle: textStyle 
    }],
    series: [
        {
        type: 'gauge',
        startAngle: startAngle,
        center:center1,
        endAngle: endAngle,
        min: min,
        max: max,
        radius:radius,
        splitNumber: 4,
        progress:{ 
            show: true, 
            width: 60,
            itemStyle: {
                color: "#1492FF"
              }
        },
        pointer: pointer,
        axisLine:axisLine,
        axisTick: axisTick,
        splitLine:splitLine,
        axisLabel: axisLabel,
        anchor: anchor,
        title: title,
        detail: detail,
        data: [{
            value: Dvalue,
            name:''
        }]
        
    },
    {
        type: 'gauge',
        startAngle: startAngle,
        center:center1,
        endAngle: endAngle,
        min: min,
        max: 100,
        radius:radius,
        splitNumber: 5,
        progress:{ 
            show: false, 
            width: 15,
            itemStyle: {
                color: "#1492ff"
              }
        },
        pointer: {show:false},
        axisLine:{show:false},
        axisTick: {show:false},
        splitLine:{show:false},
        axisLabel: {show:false},
        anchor: {show:false},
        title: {show:false},
        detail: {show:false},
        data: [{
            value: 100,
            name:''
        }]
        
    }
    ]
};