zoukankan      html  css  js  c++  java
  • echarts gauge仪表盘设置

    第一次用echarts,对其配置属性不是很熟,所以做仪表盘时,有点找不到北。最后完成的效果图为:

    其中有两个比较棘手的问题(对于我这个新手来说):

    1、外面那个外弧的实现

      针对这个效果,我是取巧,直接用两个表盘来实现的(代码放在下面)。

    2、表盘颜色的渐变(外表盘的)

      这个问题我找了很久,然后瞎找找到了一个类似的,然后参考着针对自己的要求改动。

    直接上代码:

      1 option = {
      2          series: [
      3              {
      4                  type: "gauge",
      5                  center: ["50%", "45%"], // 仪表位置
      6                  radius: "80%", //仪表大小
      7                  startAngle: 200, //开始角度
      8                  endAngle: -20, //结束角度
      9                  axisLine: {
     10                      show: false,
     11                      lineStyle: { // 属性lineStyle控制线条样式
     12                          color: [
     13                              [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
     14                                  offset: 1,
     15                                  color: "#E75F25" // 50% 处的颜色
     16                              }, {
     17                                  offset: 0.8,
     18                                  color: "#D9452C" // 40% 处的颜色
     19                              }], false) ], // 100% 处的颜色
     20                               [ 0.7,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
     21                                  offset: 1,
     22                                  color: "#FFC539" // 70% 处的颜色
     23                              }, {
     24                                  offset: 0.8,
     25                                  color: "#FE951E" // 66% 处的颜色
     26                              }, {
     27                                  offset: 0,
     28                                  color: "#E75F25" // 50% 处的颜色
     29                              }], false) ],
     30                               [ 0.9,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
     31                                  offset: 1,
     32                                  color: "#C7DD6B" // 90% 处的颜色
     33                              }, {
     34                                  offset: 0.8,
     35                                  color: "#FEEC49" // 86% 处的颜色
     36                              }, {
     37                                  offset: 0,
     38                                  color: "#FFC539" // 70% 处的颜色
     39                              }], false) ],
     40                              [1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {
     41                                  offset: 0.2,
     42                                  color: "#1CAD52" // 92% 处的颜色
     43                              }, {
     44                                  offset: 0,
     45                                  color: "#C7DD6B" // 90% 处的颜色
     46                              }], false) ]
     47                          ],
     48                           10
     49                      }
     50                  },
     51                  splitLine: { 
     52                      show: false
     53                  },
     54                  axisTick: {
     55                      show: false
     56                  },
     57                  axisLabel: {
     58                      show: false
     59                  },
     60                  pointer : { //指针样式
     61                      length: '45%'
     62                  },
     63                  detail: {
     64                      show: false
     65                  }
     66              },
     67              {
     68                  type : "gauge",
     69                  center: ["50%", "45%"], // 默认全局居中
     70                  radius : "70%",
     71                  startAngle: 200,
     72                  endAngle: -20,
     73                  axisLine : {
     74                      show : true,
     75                      lineStyle : { // 属性lineStyle控制线条样式
     76                          color : [ //表盘颜色
     77                              [ 0.5, "#DA462C" ],//0-50%处的颜色
     78                              [ 0.7, "#FF9618" ],//51%-70%处的颜色
     79                              [ 0.9, "#FFED44" ],//70%-90%处的颜色
     80                              [ 1,"#20AE51" ]//90%-100%处的颜色
     81                          ],
     82                          width : 30//表盘宽度
     83                      }
     84                  },
     85                  splitLine : { //分割线样式(及10、20等长线样式)
     86                      length : 30,
     87                      lineStyle : { // 属性lineStyle控制线条样式
     88                          width : 2
     89                      }
     90                  },
     91                  axisTick : { //刻度线样式(及短线样式)
     92                       length : 20
     93                  },
     94                  axisLabel : { //文字样式(及“10”、“20”等文字样式)
     95                      color : "black",
     96                      distance : 5 //文字离表盘的距离
     97                  },
     98                  detail: {
     99                      formatter : "{score|{value}%}",
    100                      offsetCenter: [0, "40%"],
    101                      backgroundColor: '#FFEC45',
    102                      height:30,
    103                      rich : {
    104                          score : {
    105                              color : "white",
    106                              fontFamily : "微软雅黑",
    107                              fontSize : 32
    108                          }
    109                      }
    110                  },
    111                  data: [{
    112                      value: 56,
    113                      label: {
    114                          textStyle: {
    115                              fontSize: 12
    116                          }
    117                      }
    118                  }]
    119              }
    120          ]
    121      };
  • 相关阅读:
    无线鼠标换电池了
    Jython Interactive Servlet Console YOU WILL NEVER KNOW IT EXECLLENT!!! GOOD
    Accessing Jython from Java Without Using jythonc
    jython podcast cool isnt't it?
    Python里pycurl使用记录
    Creating an Interactive JRuby Console for the Eclipse Environment
    微软为AJAX和jQuery类库提供CDN服务
    Download A File Using Cygwin and cURL
    What is JMRI?这个是做什么用的,我真没看懂但看着又很强大
    用curl 发送指定的大cookie的http/https request
  • 原文地址:https://www.cnblogs.com/pqblog/p/8478865.html
Copyright © 2011-2022 走看看