1. 首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. ECharts官网

百度echarts多仪表盘

var myRate1 = 1000;
option = {
  backgroundColor: "#0B1321",
  title: [{
    x: "12%",
    bottom: 100,
    text: '已处理',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 26,
      color: "#fff"
    },
  }, {
    x: "42%",
    bottom: 100,
    text: '总预约量',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 26,
      color: "#fff"
    },
  }, {
    x: "75%",
    bottom: 100,
    text: '未处理',
    textStyle: {
      fontWeight: 'normal',
      fontSize: 26,
      color: "#fff"
    },
  }],
  tooltip: {
    show: true,


  },
  series: [{
    type: 'gauge',
    center: ['50%', '55%'], // 默认全局居中  
    radius: '50%',
    splitNumber: 10, //刻度数量
    min: 0,
    max: 1000,
    startAngle: 200,
    endAngle: -20,
    clockwise: true,
    axisLine: {
      show: true,
      lineStyle: {
        width: 2,
        shadowBlur: 0,
        color: [
          [1, '#03B7C9']
        ]
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#03B7C9',
        width: 1
      },
      length: -15,
      splitNumber: 10
    },
    splitLine: {
      show: true,
      length: -20,
      lineStyle: {
        color: '#03B7C9',
      }
    },
    axisLabel: {
      distance: -20,
      textStyle: {
        color: "#03B7C9",
        fontSize: "15",
        fontWeight: "bold"
      }
    },
    pointer: { //仪表盘指针
      show: 0
    },
    detail: {
      show: false
    },
    data: [{
      name: "",
      value: myRate1
    }]
  }, {
    startAngle: 200,
    endAngle: -20,
    type: 'gauge',
    center: ['50%', '55%'], // 默认全局居中  
    radius: '45%',
    min: 0,
    max: 1000,
    splitNumber: 0,
    axisLine: { // 坐标轴线  
      lineStyle: {
        color: [
          [0.66, '#dddddd'],
          [1, '#dddddd']
        ], // 属性lineStyle控制线条样式  
        width: 4
      }
    },


    axisLabel: { // 坐标轴小标记  
      textStyle: { // 属性lineStyle控制线条样式  
        fontWeight: 'bolder',
        fontSize: 16,
        color: 'rgba(30,144,255,0)',
      }
    },
    splitLine: { // 分隔线  
      length: 10, // 属性length控制线长  
      lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式  
        width: 0,
        color: '#444'
      }
    },
    pointer: { // 分隔线 指针  
      color: '#666666',
      width: 0,
      length: 230
    },
    detail: {
      show: false
    },

  }, {
    name: '累计受理',
    type: 'gauge',
    startAngle: 200,
    endAngle: -20,
    radius: '40%',
    center: ['50%', '55%'], // 默认全局居中  

    min: 0,
    max: 1000,

    axisLine: {
      show: false,
      lineStyle: {
        width: 25,
        shadowBlur: 0,
        color: [
          [0.2, '#00FAFC'],
          [0.4, '#3BD542'],
          [0.6, '#E3F424'],
          [0.8, '#7E48DA'],
          [1, '#E531A8']
        ]
      }
    },
    axisTick: {
      show: false,

    },
    splitLine: {
      show: false,
      length: 20,

    },

    axisLabel: {
      show: false
    },
    pointer: {
      show: true,
    },
    detail: {
      show: true,
      offsetCenter: [0, '40%'],
      textStyle: {
        fontSize: 30
      }
    },
    itemStyle: {
      normal: {
        color: "#03B7C9",

      }
    },
    data: [{
      value: 436
    }]
  }, {
    type: 'gauge',
    center: ['20%', '55%'], // 默认全局居中  
    radius: '35%',
    splitNumber: 10, //刻度数量
    min: 0,
    max: 1000,
    endAngle: 45,
    clockwise: true,
    axisLine: {
      show: true,
      lineStyle: {
        width: 2,
        shadowBlur: 0,
        color: [
          [1, '#03B7C9']
        ]
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#03B7C9',
        width: 1
      },
      length: -15,
      splitNumber: 10
    },
    splitLine: {
      show: true,
      length: -20,
      lineStyle: {
        color: '#03B7C9',
      }
    },
    axisLabel: {
      distance: -20,
      textStyle: {
        color: "#03B7C9",
        fontSize: "15",
        fontWeight: "bold"
      }
    },
    pointer: { //仪表盘指针
      show: 0
    },
    detail: {
      show: false
    },
    data: [{
      name: "",
      value: myRate1
    }]
  }, {
    type: 'gauge',
    center: ['20%', '55%'], // 默认全局居中  
    radius: '30%',
    min: 0,
    max: 1000,
    endAngle: 45,
    splitNumber: 0,
    axisLine: { // 坐标轴线  
      lineStyle: {
        color: [
          [0.66, '#dddddd'],
          [1, '#dddddd']
        ], // 属性lineStyle控制线条样式  
        width: 4
      }
    },


    axisLabel: { // 坐标轴小标记  
      textStyle: { // 属性lineStyle控制线条样式  
        fontWeight: 'bolder',
        fontSize: 16,
        color: 'rgba(30,144,255,0)',
      }
    },
    splitLine: { // 分隔线  
      length: 10, // 属性length控制线长  
      lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式  
        width: 0,
        color: '#444'
      }
    },
    pointer: { // 分隔线 指针  
      color: '#666666',
      width: 0,
      length: 230
    },
    detail: {
      show: false
    },

  }, {
    name: '累计办结',
    type: 'gauge',
    endAngle: 45,
    radius: '25%',
    center: ['20%', '55%'], // 默认全局居中  

    min: 0,
    max: 1000,

    axisLine: {
      show: false,
      lineStyle: {
        width: 25,
        shadowBlur: 0,
        color: [
          [0.2, '#00FAFC'],
          [0.4, '#3BD542'],
          [0.6, '#E3F424'],
          [0.8, '#7E48DA'],
          [1, '#E531A8']
        ]
      }
    },
    axisTick: {
      show: false,

    },
    splitLine: {
      show: false,
      length: 20,

    },

    axisLabel: {
      show: false
    },
    pointer: {
      show: true,
    },
    detail: {
      show: true,
      offsetCenter: [0, '40%'],
      textStyle: {
        fontSize: 30
      }
    },
    itemStyle: {
      normal: {
        color: "#03B7C9",

      }
    },
    data: [{
      value: 245
    }]
  }, {
    type: 'gauge',
    center: ['80%', '55%'], // 默认全局居中  
    radius: '35%',
    splitNumber: 10, //刻度数量
    min: 0,
    max: 1000,
    startAngle: 140,
    endAngle: -45,
    clockwise: true,
    axisLine: {
      show: true,
      lineStyle: {
        width: 2,
        shadowBlur: 0,
        color: [
          [1, '#03B7C9']
        ]
      }
    },
    axisTick: {
      show: true,
      lineStyle: {
        color: '#03B7C9',
        width: 1
      },
      length: -15,
      splitNumber: 10
    },
    splitLine: {
      show: true,
      length: -20,
      lineStyle: {
        color: '#03B7C9',
      }
    },
    axisLabel: {
      distance: -20,
      textStyle: {
        color: "#03B7C9",
        fontSize: "15",
        fontWeight: "bold"
      }
    },
    pointer: { //仪表盘指针
      show: 0
    },
    detail: {
      show: false
    },
    data: [{
      name: "",
      value: myRate1
    }]
  }, {
    type: 'gauge',
    center: ['80%', '55%'], // 默认全局居中  
    radius: '30%',
    min: 0,
    max: 1000,
    startAngle: 140,
    endAngle: -45,
    splitNumber: 0,
    axisLine: { // 坐标轴线  
      lineStyle: {
        color: [
          [0.66, '#dddddd'],
          [1, '#dddddd']
        ], // 属性lineStyle控制线条样式  
        width: 4
      }
    },


    axisLabel: { // 坐标轴小标记  
      textStyle: { // 属性lineStyle控制线条样式  
        fontWeight: 'bolder',
        fontSize: 16,
        color: 'rgba(30,144,255,0)',
      }
    },
    splitLine: { // 分隔线  
      length: 10, // 属性length控制线长  
      lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式  
        width: 0,
        color: '#444'
      }
    },
    pointer: { // 分隔线 指针  
      color: '#666666',
      width: 0,
      length: 230
    },
    detail: {
      show: false
    },

  }, {
    name: '未处理',
    type: 'gauge',
    startAngle: 140,
    endAngle: -45,
    radius: '25%',
    center: ['80%', '55%'], // 默认全局居中  

    min: 0,
    max: 1000,

    axisLine: {
      show: false,
      lineStyle: {
        width: 25,
        shadowBlur: 0,
        color: [
          [0.2, '#00FAFC'],
          [0.4, '#3BD542'],
          [0.6, '#E3F424'],
          [0.8, '#7E48DA'],
          [1, '#E531A8']
        ]
      }
    },
    axisTick: {
      show: false,

    },
    splitLine: {
      show: false,
      length: 20,

    },

    axisLabel: {
      show: false
    },
    pointer: {
      show: true,
    },
    detail: {
      show: true,
      offsetCenter: [0, '40%'],
      textStyle: {
        fontSize: 30
      }
    },
    itemStyle: {
      normal: {
        color: "#03B7C9",

      }
    },
    data: [{
      value: 135
    }]
  }]
};

 

点击展开全文
 

相关文章

  1. 百度echarts公司架构流程图
  2. 百度echarts如何做一个导向力图
  3. 百度echarts公交线路道路拥堵分布图(嘉兴市)
  4. 百度echarts柱状图通过环比数据展示(↑↓)
  5. 百度echarts如何利用旭日图实现分类

Echarts入门

Echarts栏目

3d柱状图 apache bar柱状图属性 data echarts echarts图表 echarts地图 echarts折线图 echarts柱状图 echarts饼图 name pie radar series 地图 大全 柱状图 百度 百度echarts 雷达图