仪表盘

基础仪表盘

仪表盘（Gauge）也被称为拨号图表或速度表图，用于显示类似于速度计上的读数的数据，是一种拟物化的展示形式。 仪表盘是常用的商业智能（BI）类的图表之一，可以轻松展示用户的数据，并能清晰地看出某个指标值所在的范围

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      var data = [
        {
          name: "完成率(%)",
          value: 50,
        },
      ];
      var option = {
        //指定图表的配置项和数据
        title: {
          text: "项目实际完成率(%)",
          x: "center",
          y: 25,
          textStyle: {
            color: "blue",
            fontSize: 20,
          },
        },
        series: [
          {
            name: "单仪表盘示例", //设置系列名称，用于tooltip的显示，legend的图例筛选
            type: "gauge", //设置系列类型
            radius: "80%", //设置参数：number，string，仪表盘半径，默认75%
            startAngle: 225, //设置仪表盘起始角度，默认225
            endAngle: -45, //设置仪表盘结束角度，默认-45
            clockwise: true, //设置仪表盘刻度是否是顺时针增长，默认true
            min: 0, //设置最小的数据值，默认0，映射到minAngle
            max: 100, //设置最大的数据值，默认100，映射到maxAngle
            splitNumber: 10, //设置仪表盘刻度的分割段数，默认10
            axisLine: {
              //设置仪表盘轴线(轮廓线)相关配置
              show: true, //设置是否显示仪表盘轴线(轮廓线)，默认true
              lineStyle: {
                //设置仪表盘轴线样式
                color: [
                  [0.2, "rgba(255,0,0,1)"],
                  [0.8, "rgba(0,255,255,1)"],
                  [1, "rgba(0,255,0,1)"],
                ], //设置仪表盘的轴线可以被分成不同颜色的多段
                opacity: 1, //设置图形透明度，支持从0到1的数字，为0时不绘制该图形
                width: 30, //设置轴线宽度，默认30
              },
            },
            splitLine: {
              //设置分隔线样式
              show: true, //设置是否显示分隔线，默认true
              length: 20, //设置分隔线线长，支持相对半径的百分比，默认30
              lineStyle: {
                //设置分隔线样式
                color: "#f00", //设置线的颜色，默认#eee
                //设置图形透明度，支持从0到1的数字，为0时不绘制该图形
                opacity: 1,
                width: 1, //设置线度，默认2
                type: "solid", //设置线的类型，默认solid，此外还有dashed，dotted
              },
            },
            axisLabel: {
              //设置刻度标签
              show: true, //设置是否显示标签，默认true
              distance: 25, //设置标签与刻度线的距离，默认5
              color: "blue", //设置文字的颜色
              fontSize: 32, //设置文字的字体大小，默认5
            },
            pointer: {
              //设置仪表盘指针
              show: true, //设置是否显示指针，默认true
              //设置指针长度,可以是绝对值，也可是相对于半径的百分比，默认80%
              length: "70%",
              width: 10, //设置指针宽度，默认8
            },
            detail: {
              //设置仪表盘详情，用于显示数据
              show: true, //设置是否显示详情，默认true
              offsetCenter: [0, "50%"], //设置相对于仪表盘中心的偏移位置
              color: "inherit", //设置文字的颜色，默认auto
              fontSize: 30, //设置文字的字体大小，默认15
              formatter: "{value}%", //格式化函数或者字符串
            },
            data: data,
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};

汽车仪表盘

前面介绍的单仪表盘，相对比较简单，只能表示一类事物的范围情况。 如果需要同时表现几类不同事物的范围情况，那么应该使用多仪表盘进行展示。利用汽车的速度、发动机的转速、油表和水表的数据展示汽车的现状

import * as echarts from "echarts";
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!;
      if (chartDom == null) {
        return;
      }
      echarts.dispose(chartDom);
      var myChart = echarts.init(chartDom, "", { width: 800, height: 500 });
      var data = [
        {
          name: "完成率(%)",
          value: 50,
        },
      ];
      var option = {
        title: {
          //配置标题组件
          text: "汽车仪表盘",
          x: "center",
          y: 100,
          show: true, //设置是否显示标题，默认true
          textStyle: {
            color: "blue", //设置字体颜色，默认#333
            fontSize: 20, //设置字体大小，默认15
          },
        },
        series: [
          //配置数据系列，共有4个仪表盘
          {
            //设置数据系列之1：速度
            name: "速度",
            type: "gauge",
            min: 0, //设置速度仪表盘的最小值
            max: 220, //设置速度仪表盘的最大值
            splitNumber: 11, //设置速度仪表盘的分隔数目为22
            radius: "50%", //设置速度仪表盘的大小
            data: [{ value: 40, name: "车速(km/h)" }],
          },
          {
            //设置数据系列之2：转速
            name: "转速",
            type: "gauge",
            center: ["20%", "55%"], //设置转速仪表盘中心点的位置，默认全局居中
            radius: "35%", //设置转速油表仪表盘的大小
            min: 0, //设置转速仪表盘的最小值
            max: 7, //设置转速仪表盘的最大值
            endAngle: 45,
            splitNumber: 7, //设置转速仪表盘的分隔数目为7
            title: { offsetCenter: [0, "-30%"] },
            data: [
              {
                value: 1.5,
                name: "转速",
              },
            ],
          },
          {
            //设置数据系列之3：油表
            name: "油表",
            type: "gauge",
            center: ["77%", "50%"], //设置油表仪表盘中心点的位置，默认全局居中
            radius: "25%", //设置油表仪表盘的大小
            min: 0, //设置油表仪表盘的最小值
            max: 2, //设置油表仪表盘的最小值
            startAngle: 135,
            endAngle: 45,
            splitNumber: 2, //设置油表的分隔数目为2
            axisLabel: {
              formatter: function (v: any) {
                switch (v + "") {
                  case "0":
                    return "E";
                  case "1":
                    return "油表";
                  case "2":
                    return "F";
                }
              },
            },
            title: { show: false },
            detail: { show: false },
            data: [{ value: 0.5, name: "gas" }],
          },
          {
            //设置数据系列之4：水表
            name: "水表",
            type: "gauge",
            center: ["77%", "50%"], //设置水表仪表盘中心点的位置，默认全局居中
            radius: "25%", //设置水表仪表盘的大小
            min: 0, //设置水表的最小值
            max: 2, //设置水表的最大值
            startAngle: 315,
            endAngle: 225,
            splitNumber: 2, //设置分隔数目
            axisLabel: {
              formatter: function (v: any) {
                switch (v + "") {
                  case "0":
                    return "H";
                  case "1":
                    return "水表";
                  case "2":
                    return "C";
                }
              },
            },
            title: { show: false },
            detail: { show: false },
            data: [{ value: 0.5, name: "gas" }],
          },
        ],
      };
      myChart.setOption(option);
    };
  },
};