Electron + Vue跨平台应用（十二）可视化（三）

Electron + Vue + Vscode构建跨平台应用（一）知识点补充
Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建
Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目
Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解
Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析
Electron + Vue跨平台应用（六）效果还不错的登录页面
Electron + Vue跨平台应用（七）基础技法（一）
Electron + Vue跨平台应用（八）基础技法（二）
Electron + Vue跨平台应用（八）基础技法（三）
Electron + Vue跨平台应用（九）基础技法（四）
Electron + Vue跨平台应用（十）可视化（一）
Electron + Vue跨平台应用（十一）可视化（二）

1. 仪表盘
  1.1. 属性介绍
  1.2. 定制仪表盘为温度计

1. 仪表盘

   1.1 属性介绍

他的参数如下

      // 仪表盘默认数据
      gaugeOption: {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '70%'],
            min: 20,
            max: 50,
            splitNumber: 3, // 仪表盘被分割成3段
            startAngle: 180, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  // 表盘颜色
                  [0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']
                ],
                width: 25 // 表盘宽度默认30
              }
            },
            splitLine: {
              // 分割线样式（及10、20等长线样式）
              length: 30,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 2
              }
            },
            axisTick: {
              // 刻度线样式（及短线样式）
              length: 15,
              splitNumber: 6
            },
            // 坐标轴刻度
            axisLabel: {
              color: 'black',
              distance: -50 // 文字离表盘的距离
            },
            pointer: {
              show: true // 指针控制
            },
            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: 'black', // 文字的颜色,默认 auto。
              fontSize: 20, // 文字的字体大小,默认 15。
              formatter: '{value}°C', // 格式化函数或者字符串
              height: 20,
              rich: {
                score: {
                  color: 'white',
                  fontFamily: '微软雅黑',
                  fontSize: 32
                }
              }
            },
            data: [
              {
                value: 35,
                name: '体温',
                label: {
                  textStyle: {
                    fontSize: 10
                  }
                }
              }
            ]
          }
        ]
      }

   1.2 定制仪表盘为温度计

• 仪表盘分为三个区间,每个区间颜色为灰色
     我们可以设置仪表盘color属性只为灰色
• 隐藏仪表盘指针
     我们可以设置仪表盘pointer属性为false来达到效果
• 当温度大于36度的时候，红色显示，否则显示为绿色，效果如下
     这里我们将仪表盘分为3段，每段又被分为6小份，所以我们需要通过一定的计算来设置color属性，方法如下，这里需要根据自己实际情况来修改偏移量

    // 更新仪表盘样式
    updateRangeAndColor (temperature) {
      let range = (temperature - 21) * 0.0351
      let color = '#00FF7F'
      if (temperature >= 37.3) {
        color = '#DC143C'
      }
      let colorOption = [
        [range, color],
        [1, '#BEBEBE'] // 90%-100%处的颜色
      ]
      return colorOption
    },

完整代码如下

<template>
  <div class="main">
    <div id="myChart" :style="{width: '600px', height: '400px'}"></div>
    <button @click="changeGaugeView()">仪表盘</button>
    <button @click="changeTemp(35)">35&#176;C</button>
    <button @click="changeTemp(25)">25&#176;C</button>
    <button @click="changeTemp(40)">40&#176;C</button>
  </div>
</template>

<script>

export default {
  name: 'EchartsActivity',
  data () {
    return {
      tempture: 35.6,
      echart: null,
      // 仪表盘默认数据
      gaugeOption: {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '70%'],
            min: 20,
            max: 50,
            splitNumber: 3, // 仪表盘被分割成3段
            startAngle: 180, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [
                  // 表盘颜色
                  [0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']
                ],
                width: 25 // 表盘宽度默认30
              }
            },
            splitLine: {
              // 分割线样式（及10、20等长线样式）
              length: 30,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 2
              }
            },
            axisTick: {
              // 刻度线样式（及短线样式）
              length: 15,
              splitNumber: 6
            },
            // 坐标轴刻度
            axisLabel: {
              color: 'black',
              distance: -50 // 文字离表盘的距离
            },
            pointer: {
              show: true // 指针控制
            },
            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: 'black', // 文字的颜色,默认 auto。
              fontSize: 20, // 文字的字体大小,默认 15。
              formatter: '{value}°C', // 格式化函数或者字符串
              height: 20,
              rich: {
                score: {
                  color: 'white',
                  fontFamily: '微软雅黑',
                  fontSize: 32
                }
              }
            },
            data: [
              {
                value: 35,
                name: '体温',
                label: {
                  textStyle: {
                    fontSize: 10
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      this.echart = this.$echarts.init(document.getElementById('myChart'))
    },
    changeGaugeView () {
      this.$nextTick(() => {
        this.echart.clear()
        this.echart.setOption(this.gaugeOption)
      })
    },
    // 更新仪表盘样式
    updateRangeAndColor (temperature) {
      let range = (temperature - 21) * 0.0351
      let color = '#00FF7F'
      if (temperature >= 37.3) {
        color = '#DC143C'
      }
      let colorOption = [
        [range, color],
        [1, '#BEBEBE'] // 90%-100%处的颜色
      ]
      return colorOption
    },
    changeTemp (temp) {
      this.tempture = temp
      let colorOption = this.updateRangeAndColor(this.tempture)
      let option = {
        series: [
          {
            type: 'gauge',
            radius: '90%',
            center: ['50%', '70%'],
            min: 20,
            max: 50,
            splitNumber: 3,
            startAngle: 180, // 仪表盘起始角度,默认 225。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            endAngle: 0,
            axisLine: {
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: colorOption,
                width: 25 // 表盘宽度默认30
              }
            },
            splitLine: {
              // 分割线样式（及10、20等长线样式）
              length: 30,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 2
              }
            },
            axisTick: {
              // 刻度线样式（及短线样式）
              length: 15,
              splitNumber: 6
            },
            // 坐标轴刻度
            axisLabel: {
              // 文字样式（及“10”、“20”等文字样式）
              color: 'black',
              distance: -50 // 文字离表盘的距离
            },
            pointer: {
              show: false
            },
            detail: {
              // 仪表盘详情，用于显示数据。
              show: true, // 是否显示详情,默认 true。
              offsetCenter: [0, 0], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
              color: 'black', // 文字的颜色,默认 auto。
              fontSize: 20, // 文字的字体大小,默认 15。
              // formatter: '{value}%', // 格式化函数或者字符串
              // formatter: '{score|{value}%}',
              formatter: '{value}°C', // 格式化函数或者字符串
              height: 20,
              rich: {
                score: {
                  color: 'white',
                  fontFamily: '微软雅黑',
                  fontSize: 32
                }
              }
            },
            data: [
              {
                value: this.tempture,
                name: '体温',
                label: {
                  textStyle: {
                    fontSize: 10
                  }
                }
              }
            ]
          }
        ]
      }
      this.$nextTick(() => {
        this.echart.clear()
        this.echart.setOption(option)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

效果如下