添加图表

whycwx

2021-03-16 f9e2141e281f3e185989ba50001eb30c1c9e363f

添加图表

 src/assets/images/dischargeCircuit.png

 src/assets/images/histogramAlternating.png

 src/assets/images/monomerVoltage.png

 src/assets/js/charts/index.js

@@ -1,9 +1,10 @@
import zengyvkai from "@/assets/js/charts/persons/zengyvkai";
import huodongwei from "@/assets/js/charts/persons/huodongwei";
import wangxuan from "@/assets/js/charts/persons/wangxuan";

let modularTitle = [...zengyvkai.modularTitle,...huodongwei.modularTitle];
let modularBg = [...zengyvkai.modularBg];
let modularData = [...zengyvkai.modularData];
let modularData = [...zengyvkai.modularData,...wangxuan.modularData];

export default {
    modularTitle,

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

@@ -0,0 +1,62 @@

let modularTitle = [];
let modularBg = [];
let modularData = [{
    img: require("@/assets/images/histogramAlternating.png"),
    chartData: {
        name: '交流ABC',
        id: 11,
        w: 0.635,
        h: 0.35,
        x: 0.35,
        y: 0.35,
        type: 'histogramAlternating',
        setData:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
        }
    }
},{
    img: require("@/assets/images/monomerVoltage.png"),
    chartData: {
        name: '单体电压、内阻温度',
        id: 12,
        w: 0.635,
        h: 0.35,
        x: 0.35,
        y: 0.35,
        type: 'monomerVoltage',
        setData:{}
    }
},{
    img: require("@/assets/images/dischargeCircuit.png"),
    chartData: {
        name: '放电电流',
        id: 13,
        w: 0.635,
        h: 0.35,
        x: 0.35,
        y: 0.35,
        type: 'dischargeCircuit',
        setData:{}
    }
},
{
    img: require("@/assets/images/monomerVoltage.png"),
    chartData: {
        name: '地图',
        id: 14,
        w: 0.635,
        h: 0.35,
        x: 0.35,
        y: 0.35,
        type: 'chinaMap',
        setData:{}
    }
},
]
export default {
    modularTitle,
    modularBg,
    modularData,
};

 src/components/charts/chinaMap.vue

@@ -42,8 +42,9 @@
  },
  methods: {
    setOption(opt) {
        // 设置配置项
        this.$options.chart.setOption(opt);
            // 设置配置项
            this.$options.chart.setOption(opt);
        
    },
    setData(data) {
        console.log(data);
@@ -321,7 +322,12 @@
        this.setOption(option);
    },
    resize() {
      this.$options.chart.resize();
        let self = this;
        setTimeout(() => {
          self.$options.chart.resize();
          self.setData(null);
        }, 300)
    //   this.$options.chart.resize();
    }
  },
  mounted() {

 src/components/charts/dischargeCircuit.vue

@@ -397,7 +397,11 @@
        this.setOption(option);
    },
    resize() {
      this.$options.discharge.resize();
        let self = this;
            setTimeout(function(){
                self.$options.discharge.resize();
                self.setData(null);
            })
    }
  },
  mounted() {

 src/components/charts/histogramAlternating.vue

@@ -1,5 +1,5 @@
<template>
  <div class="echarts-wrapper echartsAlternating">
  <div class="echarts-wrapper echartsAlternating" ref="echartsAlternating">
    <div class="echarts-content" ref="alternating">

    </div>
@@ -41,24 +41,43 @@
  },
  data() {
    return {

        opt:null
    }
  },
  methods: {
    setOption(opt) {
        console.log(opt)
      this.$options.chart.setOption(opt);
    },
    setData(data) {
        let self = this;
        if(data){
            self.opt = data;
        }
        /*
        // 统计数据
        data:{
            dataList:[32, 43, 17, 27],
            dataName:['过压数量', '欠压数量', '缺项数量', '过流数量']
        }
        */ 
        
    const sideData = data.dataList.map(item => item + 2.5);//右边的面稍高一点

        */
    // const sideData = data.dataList.map(item => item + 1);//右边的面稍高一点
    console.log(this.$refs.echartsAlternating.offsetHeight);
    let domHeight = this.$refs.echartsAlternating.offsetHeight;
    // 调试右侧柱子高度
    let floatNumber = 2.5;
        if(domHeight<176){
            floatNumber = 4.5
        }
        if(domHeight>175 && domHeight<326){
            floatNumber = 2.5
        }
        if(domHeight>326 && domHeight<426){
            floatNumber = 1.8
        }
        if(domHeight>425){
            floatNumber = 1.2;
        }
    let option = {
            // backgroundColor: "#ffffff",
            tooltip: {
@@ -76,7 +95,7 @@
                z: 22
            },
            xAxis: {
                data: data.nameList,
                data: self.opt.dataName,
                //坐标轴
                axisLine: {
                    lineStyle: {
@@ -139,12 +158,23 @@
                                color: "rgba(90,100,248,0.4)", // 100% 处的颜色 5A64F8
                            }], false),
                        },
                        data: [
                            { value: 32, xAxis: 0, yAxis: 34},
                            { value: 43, xAxis: 1, yAxis: 45},
                            { value: 17, xAxis: 2, yAxis: 19},
                            { value: 27, xAxis: 3, yAxis: 29},
                        ]
                        // data: [
                        //     { value: 32, xAxis: 0, yAxis: 34},
                        //     { value: 43, xAxis: 1, yAxis: 45},
                        //     { value: 17, xAxis: 2, yAxis: 19},
                        //     { value: 27, xAxis: 3, yAxis: 29},
                        // ]
                        data:function(){
                            let thisArr = self.opt.dataList.map((item,index)=>{
                                                let opt = {
                                                    value:item,
                                                    xAxis:index,
                                                    yAxis:item + 2 //椭圆的坐标
                                                }
                                                return opt;
                                            })
                                return thisArr;
                        }()
                    },
                itemStyle: {
                    normal: {
@@ -157,9 +187,9 @@
                        }], false)
                    }
                },
                data: data.dataList,
                data: self.opt.dataList,
                barGap: 0
            }, {
            }, {//侧右边配置
                type: 'bar',
                barWidth: 6.5,
                itemStyle: {
@@ -174,8 +204,15 @@
                    }
                },
                barGap: 0,
                data: sideData
            }, {
                data: function(){
                    const sideData = self.opt.dataList.map(item =>{
                         item = item + floatNumber;
                         return item;
                    });//右边的面稍高一点
                    return sideData;
                }()
            }, 
            {//盖子的配置
                name: 'b',
                tooltip: {
                    show: false
@@ -186,19 +223,26 @@
                    borderColor: '#00B6EE',
                    color: '#00B6EE'
                },
                // symbol: 'rect',
                // symbolOffset: [0, '-45%'],
                // symbolSize: [barWidth, barWidth],
                symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
                symbolSize: ['30', '12'],
                symbolOffset: ['0', '-12'],
                //symbolRotate: -5,
                // symbolRotate: -45,
                symbolPosition: 'end',
                data: data.dataList,
                data: self.opt.dataList,
                z: 3
            }]
            }
            ]
        };
        this.setOption(option);
    },
    resize() {
      this.$options.chart.resize();
      setTimeout(() => {
          this.$options.chart.resize();
          this.setData(null);
        }, 300)
    }
  },
  mounted() {
@@ -236,7 +280,7 @@
    }
    .titleShow .textTitle{
        display: inline-block;
        width: 92px;
        width: 120px;
        text-align: right;
        font-size: 12px;
        color: rgb(0,178,224);

 src/components/charts/monomerVoltage.vue

@@ -37,12 +37,11 @@
  },
  data() {
    return {

    }
  },
  methods: {
    setOption(opt) {
      this.$options.monomerVoltage.setOption(opt);
      this.$options.chart.setOption(opt);
    },
    setData() {
        let option = {
@@ -139,12 +138,17 @@
            this.setOption(option);
    },
    resize() {
      this.$options.monomerVoltage.resize();
      let self = this;
      setTimeout(function(){
        self.$options.chart.resize();
        self.setData(null);
      },300)
      
    }
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.$options.monomerVoltage = echarts.init(this.$refs.monomerVoltage);
    this.$options.chart = echarts.init(this.$refs.monomerVoltage);

    window.addEventListener('resize', this.resize);
  },