图表调试

whycwx

2021-03-26 ef26b0e7839f00c7c6e67bad9d6b0724afc03df6

图表调试

 src/components/charts/dischargeCircuit.vue

@@ -38,7 +38,7 @@
  },
  data() {
    return {

        userId:""
    }
  },
  methods: {
@@ -57,7 +57,9 @@
                self.$axios({
                    method:"get",
                    url:"/batteryAlarm/dischargeAnalysis",
                    params:null
                    params:{
                        userId:self.userId
                    }

                }).then(res=>{
                    if(res.data.code == 1){
@@ -75,7 +77,7 @@
                            data.forEach(() => {
                                maxYAxis.push(maxInt);
                            });
                            self.optionSet(xAxisData,maxYAxis,xData,data,);
                            self.optionSet(xAxisData,maxYAxis,xData,data);
                            console.log(xAxisData,data)
                    }
                })
@@ -84,8 +86,17 @@
            }
    
    },
    // 获取对应数据
    getArrValue(value){
        let test = 0;
            if(value == "告警总数比例" || value == "告警机房数比例"){
                test = 1;
            }
            return test;
    },
    // 图表配置
    optionSet(xAxisData,maxYAxis,xData,data){
        let self = this;
        var option = {
            grid: {
                left: '15%',
@@ -117,7 +128,7 @@
                            fontSize: '12'
                        }
                    },
                    data: xAxisData//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                        data: xAxisData,//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                    // inverse: true, //反转
                },
                {
@@ -132,14 +143,15 @@
                        color:function (params,index) {
                        let colorList = [
                            "#EB6F49",
                            "#67E0E3",
                            "#FED601",
                            "#757EFA",
                            "#1A6AEF"
                                "#1A6AEF",
                                "#67E0E3",
                                "#FED601"
                        ];
                        return colorList[index];
                        },
                    },
                        // inverse: true, //反转
                    data: xData//[555,444,333,222,666],
                },
                ],
@@ -198,11 +210,12 @@
            }
            ],
            series: [
                    // 低告警数量
                {
                    name: '低告警数量',
                        name: xAxisData[0],
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [data[0],0,0,0,0],
                    barWidth: 15,
                    itemStyle: {
@@ -218,52 +231,13 @@
                    },
                    z: 2
                },
                    // 告警总数
                {
                    name: '告警机房总数',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,data[1],0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警机房数比例',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,data[2],0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                    'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                                ].map((color, offset) => ({
                                    color,
                                    offset
                                }))),
                            barBorderRadius:6
                        },
                    },
                    z: 2
                },
                {
                    name: '告警总数',
                        name: xAxisData[1],
                    type: 'bar',
                    // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,data[3],0],
                        yAxisIndex: self.getArrValue(xAxisData[1]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,data[1],0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -278,12 +252,13 @@
                    },
                    z: 2
                },
                    // 告警总数比例
                {
                    name: '告警总数比例',
                        name: xAxisData[2],
                    type: 'bar',
                    // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,0,data[4]],
                        yAxisIndex: self.getArrValue(xAxisData[2]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,data[2],0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -298,6 +273,49 @@
                    },
                    z: 2
                },
                    // 告警机房总数
                    {
                        name: xAxisData[3],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex:self.getArrValue(xAxisData[3]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,0,data[3],0],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(101,179,173,1)', 'rgba(158,255,218,1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 告警机房数比例
                    {
                        name: xAxisData[4],
                        type: 'bar',
                        xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                        yAxisIndex: self.getArrValue(xAxisData[4]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                        data: [0,0,0,0,data[4]],
                        barWidth: 15,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        'rgba(220,101,2,1)', 'rgba(253, 191, 25, 1)'
                                    ].map((color, offset) => ({
                                        color,
                                        offset
                                    }))),
                                barBorderRadius:6
                            },
                        },
                        z: 2
                    },
                    // 外框
                {
                    name: '外框',
                    type: 'bar',
@@ -314,12 +332,13 @@
                    },
                    z: 0
                },
                    // 低告警数量
                {
                    name: '低告警数量',
                        name: xAxisData[0],
                    type: 'pictorialBar',
                    // symbol: '../../assets/logo copy.png',
                    symbolSize: [30,-30],
                    yAxisIndex: 0,
                        yAxisIndex: self.getArrValue(xAxisData[0]),//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                    ].map((color, offset) => ({
@@ -344,14 +363,15 @@
                        symbolPosition: 'end'
                    }]
                },
                    // 告警总数
                {
                    name: '告警机房总数',
                        name: xAxisData[1],
                    type: 'pictorialBar',
                    yAxisIndex: 0,
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                        yAxisIndex: self.getArrValue(xAxisData[1]),
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                            'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
@@ -374,14 +394,15 @@
                        symbolPosition: 'end'
                    }]
                },
                    // 告警总数比例
                {
                    name: '告警机房数比例',
                    yAxisIndex: 1,
                        name: xAxisData[2],
                    type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[2]),
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                            'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
@@ -404,14 +425,15 @@
                        symbolPosition: 'end'
                    }]
                },
                    // 告警机房总数
                {
                    name: '告警总数',
                        name: xAxisData[3],
                    type: 'pictorialBar',
                        yAxisIndex: self.getArrValue(xAxisData[3]),
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    yAxisIndex: 0,
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(117,103,244,0.4)', 'rgba(156,178,255,0.4)'
                            'rgba(101,179,173,0.4)', 'rgba(158,255,218,0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
@@ -434,14 +456,15 @@
                        symbolPosition: 'end'
                    }]
                },
                    // 告警机房数比例
                {
                    name: '告警总数比例',
                        name: xAxisData[4],
                        yAxisIndex: self.getArrValue(xAxisData[4]),
                    type: 'pictorialBar',
                    yAxisIndex: 1,
                    // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
                    symbolSize: [30,-30],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(0,55,236,0.4)', 'rgba(0,123,196,0.4)'
                            'rgba(220,101,2,0.4)', 'rgba(253, 191, 25, 0.4)'
                    ].map((color, offset) => ({
                        color,
                        offset
@@ -464,6 +487,8 @@
                        symbolPosition: 'end'
                    }]
                },
                    
                    
            ]
        };
        this.setOption(option);
@@ -477,6 +502,8 @@
    }
  },
  mounted() {
      //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.discharge = echarts.init(this.$refs.dischargeCircuit);


 src/components/charts/histogramAlternating.vue

@@ -43,7 +43,8 @@
  data() {
    return {
        gjjfzs:0,
        gjjfsbl:0
        gjjfsbl:0,
        userId:""
    }
  },
  methods: {
@@ -62,7 +63,7 @@
                method:"get",
                url:"/powerAlarm/acABC",
                params:{
                    userId:"1001"
                    userId:self.userId
                }
            }).then(res=>{
                if(res.data.code == 1){
@@ -300,6 +301,8 @@
    }
  },
  mounted() {
    //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.alternating);


 src/components/charts/monomerVoltage.vue

@@ -38,6 +38,7 @@
  },
  data() {
    return {
      userId:""
    }
  },
  methods: {
@@ -55,7 +56,9 @@
              self.$axios({
                method:"get",
                url:"/batteryAlarm/monVRTAnalysis",
                params:null
                params:{
                  userId:self.userId
                }
              }).then(res=>{
                if(res.data.code == 1){
                  let result = res.data.data;
@@ -188,6 +191,8 @@
    }
  },
  mounted() {
    //   获取userId
    this.userId = localStorage.getItem("userId");
    // 基于准备好的dom，初始化echarts实例
    this.$options.chart = echarts.init(this.$refs.monomerVoltage);