vue echarts动态数据定时刷新

小鱼儿 2021-11-22 13:56 1231阅读 0赞

关键代码截图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWp1bmZlbg_size_16_color_FFFFFF_t_70][]

完整代码

<template>
      <div class="block">
        <div :class="className" :id="id" :style="{height:height,width:width}" />
      </div>
    </template>
    
    <script>
    import echarts from "echarts";
    import resize from "./mixins/resize";
    
    export default {
      mixins: [resize],
      props: {
        className: {
          type: String,
          default: "chart"
        },
        id: {
          type: String,
          default: "chart"
        },
        text: {
          type: String,
          default: "text"
        },
        value: {
          type: Number
        },
    
        max: {
          type: Number,
          default: 100
        },
    
        mid: {
          type: Number,
          default: 8
        },
    
        min: {
          type: Number,
          default: 0
        },
    
        midbule: {
          type: Number,
          default: 15
        },
    
        width: {
          type: String,
          default: "330px"
        },
        legendshow: {
          type: Boolean,
          default: false
        },
        height: {
          type: String,
          default: "330px"
        }
      },
    
      watch: {
        value: {
          handler(newVal, oldVal) {
            console.log("tag", newVal);
            console.log("oldVal: ", oldVal);
            this.option = {
              tooltip: {
                formatter: "{a} <br/>{b} : {c}kpa"
              },
    
              series: [
                {
                  name: " ",
                  type: "gauge",
                  min: this.min, // 最小的数据值,默认 0 。映射到 minAngle。
                  max: this.max, // 最大的数据值,默认 100 。映射到 maxAngle。
                  // startAngle: 180,
                  axisLine: {
                    // 坐标轴线
                    lineStyle: {
                      // 属性lineStyle控制线条样式
                      // color: [[0.2, "#c23531"], [0.8, "#63869e"], [1, "#91c7ae"]]
    
                      //        :min="60"
                      // :value="95"
                      // :mid="86"
                      // :midbule="95"
                      // :max="106"
    
                      color: [
                        [this.mid / this.max, "#c23531"],
                        [1 - (this.max - this.midbule) / this.max, "#63869e"],
                        [1, "#91c7ae"]
                      ]
                      // color: [
                      //   [(this.mid - this.min) / (this.max  - this.min), "#c23531"],
                      //   [1 - ( this.max - this.min)- (this.midbule -this.min) /( this.max - this.min), "#63869e"],
                      //   [1, "#91c7ae"]
                      //
                    }
                  },
    
                  title: {
                    show: true,
                    offsetCenter: [0, "80%"], // x, y，单位px
                    textStyle: {
                      color: "#hhh",
                      fontSize: 24
                    }
                  },
    
                  detail: { formatter: "{value}" },
                  data: [{ value: this.value, name: this.text }]
                }
              ]
            };
    
            this.chart.setOption(this.option);
          },
          deep: true //对象内部属性的监听，关键。
        }
      },
      data() {
        return {
          chart: null,
          option: {
            tooltip: {
              formatter: "{a} <br/>{b} : {c}kpa"
            },
    
            series: [
              {
                name: " ",
                type: "gauge",
                min: this.min, // 最小的数据值,默认 0 。映射到 minAngle。
                max: this.max, // 最大的数据值,默认 100 。映射到 maxAngle。
                // startAngle: 180,
                axisLine: {
                  // 坐标轴线
                  lineStyle: {
                    // 属性lineStyle控制线条样式
                    // color: [[0.2, "#c23531"], [0.8, "#63869e"], [1, "#91c7ae"]]
    
                    //        :min="60"
                    // :value="95"
                    // :mid="86"
                    // :midbule="95"
                    // :max="106"
    
                    color: [
                      [this.mid / this.max, "#c23531"],
                      [1 - (this.max - this.midbule) / this.max, "#63869e"],
                      [1, "#91c7ae"]
                    ]
                    // color: [
                    //   [(this.mid - this.min) / (this.max  - this.min), "#c23531"],
                    //   [1 - ( this.max - this.min)- (this.midbule -this.min) /( this.max - this.min), "#63869e"],
                    //   [1, "#91c7ae"]
                    //
                  }
                },
    
                title: {
                  show: true,
                  offsetCenter: [0, "80%"], // x, y，单位px
                  textStyle: {
                    color: "#hhh",
                    fontSize: 24
                  }
                },
    
                detail: { formatter: "{value}" },
                data: [{ value: this.value, name: this.text }]
              }
            ]
          }
        };
      },
      mounted() {
        this.initChart();
      },
      beforeDestroy() {
        if (!this.chart) {
          return;
        }
        this.chart.dispose();
        this.chart = null;
      },
      methods: {
        initChart() {
          this.chart = echarts.init(document.getElementById(this.id));
    
          this.chart.setOption(this.option);
        }
      }
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NhaWp1bmZlbg_size_16_color_FFFFFF_t_70]: /images/20211122/18bf86890df24f5983bf9873e2509342.png