内容提交

whychdw

2021-04-12 b8f8ebfe507a68bc450b5384688c028b9b745e07

内容提交

 src/components/chart/PieChartFill.vue

@@ -1,211 +1,213 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
    <div class="echarts-footer">
      <p>{{ text1 }}</p>
      <p>{{ text2 }}</p>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-footer">
            <p>{{ text1 }}</p>
            <p>{{ text2 }}</p>
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "PieChartFill",
  chart: "",
  props: {
    bgColor: {
      type: String,
      default: '#F2535F'
    },
    text1: {
      type: String,
      default: ''
    },
    text2: {
      type: String,
      default: ''
    },
    unit: {
      type: String,
      default: ''
    },
    max: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
    },
    setData(data) {
      let bgColor = this.bgColor;
      let _pie3 = this.get_pie3();
      let unit = this.unit;
      let max = this.max;
      let option = {
        title: {
          show: true,
          x: 'center',
          y: 'center',
          text: data.value + unit,
          textStyle: {
            fontSize: 14,
            color: data.title.color,
          },
          zlevel: 10,
    name: "PieChartFill",
    chart: "",
    props: {
        bgColor: {
            type: String,
            default: '#F2535F'
        },
        angleAxis: {
          max: 100,
          clockwise: true, // 逆时针
          // 隐藏刻度线
          show: false
        text1: {
            type: String,
            default: ''
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
        text2: {
            type: String,
            default: ''
        },
        unit: {
            type: String,
            default: ''
        },
        max: {
            type: Number,
            default: 100,
        },
    },
    data() {
        return {}
    },
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        setData(data) {
            let bgColor = this.bgColor;
            let _pie3 = this.get_pie3();
            let unit = this.unit;
            let max = this.max;
            let option = {
                title: {
                    show: true,
                    x: 'center',
                    y: 'center',
                    text: data.value + unit,
                    textStyle: {
                        fontSize: 14,
                        color: data.title.color,
                    },
                    zlevel: 10,
                },
                angleAxis: {
                    max: 100,
                    clockwise: true, // 逆时针
                    // 隐藏刻度线
                    show: false
                },
                radiusAxis: {
                    type: 'category',
                    show: true,
                    axisLabel: {
                        show: false,
                    },
                    axisLine: {
                        show: false,

          },
          axisTick: {
            show: false
          },
                    },
                    axisTick: {
                        show: false
                    },
                },
                polar: {
                    center: ['50%', '50%'],
                    radius: ['82%', '92%'] //图形大小
                },
                series: [
                    {
                        type: "pie",
                        hoverAnimation: false,
                        radius: ['0', '100%'],
                        center: ["50%", "50%"],
                        avoidLabelOverlap: false,
                        zlevel: 1,
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        data: [{
                            value: 1,
                            itemStyle: {
                                normal: {
                                    color: bgColor,
                                }
                            }
                        }],
                    },
                    {
                        type: 'pie',
                        silent: true,
                        radius: ['87%', '89%'],
                        zlevel: 2,
                        label: {
                            normal: {
                                show: false
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: _pie3,
                    },
                    {
                        name: '',
                        zlevel: 3,
                        type: 'bar',
                        roundCap: true,
                        barWidth: 60,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'transparent',
                        },
                        data: [data.value / max * 100],
                        coordinateSystem: 'polar',
                        itemStyle: {
                            normal: {
                                color: "#fff",
                            }
                        }

                    },
                ]
            };

            // 设置配置项
            this.setOption(option);
        },
        polar: {
          center: ['50%', '50%'],
          radius: ['82%', '92%'] //图形大小
        },
        series: [
          {
            type: "pie",
            hoverAnimation: false,
            radius: ['0', '100%'],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            zlevel: 1,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [{
              value: 1,
              itemStyle: {
                normal: {
                  color: bgColor,
        get_pie3() {
            let dataArr = [];
            for (var i = 0; i < 50; i++) {
                if (i % 2 === 0) {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 25,
                        itemStyle: {
                            normal: {
                                color: "#fff",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                } else {
                    dataArr.push({
                        name: (i + 1).toString(),
                        value: 20,
                        itemStyle: {
                            normal: {
                                color: "rgba(0,0,0,0)",
                                borderWidth: 0,
                                borderColor: "rgba(0,0,0,0)"
                            }
                        }
                    })
                }
              }
            }],
          },
          {
            type: 'pie',
            silent: true,
            radius: ['87%', '89%'],
            zlevel: 2,
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _pie3,
          },
          {
            name: '',
            zlevel: 3,
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
              color: 'transparent',
            },
            data: [data.value / max * 100],
            coordinateSystem: 'polar',
            itemStyle: {
              normal: {
                color: "#fff",
              }
            }

          },
        ]
      };

      // 设置配置项
      this.setOption(option);
    },
    get_pie3() {
      let dataArr = [];
      for (var i = 0; i < 50; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "#fff",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
            return dataArr
        },
        resize() {
            this.$options.chart.resize();
        }

      }
      return dataArr
    },
    resize() {
      this.$options.chart.resize();
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);

    this.setData({
      title: {
        color: '#fff',
      },
      value: 0,
    });
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
        this.setData({
            title: {
                color: '#fff',
            },
            value: 0,
        });
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        // 销毁实例
        this.$options.chart.dispose();
        window.removeEventListener('resize', this.resize);
    }
}
</script>

<style scoped>
.echarts-footer {
  text-align: center;
  font-size: 12px;
    text-align: center;
    font-size: 12px;
}
</style>

 src/components/chart/ThreeTermsBar.vue

@@ -44,7 +44,6 @@
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
            this.resize();
        },
        setData(data) {
            this.$options.chartOption = data;
@@ -161,6 +160,8 @@
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        // 销毁实例
        this.$options.chart.dispose();
        window.removeEventListener('resize', this.resize);
    }
}

 src/components/chart/TwoLines.vue

@@ -1,249 +1,250 @@
<template>
  <div class="echarts-wrapper">
    <div class="echarts-content" ref="chart"></div>
    <div class="echarts-y-text one-text">Y轴单位(V)</div>
    <div class="echarts-y-text two-text">Y轴单位(A)</div>
  </div>
    <div class="echarts-wrapper">
        <div class="echarts-content" ref="chart"></div>
        <div class="echarts-y-text one-text">Y轴单位(V)</div>
        <div class="echarts-y-text two-text">Y轴单位(A)</div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "TwoLines",
  chart: '',
  data() {
    return {}
  },
  methods: {
    setOption(opt) {
      this.$options.chart.setOption(opt);
      this.resize();
    name: "TwoLines",
    chart: '',
    data() {
        return {}
    },
    setData(data) {
      let option = {
        legend: {},
        tooltip: {
          trigger: 'axis'
    methods: {
        setOption(opt) {
            this.$options.chart.setOption(opt);
        },
        xAxis: [
          {
            type: 'category',
            gridIndex: 0,
            axisLine: {
              lineStyle: {
                color: "#2D67B6"
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2D67B6'
              },
            },
            axisLabel: {
              color: '#3E88DF',
              interval: 0,
            },
            boundaryGap: false,
          },
          {
            type: 'category',
            gridIndex: 1,
            axisLine: {
              lineStyle: {
                color: "#2D67B6"
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2D67B6'
              },
            },
            axisLabel: {
              color: '#3E88DF',
              interval: 0,
            },
            boundaryGap: false,
          }
        ],
        yAxis: [
          {
            gridIndex: 0,
            min: 0,
            max: 100,
            axisLine: {
              lineStyle: {
                color: "#2D67B6"
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2D67B6'
              },
            },
          },
          {
            gridIndex: 1,
            min: 0,
            max: 30,
            axisLine: {
              lineStyle: {
                color: "#2D67B6"
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: '#2D67B6'
              },
            },
          }
        ],
        grid: [
          {
            top: '20%',
            left: '5%',
            right: '3%',
            bottom: '55%'
          },
          {
            top: '65%',
            left: '5%',
            right: '3%',
            bottom: "10%"
          }
        ],
        series: [
          // These series are in the first grid.
          {
            type: 'line',
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: "#F79F41",
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: true,
              position: 'top',
              color: "#fff",
              formatter: function (params) {
                return params.value[1] + 'V';
              }
            },
            data: data.data1
          },
          // These series are in the second grid.
          {
            type: 'line',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbol: 'circle',
            symbolSize: 6,
            itemStyle: {
              color: "#F2545F",
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: true,
              position: 'top',
              color: "#fff",
              formatter: function (params) {
                return params.value[1] + 'A';
              }
            },
            data: data.data2
          },
        ]
      };
        setData(data) {
            let option = {
                legend: {},
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [
                    {
                        type: 'category',
                        gridIndex: 0,
                        axisLine: {
                            lineStyle: {
                                color: "#2D67B6"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2D67B6'
                            },
                        },
                        axisLabel: {
                            color: '#3E88DF',
                            interval: 0,
                        },
                        boundaryGap: false,
                    },
                    {
                        type: 'category',
                        gridIndex: 1,
                        axisLine: {
                            lineStyle: {
                                color: "#2D67B6"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2D67B6'
                            },
                        },
                        axisLabel: {
                            color: '#3E88DF',
                            interval: 0,
                        },
                        boundaryGap: false,
                    }
                ],
                yAxis: [
                    {
                        gridIndex: 0,
                        min: 0,
                        max: 100,
                        axisLine: {
                            lineStyle: {
                                color: "#2D67B6"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#2D67B6'
                            },
                        },
                    },
                    {
                        gridIndex: 1,
                        min: 0,
                        max: 30,
                        axisLine: {
                            lineStyle: {
                                color: "#2D67B6"
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#2D67B6'
                            },
                        },
                    }
                ],
                grid: [
                    {
                        top: '20%',
                        left: '5%',
                        right: '3%',
                        bottom: '55%'
                    },
                    {
                        top: '65%',
                        left: '5%',
                        right: '3%',
                        bottom: "10%"
                    }
                ],
                series: [
                    // These series are in the first grid.
                    {
                        type: 'line',
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: "#F79F41",
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: "#fff",
                            formatter: function (params) {
                                return params.value[1] + 'V';
                            }
                        },
                        data: data.data1
                    },
                    // These series are in the second grid.
                    {
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        symbol: 'circle',
                        symbolSize: 6,
                        itemStyle: {
                            color: "#F2545F",
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: "#fff",
                            formatter: function (params) {
                                return params.value[1] + 'A';
                            }
                        },
                        data: data.data2
                    },
                ]
            };

      // 设置配置项
      this.setOption(option);
            // 设置配置项
            this.setOption(option);
        },
        resize() {
            this.$options.chart.resize();
        }
    },
    resize() {
      this.$options.chart.resize();
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        this.$options.chart = echarts.init(this.$refs.chart);
        let data1 = [
            ["支路1", 0],
            ["支路2", 0],
            ["支路3", 0],
            ["支路4", 0],
            ["支路5", 0],
            ["支路6", 0],
            ["支路7", 0],
            ["支路8", 0],
            ["支路9", 0],
            ["支路10", 0],
            ["支路11", 0],
            ["支路12", 0],
            ["支路13", 0],
            ["支路14", 0],
            ["支路15", 0],
            ["支路16", 0],
        ];
        let data2 = [
            ["支路1", 0],
            ["支路2", 0],
            ["支路3", 0],
            ["支路4", 0],
            ["支路5", 0],
            ["支路6", 0],
            ["支路7", 0],
            ["支路8", 0],
            ["支路9", 0],
            ["支路10", 0],
            ["支路11", 0],
            ["支路12", 0],
            ["支路13", 0],
            ["支路14", 0],
            ["支路15", 0],
            ["支路16", 0],
        ];
        this.setData({
            data1: data1,
            data2: data2
        });
        window.addEventListener('resize', this.resize);
    },
    destroyed() {
        // 销毁实例
        this.$options.chart.dispose();
        window.removeEventListener('resize', this.resize);
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.chart);
    let data1 = [
      ["支路1", 0],
      ["支路2", 0],
      ["支路3", 0],
      ["支路4", 0],
      ["支路5", 0],
      ["支路6", 0],
      ["支路7", 0],
      ["支路8", 0],
      ["支路9", 0],
      ["支路10", 0],
      ["支路11", 0],
      ["支路12", 0],
      ["支路13", 0],
      ["支路14", 0],
      ["支路15", 0],
      ["支路16", 0],
    ];
    let data2 = [
      ["支路1", 0],
      ["支路2", 0],
      ["支路3", 0],
      ["支路4", 0],
      ["支路5", 0],
      ["支路6", 0],
      ["支路7", 0],
      ["支路8", 0],
      ["支路9", 0],
      ["支路10", 0],
      ["支路11", 0],
      ["支路12", 0],
      ["支路13", 0],
      ["支路14", 0],
      ["支路15", 0],
      ["支路16", 0],
    ];
    this.setData({
      data1: data1,
      data2: data2
    });
    window.addEventListener('resize', this.resize);
  },
  destroyed() {
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>
.echarts-y-text {
  position: absolute;
  right: 16px;
  font-size: 12px;
  color: #1f66e7;
    position: absolute;
    right: 16px;
    font-size: 12px;
    color: #1f66e7;
}

.one-text {
  top: 10%;
    top: 10%;
}

.two-text {
  top: 55%;
    top: 55%;
}
</style>

 src/pages/dataTest/realTime.vue

@@ -2018,9 +2018,7 @@
        });

        // 屏幕缩放时触发
        window.addEventListener("resize", () => {
            this.resize();
        });
        window.addEventListener("resize", this.resize);

        // 监控是否已经切换到当前页面
        this.monitorPage();
@@ -2032,6 +2030,7 @@
        // });
    },
    destroyed() {
        window.removeEventListener('resize', this.resize);
        this.timer.stop();
    },
};

 src/pages/dataTest/realTimeForShanXi.vue

Diff too large