首页内容提交

whychdw

2020-08-20 b603467f88b85208c8c718f3e099d0200475a2af

首页内容提交

 src/components/chart/PieChart.vue

@@ -31,13 +31,12 @@
        }
    },
    methods:{
        setOption() {
        setOption(opt) {
            // 整体配置项
            let option = {
                title: {
                    // text: '某站点用户访问来源',
                    // subtext: '纯属虚构',
                    // left: 'center'
                },
                animation: false,
                color: this.getColor(opt),
                title: this.getTitle(opt),
                tooltip: {
                    trigger: 'item',
                    confine: true,
@@ -46,32 +45,46 @@
                legend: {
                    show: false,
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
                series: this.getSeries(opt)
            };
            
            // 设置配置项
            this.$G.chartManage.get(this.id).setOption(option);
        },
        getColor(opt) {     // 配置自定义颜色
            // 未配置自定义颜色
            if(!opt || !opt.color) {
                return []
            }

            return opt.color;
        },
        getTitle(opt) {     // 配置标题
            // 未配置标题
            if(!opt || !opt.title) {
                return {
                    show: false,
                };
            }

            // 返回标题
            return opt.title;
        },
        getSeries(opt) {    // 设置series
            // 未配置series
            if(!opt || !opt.series) {
                return {
                    show: false,
                };
            }

            // 设置配置项
            let series = opt.series.map(item=>{
                item.type='pie';
                item.radius = "55%";
                item.center = ['50%', '60%'];
                return item;
            });
            return series;
        }
    },
    mounted() {
@@ -80,7 +93,17 @@
        // 将图表添加到图表管理
        this.$G.chartManage.set(this.id, chart);
        // 设置配置项
        this.setOption();
        this.setOption({
            title: {
                text: '数据初始化',
            },
            series:[{
                name: '初始化',
                data:[
                    {value: 0, name: '初始化数据'}
                ]
            }]
        });
    }
}
</script>

 src/pages/index.vue

@@ -12,19 +12,19 @@
            <div ref="map" class="map-content"></div>
        </div>
        <content-box title="站点列表" 
        slot="footer" style="width:320px" no-header>
        slot="footer" style="width:380px" no-header>
            <div class="pie-list">
                <div class="pie-item">
                    <pie-chart id="chart1"></pie-chart>
                    <pie-chart ref="chart1" id="chart1"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart id="chart2"></pie-chart>
                    <pie-chart ref="chart2" id="chart2"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart id="chart3"></pie-chart>
                    <pie-chart ref="chart3" id="chart3"></pie-chart>
                </div>
                <div class="pie-item">
                    <pie-chart id="chart4"></pie-chart>
                    <pie-chart ref="chart4" id="chart4"></pie-chart>
                </div>
            </div>
        </content-box>
@@ -36,9 +36,8 @@
import ContentBox from '../components/ContentBox'
import MyElTree from '../components/MyElTree'
import PieChart from '../components/chart/PieChart'
import { setInterval } from 'timers';

let map;
let map, chart1, chart2, chart3, chart4;
export default {
    components: {
        ContentBox,
@@ -109,13 +108,95 @@
        nodeClick(data) {
            console.log(data);
        },
        initChart() {
            // 饼状图1
            chart1 = {
                //红，蓝，绿
                color: ['#FF0000', '#1E90FF', '#00FF00'],
                title: {
                    text: '机房停电',
                },
                series:[{
                    name: '电池信息',
                    data:[
                        {value: 0, name: '机房停电'},
                        {value: 0, name: '机房掉站'},
                        {value: 0, name: '机房未停电'},
                    ]
                }]
            };

            // 饼状图2
            chart2 = {
                // 红,黄，绿，蓝
                color: ['#FF0000', '#FFD700', '#00FF00', '#1E90FF'],
                title: {
                    text: '机房续航能力',
                },
                series:[{
                    name: '电池信息',
                    data:[
                        {value: 0, name: '续航不足1小时'},
                        {value: 0, name: '续航不足1~2小时'},
                        {value: 0, name: '续航不足2~3小时'},
                        {value: 0, name: '续航3小时以上'},
                    ]
                }]
            };

            // 饼状图3
            chart3 = {
                // 红, 黄，绿，紫色
                color: ['#FF0000', '#FFD700', '#00FF00', '#BA55D3'],
                title: {
                    text: '电池状态',
                },
                series:[{
                    name: '电池信息',
                    data:[
                        {value: 0, name: '放电'},
                        {value: 0, name: '充电'},
                        {value: 0, name: '浮充'},
                        {value: 0, name: '均充'},
                    ]
                }]
            };

            // 饼状图4
            chart4 = {
                // 红, 深蓝色, 蓝，浅红，绿, 黄
                color: ['#FF0000', '#00008B', '#1E90FF', '#F08080', '#7CFC00','#FFD700'],
                title: {
                    text: '电池告警率',
                },
                series:[{
                    name: '电池信息',
                    data:[
                        {value: 0, name: '在线电压'},
                        {value: 0, name: '组端电压'},
                        {value: 0, name: '充电电流'},
                        {value: 0, name: '放电电流'},
                        {value: 0, name: '单体电压'},
                        {value: 0, name: '容量告警'},
                    ]
                }]
            };
            
            // 设置图表
            this.setChart();
        },
        setChart() {
            this.$refs.chart1.setOption(chart1);
            this.$refs.chart2.setOption(chart2);
            this.$refs.chart3.setOption(chart3);
            this.$refs.chart4.setOption(chart4);
        }
    },
    mounted() {
        // 初始化地图
        this.initMap();
        setInterval(()=>{
            console.log(sessionStorage.getItem('acTabs'));
        }, 2000);
        // 初始化饼状图
        this.initChart();
    }
}
</script>