仪表盘（highcharts）

仪表盘：
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
js代码：
$(function () {
    var colors = ['#07FD04','#FFFF00','#FF7805','#FA0100','#9E004F','#790222']
$('#container').highcharts({
        chart :{
       renderTo: 'container',
       type: 'gauge',
       plotBorderWidth: 1,
       plotBackgroundColor: {//背景色
        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
        stops: [
        [0, '#FFF4C6'],
        [0.3, '#FFFFFF'],
        [1, '#FFF4C6']
        ]
       },
       plotBackgroundImage: null,//背景图片
       height: 210
   },
        title : {
       text: '北京市最近24小时空气质量指数趋势(AQI)'
   },
  
        pane : [{
       startAngle: -90,
       endAngle: 90,
       background: null,
       center: ['45%', '100%'],
       size: 300
   }],           
   yAxis : [{
        //      tickLength:0,
       //         minorTickLength:0,
       min: 0,
       max: 500,
       minorTickPosition: 'inside',
       tickPosition: 'inside',
       labels: {
            //        enabled:false,
        rotation: 'auto',
        distance: 10
       },
       plotBands: [{//分区段
        from: 0,
        to: 50,
        color: colors[0],
        innerRadius: '100%',
        outerRadius: '65%'
       },{
        from: 50,
        to: 100,
        color: colors[1],
        innerRadius: '100%',
        outerRadius: '65%'
       },{
        from: 100,
        to: 150,
        color: colors[2],
        innerRadius: '100%',
        outerRadius: '65%'
       },{
        from: 150,
        to: 200,
        color: colors[3],
        innerRadius: '100%',
        outerRadius: '65%'
       },{
        from: 200,
        to: 300,
        color: colors[4],
        innerRadius: '100%',
        outerRadius: '65%'
       },{
        from: 300,
        to: 500,
        color: colors[5],
        innerRadius: '100%',
        outerRadius: '65%'
       }],
       title: {
        text: 'AQI',
               style :{
                   fontSize : '14px',
                   marginTop : '10px'
               },
        y: 20
       }
   }],
                               exporting :{
        enabled: true
       },
                               plotOptions: {
    gauge: {
    dataLabels: {
    enabled: true,
     y : -20
    },
    dial: {//仪表盘指针
    radius: '80%',
    rearLength: '0%',
    backgroundColor: 'silver',
borderColor: 'silver',
borderWidth: 1,
baseWidth: 10,
topWidth: 1,
baseLength: '30%'
    }
    }
   },
                               tooltip :{
    formatter: function() {
    var name = '';
        if(this.y >= 0 && this.y <=50)
        name = "优";
        else if(this.y > 50 && this.y <= 100)
        name = "良";
        else if (this.y > 100 && this.y <=150)
        name = "轻度污染";
        else if(this.y > 150 && this.y <= 200)
        name = "中度污染";
        else if(this.y > 200 && this.y <= 300)
        name = "重度污染";
        else if(this.y > 300)
        name = "严重污染";
      
           return '北京市最近24小时空气质量指数趋势(AQI): '+ this.y + ", 空气质量状况：" + name;
           }
   },
  series: [{
    name : '北京市最近24小时空气质量指数趋势(AQI)',
       data: [150],
       yAxis: 0
   }]
});
});