修改

whycwx

2021-03-22 bfd192a0f909c90b41edb1318e2671b449f092ab

修改

 src/assets/js/charts/persons/wangxuan.js

@@ -65,7 +65,12 @@
        x: 0.35,
        y: 0.35,
        type: 'dischargeCircuit',
        setData:{}
        setData:{
            xAxisData:['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
            maxYAxis:[50,50,50,50,50],
            xData:[30,19,"37%",44,"25%"],
            data:[30,19,37,44,25]
        }
    }
},
{

 src/components/charts/dischargeCircuit.vue

@@ -12,6 +12,7 @@
export default {
  name: "dischargeCircuit",
  chart: "",
  chartData: {},
  props: {
    id: {
      require: true,
@@ -44,18 +45,58 @@
    setOption(opt) {
      this.$options.discharge.setOption(opt);
    },
    setData() {
    setData(dataList) {
        let self = this;
        let xAxisData = [];//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例']
        let maxYAxis = [];
        let xData =[];
        let data = [];
            // 存值
            self.$options.chartData = dataList;
            if(!dataList){
                self.$axios({
                    method:"get",
                    url:"/batteryAlarm/dischargeAnalysis",
                    params:null

                }).then(res=>{
                    if(res.data.code == 1){
                        let result = res.data.data;
                            for (const key in result) {
                                xAxisData.push(key);
                                xData.push(result[key]);
                                if(typeof(result[key]) == 'string'){
                                    data.push(parseFloat(result[key].replace(/%/g,"")));
                                }else{
                                    data.push(result[key]);
                                }
                            }
                        let maxInt = Math.max.apply(null,data) + 100;
                            data.forEach(() => {
                                maxYAxis.push(maxInt);
                            });
                            self.optionSet(xAxisData,maxYAxis,xData,data,);
                            console.log(xAxisData,data)
                    }
                })
            }else{
                self.optionSet(dataList.xAxisData,dataList.maxYAxis,dataList.xData,dataList.data);
            }
    
    },
    // 图表配置
    optionSet(xAxisData,maxYAxis,xData,data){
    var option = {
            grid: {
                left: '10%',
                right: '5%',
                left: '15%',
                right: '15%',
                bottom: '10%',
                top: '17%',
                z: 22
            },
            xAxis: [
                {
                    //左侧柱状图的x轴
                    //左侧柱状图的x轴    下X轴
                    type: 'category',
                    gridIndex: 0,//y轴所在的 grid 的索引
                    // boundaryGap: false,
@@ -76,11 +117,11 @@
                            fontSize: '12'
                        }
                    },
                    data: ['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                    data: xAxisData//['低告警数量', '告警机房总数', '告警机房数比例', '告警总数','告警总数比例'],
                    // inverse: true, //反转
                },
                {
                    // 左侧柱状图的Y轴
                    // 左侧柱状图的Y轴        上X轴
                    gridIndex: 0,//y轴所在的 grid 的索引
                    splitLine: 'none',
                    axisTick: 'none',
@@ -99,11 +140,17 @@
                        return colorList[index];
                        },
                    },
                    data: [555,444,333,222,666],
                    data: xData//[555,444,333,222,666],
                },
                ],
            yAxis: {
                //坐标轴
            yAxis: [
                {
                //坐标轴  左Y轴
                type: 'value',
                // name: '数值',
                min: 0,
                max: maxYAxis[0],
                // interval: 300,
                axisLine: {
                    show: false,
                    // y坐标线样式
@@ -132,15 +179,31 @@
                    }
                }
            },
                
            
            {//右Y轴
                type: 'value',
                // name: '比例',
                min: 0,
                max: 100,
                // interval: 10,
                axisLabel: {
                    formatter: '{value} %'
                },
                //分格线
                splitLine: {
                    show:false,
                    lineStyle: {
                        color: '#000'
                    }
                }
            }
            ],
            series: [
                {
                    name: '低告警数量',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [555,0,0,0,0],
                    data: [data[0],0,0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -160,7 +223,7 @@
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,444,0,0,0],
                    data: [0,data[1],0,0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -179,8 +242,8 @@
                    name: '告警机房数比例',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,333,0,0],
                    yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,data[2],0,0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -198,9 +261,9 @@
                {
                    name: '告警总数',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,222,0],
                    data: [0,0,0,data[3],0],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -218,9 +281,9 @@
                {
                    name: '告警总数比例',
                    type: 'bar',
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,0,666],
                    // xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 1,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    data: [0,0,0,0,data[4]],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -241,7 +304,7 @@
                    xAxisIndex: 0,//使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
                    yAxisIndex: 0,//使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
                    barGap: '-1',
                    data: [1800,1800, 1800,1800,1800],
                    data: maxYAxis,//[1800,1800, 1800,1800,1800],
                    barWidth: 15,
                    itemStyle: {
                        normal: {
@@ -256,6 +319,7 @@
                    type: 'pictorialBar',
                    // symbol: '../../assets/logo copy.png',
                    symbolSize: [30,-30],
                    yAxisIndex: 0,
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        'rgba(220,58,123,0.4)', 'rgba(234,167,116,0.4)'
                    ].map((color, offset) => ({
@@ -264,7 +328,7 @@
                    }))),
                    z: 12,
                    data: [{
                        value: 555,
                        value: data[0],
                        symbolPosition: 'end'
                    },{
                        value: 0,
@@ -279,9 +343,11 @@
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                },
                {
                    name: '告警机房总数',
                    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],
                    color:new echarts.graphic.LinearGradient(0, 1, 0, 0, [
@@ -295,7 +361,7 @@
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 444,
                        value: data[1],
                        symbolPosition: 'end'
                    },{
                        value: 0,
@@ -307,8 +373,10 @@
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                },
                {
                    name: '告警机房数比例',
                    yAxisIndex: 1,
                    type: 'pictorialBar',
                    // 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],
@@ -326,7 +394,7 @@
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 333,
                        value: data[2],
                        symbolPosition: 'end'
                    },{
                        value: 0,
@@ -335,11 +403,13 @@
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                },
                {
                    name: '告警总数',
                    type: 'pictorialBar',
                    // 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)'
                    ].map((color, offset) => ({
@@ -357,15 +427,17 @@
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 222,
                        value: data[3],
                        symbolPosition: 'end'
                    },{
                        value: 0,
                        symbolPosition: 'end'
                    }]
                },{
                },
                {
                    name: '告警总数比例',
                    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, [
@@ -388,7 +460,7 @@
                        value: 0,
                        symbolPosition: 'end'
                    },{
                        value: 666,
                        value: data[4],
                        symbolPosition: 'end'
                    }]
                },
@@ -400,7 +472,7 @@
        let self = this;
            setTimeout(function(){
                self.$options.discharge.resize();
                self.setData(null);
                self.setData(self.$options.chartData);
            })
    }
  },

 src/components/charts/monomerVoltage.vue

@@ -45,7 +45,6 @@
      this.$options.chart.setOption(opt);
    },
    setData(dataList) {
      console.log(dataList)
        let self = this;
        let legendData = [];
        let yAxisData = [];