修改为1s

whychdw

2020-07-14 213cedf27bf41fb1d0e5e925ab21e6e1edefa122

修改为1s

 src/assets/js/ChartManage.js

New file
@@ -0,0 +1,36 @@
function ChartManage() {

}
/**
 * [setChart description]
 *
 * @param   {String}  id     chart对象的id
 * @param   {Echarts}  chart  echarts对象
 */
ChartManage.prototype.set = function(id, chart) {
    // 检测window下是否有$$chartManage
    if(window.chartManage) {
        window.chartManage = {};
    }
    console.log(window);
    window.$$chartManage[id] = chart;
};

ChartManage.prototype.get = function(id) {
    if(window.$$chartManage && window.$$chartManage[id]) {
        return window.$$chartManage[id];
    }

    return -1;
};

ChartManage.prototype.del = function(id) {
    if(window.$$chartManage && window.$$chartManage[id]) {
        let chart = window.$$chartManage[id];
        // 销毁echarts
        chart.dispose();
        delete window.$$chartManage[id];
    }
};

export default ChartManage;

 src/assets/js/common.js

@@ -5,6 +5,7 @@
import getMaxFromArr from './getMaxFromArr' // 最大值
import hex_md5 from './hex_md5'
import isSetOption from './isSetOption'
import ChartManage from './ChartManage'

export {
    Timeout,
@@ -14,4 +15,5 @@
    getMaxFromArr,
    hex_md5,
    isSetOption,
    ChartManage,
}

 src/components/chart/LineChart.vue

@@ -32,9 +32,8 @@
import "./theme/transparent"

import {
    getMaxFromArr
    getMaxFromArr,
} from '../../assets/js/common.js'


export default {
    props: {
@@ -203,12 +202,12 @@
                option.title.subtext="";
            }
            // 绘制图表
            this.chart.setOption(option);
            this.$G.chartManage.get(this.id).setOption(option);
        },
        changeFullState: function() {
            this.isFull = this.isFull?false:true;
            this.$nextTick(()=>{
                this.chart.resize();
                this.$G.chartManage.get(this.id).resize();
            });
        },
        mouseEnter() {
@@ -216,7 +215,7 @@
                return false;
            }
            // 绘制图表
            this.chart.setOption({
            this.$G.chartManage.get(this.id).setOption({
                grid: {
                    bottom: '40px',
                },
@@ -231,7 +230,7 @@
            }
            this.dataZoom.show = false;
            // 绘制图表
            this.chart.setOption({
            this.$G.chartManage.get(this.id).setOption({
                grid: {
                    bottom: '1',
                },
@@ -254,20 +253,22 @@
    },
    mounted() {
        var ele = document.getElementById(this.id);
        this.chart = ECharts.init(ele, 'transparent');
        let chart = ECharts.init(ele, 'transparent');
        // 将图表添加到图表管理
        this.$G.chartManage.set(this.id, chart);
        // 设置配置
        this.setOption({});
        // 监听显示
        this.chart.on('showTip', (data)=>{
        chart.on('showTip', (data)=>{
            this.dataIndex = data.dataIndex;
            let option = this.chart.getOption();
            let option = this.$G.chartManage.get(this.id).getOption();
            this.history.time = option.xAxis[0].data[data.dataIndex-1];
            this.history.value = option.series[0].data[data.dataIndex-1];
        });
    },
    destroyed() {
        // 销毁echarts
        this.chart.dispose();
        this.$G.chartManage.del(this.id);
    },
}
</script>

 src/global/ChartManage.js

New file
@@ -0,0 +1,50 @@
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts"

function ChartManage() {
    this.charts = {};
}
/**
 * [setChart description]
 *
 * @param   {String}  id     chart对象的id
 * @param   {Echarts}  chart  echarts对象
 */
ChartManage.prototype.set = function(id, chart) {
    // 将id和chart绑定
    this.charts[id] = chart;
};

ChartManage.prototype.get = function(id) {
    return this.charts[id]?this.charts[id]:-1;
};

ChartManage.prototype.del = function(id) {
    let chart = this.get(id);
    if(chart != -1) {
        // 销毁echarts
        chart.dispose();
        delete this.charts[id];
    }
};

ChartManage.prototype.resize = function(id) {
    let chart = this.get(id);
    if(chart != -1) {
        chart.resize();
    }  
};

ChartManage.prototype.connect = function(ids) {
    let self = this;
    let groups = ids.map(function(id) {
        let chart = self.get(id);
        if(chart != -1) {
            return chart;
        }
    });

    ECharts.connect(groups);
}

export default new ChartManage();

 src/global/index.js

New file
@@ -0,0 +1,5 @@
import chartManage from './ChartManage'

export default {
    chartManage
};

 src/main.js

@@ -3,6 +3,7 @@
import router from './router'
import store from './store'
import config from './assets/js/config'
import G from './global'
import './api'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
@@ -57,6 +58,7 @@
};
// 挂载配置
Vue.prototype.$config = config;
Vue.prototype.$G = G;

new Vue({
    router,

 src/pages/batt-list/history-page.vue

@@ -91,7 +91,6 @@
<script>
// 引入 ECharts 主模块
import FlexLayout from '@/components/FlexLayout'
import ECharts from "echarts/lib/echarts"
import LineChart from '@/components/chart/LineChart'
import ChartConfigs from '@/components/chart/ChartConfigs'

@@ -342,19 +341,19 @@
                if(this.options[key].show) {
                    // 配置项初始化
                    this.$refs[key][0].setOption(this.options[key].option);
                    groups.push(this.$refs[key][0].chart);
                    groups.push(key);
                }
            }

            // 或者可以直接传入需要联动的实例数组
            ECharts.connect(groups);
            this.$G.chartManage.connect(groups);
        },
        resizeCharts() {
            // 设置配置项
            for(let key in this.options) {
                if(this.options[key].show) {
                    // 配置项初始化
                    this.$refs[key][0].chart.resize();
                    this.$G.chartManage.resize(key);
                }
            }
        },
@@ -487,6 +486,7 @@
        },
    },
    mounted() {
        console.log(this.$G);
        let self = this;
        // 查询事件类型
        this.changeOptions();

 src/pages/batt-list/real-time-page.vue

@@ -68,8 +68,6 @@
</template>

<script>
// 引入 ECharts 主模块
import ECharts from "echarts/lib/echarts";
import LineChart from '@/components/chart/LineChart'
import FlexLayout from '@/components/FlexLayout'
import ChartConfigs from '@/components/chart/ChartConfigs'
@@ -270,26 +268,26 @@
                if(this.options[key].show) {
                    // 配置项初始化
                    this.$refs[key][0].setOption(this.options[key].option);
                    groups.push(this.$refs[key][0].chart);
                    groups.push(key);
                }
            }

            // 或者可以直接传入需要联动的实例数组
            ECharts.connect(groups);
            this.$G.chartManage.connect(groups);
        },
        resizeCharts() {
            // 设置配置项
            for(let key in this.options) {
                if(this.options[key].show) {
                    // 配置项初始化
                    this.$refs[key][0].chart.resize();
                    this.$G.chartManage.resize(key);
                }
            }
        },
        startSearchRealData() {
            this.timer.start(()=>{
                this.searchRealData();
            }, 2000);
            }, 1000);
        },
        searchRealData() {
            var batt  = this.$store.state.batt;