zoukankan      html  css  js  c++  java
  • 仪表盘双层结构图

    // 基于准备好的dom,初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById("main"));
            // 指定图表的配置项和数据
            let option = {
              // backgroundColor: "#000",
              '400px',
              height:'300px',
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
                borderColor: "#ccc", // 提示框浮层的边框颜色。
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                 "300px",
                height: "280px",
                containLabel: true
              },
              exporting: {
                enabled:false
              },
              series: [
                {
                  type: 'gauge',
                  name:'执行率',
                  axisLine:{
                    lineStyle:{
                      2,
                      color: [
                        [1, new  this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                          offset: 0.1,
                          color: "#FBD18A"
                        },
                          {
                            offset: 0.5,
                            color: "#FBD18A"
                          },
                          {
                            offset: 1,
                            color: "#FBD18A"
                          }
                        ])]
                      ],
                      shadowColor : '#red', //默认透明
                      shadowBlur: 10
                    }
                  },
                  splitLine:{
                    length:5,
                    color:'#FBD18A'
                  },
                  axisTick:{
                    splitNumber:2
                  },
                  axisLabel:{
                    textStyle:{
                      color:'#FBD18A'
                    }
                  },
                  pointer:{
                    3
                  },
                  title:{
                    offsetCenter:['0%','80%'],
                    fontSize:12,
                    color:'#FBD18A'
                  },
                  detail: {show:false},
                  data: [{value: 60, name: '执行率 %'}]
                },
                {
                  type: 'gauge',
                  name:'占用率',
                  radius: '50%',
                  axisLine:{
                    lineStyle:{
                      2,
                      color:[[0.1, '#87E5A1'],[1, '#87E5A1']]
                    }
                  },
                  splitLine:{
                    length:5,
                    color:'#FBD18A'
                  },
                  axisTick:{
                    splitNumber:2,
                    color:'#FBD18A'
                  },
                  pointer:{
                    3
                  },
                  title:{
                    offsetCenter:['0%','80%'],
                    fontSize:12,
                    color:'#87E5A1'
                  },
                  detail: {show:false},
                  data: [{value: 30, name: '占用率 %'}]
                }
              ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    

      项目需求,做一个大的仪表套小的仪表

  • 相关阅读:
    Java并发专题 带返回结果的批量任务执行
    angualejs
    Java并发编程:Callable、Future和FutureTask
    mybatis
    InitialContext和lookup
    git 常用使用命令
    junit spring 测试
    redis windows
    为何PS出的RSS总和大于实际物理内存
    32位机器的LowMemory
  • 原文地址:https://www.cnblogs.com/huichaoboke/p/14100851.html
Copyright © 2011-2022 走看看