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

最新推荐文章于 2024-07-24 17:16:26 发布

原创

最新推荐文章于 2024-07-24 17:16:26 发布 · 1.1k 阅读

7 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用ECharts库在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: