Echarts在线免费图表

 
            var getmax = 1000;
var getvalue = 670;
var colorList = ['rgba(0, 150, 255, 0.5)','rgba(46, 169, 255, 1)']
option = {
   backgroundColor:'#1b327d',
   title:{
      text:'特殊指针的仪表盘',
      top:'10px',
      left:'10px',
      textStyle:{
         color:'#fff'
      }
   },
   angleAxis: {
      show: false,
      max: getmax * 360 / 180, //-45度到225度，二者偏移值是270度除360度
      type: 'value',
      startAngle: 180, //极坐标初始角度
      splitLine: {
         show: false
      }
   },
   barMaxWidth: 14, //圆环宽度
   radiusAxis: {
      show: false,
      type: 'category',
   },
   //圆环位置和大小
   polar: {
      center: ['50%', '70%'],
      radius: '140%'
      // radius: '120%'
   },
   series: [{
         type: 'bar',
         data: [{ //上层圆环，显示数据
            value: getvalue,
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                        offset: 0,
                        color: colorList[0],
                     },
                     {
                        offset: 1,
                        color:colorList[1],
                     },
                  ],
               },
            },
         }],
         barGap: '-100%', //柱间距离,上下两层圆环重合
         coordinateSystem: 'polar',
         barWidth: 14,
         roundCap: true, //顶端圆角
         z: 3 //圆环层级，同zindex
      },
      { //下层圆环，显示最大值
         type: 'bar',
         data: [{
            value: getmax,
            itemStyle: {
               color: "rgba(5, 28, 72,0.8)",
               borderWidth: 0,
            },
         }],
         barGap: '-100%',
         coordinateSystem: 'polar',
         barWidth: 14,
         roundCap: true,
         z: 1
      },
      //仪表盘
      {
         type: 'gauge',
         startAngle: 180, //起始角度，同极坐标
         endAngle: 0, //终止角度，同极坐标
         min: 0, // 最小刻度
         max: getmax, // 最大刻度
         splitNumber: 1,  //被分割的数量
         center: ['50%', '70%'],
         radius: '80%',
         axisLine: {
            show: false,
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         axisLabel: {
            distance: 2,
            color: '#fff',
            formatter: '{value}万/m³'
         },
         splitLabel: {
            show: false
         },
         // 特殊指针
         pointer: {
            show:true,
            icon: 'circle', // 箭头图标
            length: '175%',
            width: 15,
            height: 15,
            // offsetCenter: [0, '-45%'], // 箭头位置
            itemStyle: {
               color: colorList[1],
               shadowColor: colorList[1],
               shadowBlur: 10

            },
         },
         z: 4,
         detail: {
            formatter: function(params) {
               return ((getvalue / getmax) * 100).toFixed(2) + '%';
            },
            color: '#EABF07',
            fontSize: 20,
            offsetCenter: [0, -30],
         },
         title: {
            show: false
         },
         data: [{
            value: getvalue,
         }]
      },
   ]
};