Echarts在线免费图表

 
            
//配置参数 换图表只需改变option即可
option = {
   backgroundColor: '#031d33',
   color: ['#1596F1', '#F7B000'], //环的颜色
   legend: {
      show: true
   },
   series: [{
      type: 'gauge', //仪表盘
      startAngle: 90,
      endAngle: -270,
      center: ['50%', '50%'], //中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
      min: 0,
      max: 50,
      pointer: {
         //仪表盘指针
         show: false
      },
      progress: {
         //展示当前进度
         show: true,
         overlap: false, //多组数据时进度条是否重叠
         roundCap: true,
         clip: true,
         itemStyle: {
            //环形间隔 白色
            borderWidth: 10,
            borderColor: '#00173C'
         }
      },
      axisLine: {
         //仪表盘轴线相关配置
         lineStyle: {
            //仪表盘轴线样式
            width: 40,
            color: [
               [1, '#00173C']
            ] //圆环背景颜色 原来是灰色的
         }
      },
      splitLine: {
         //分隔线样式
         show: false,
         distance: 0, //分隔线与轴线的距离
         length: 10
      },
      axisTick: {
         //刻度样式
         show: false
      },
      axisLabel: {
         //刻度标签
         show: false,
         distance: 50 //标签与刻度线的距离
      },
      data: [
         //系列中的数据内容数组
         {
            value: 30,
            name: '钥匙柜',
            title: {
               //仪表盘标题
               offsetCenter: ['0%', '0%'],
               color: '#fff', //name颜色
               fontSize: 18,
            },
            detail: {
               valueAnimation: false,
               offsetCenter: ['0%', '12%'],
               color: 'transparent' //value颜色
            }
         },
         {
            value: 30,
            name: '',
            title: {
               offsetCenter: ['0%', '0%']
            },
            detail: {
               valueAnimation: true,
               offsetCenter: ['0%', '15%'],
            }
         }
      ],
      title: {
         fontSize: 15,
         color: '#7034FF',
         fontWeight: 600,
         textAlign: 'center'
      },
      detail: {
         //仪表盘详情，用于显示数据 即data中的value颜色
         width: 50,
         height: 20,
         fontSize: 26,
         color: 'transparent',
         borderColor: 'transparent',
         borderRadius: 20,
         borderWidth: 1,
         formatter: '{value}',
         show: true
      }
   }]
};