提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  大数据

当前栏目

EChart处理三维数据做图表、多维legend图例处理

数据 处理 图表 三维 多维 图例 Echart
2023-09-11 14:19:55 时间

　　处理三维数据做图表，比如返回的数据就是一个个list，list里面某几个数据同属于一个维度，项目中的实例效果如下：

　　上面的khfx会有多个，比如db1、db2、db3等，下面的那些数据也会变化，目前需求就是做的下面的实现单选，可以使用echarts的legend的selectedMode实现，然后上面的db那些就是可以复选，默认全显示，选择之后就取消该条数据显示。也就是说相当于需要2层图例组件同时控制下面series的显示。

　　大值考虑的是下面的用legend的图例，然后上面的图例就自己手写，然后通过js方法去实现类似图例的功能。

　　踩坑记录：

　　1、刚开始想的就是通过legend的selected设置为false来达到效果（之前处理翻页使用过这种），但是发现不行，设置某一个name为false，会影响到上面图例所有的数据，因为series里的那个name是一样的，但是这个name又必须和legend里的一一对应，所以放弃

　　2、考虑先删除比如db1的数据，所以先定义一个存储的数组，来存储删除的数据，因为点击series的线消失，再点击还是要加进去的，这种实现可以。但是有个问题，就是当删除series为[]一个空数组时，下面的图还是会有。在echart的demo里面试一下，发现series:[]，不会画图

　　解决方案：

　　当选中上面图例时，只把series里面的对象的data置为[]空数组，详情看下面的changeLegrend方法，完美实现效果，代码还没优化，碰到类似处理三维图例的需求时，可以参考下

<template>
    <div>
    <div class="legend_container">
        <ul>
            <li v-for="item in legendData">
                <button class="btn-link btn-legend-item" @click="changeLegrend(item,$event)"><span class="legend-item-bg" :style="'background-color:'+legendColor[item]"></span>{{item}}</button>
            </li>
        </ul>
    </div>
    <div id="myLine" :style="{width:'100%',height:'300px'}"></div>
    </div>
</template>
<script type="ecmascript-6">
import {getPhyLogiLoadApi} from '@/apis'
export default {
    data(){
        return {
            xData:[],
            series:[],
            legendData:[],
            legendColor:{},
            storage:{},
            colors:['#5793f3', '#d14a61', '#675bba']
        }
    },
    methods:{
        drawLine(){
            let myLine = this.$echarts.init(document.getElementById('myLine'));
            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    selectedMode:'single'
                },
                grid: {
                    left: '3%',
                    right: '7%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: this.xData,
                        name: '快照时间'
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '统计值'
                    }
                ],
                series: this.series
            };
            myLine.setOption(option);
            window.addEventListener("resize", () => { myLine.resize();});
        },
        fetchData(){
            getPhyLogiLoadApi(this.$store.state.inspection.reportInfo.batch_id).then((res) => {
                if(res.status === 200){
                    let _dataArray = res.data,
                        len = _dataArray.length;
                    for(let i=0;i<len;i++){
                        if(!this.legendData.includes(_dataArray[i].instance_name)){
                            this.legendColor[_dataArray[i].instance_name] = this.colors[this.legendData.length];
                            this.legendData.push(_dataArray[i].instance_name);
                        }
                        let _obj = {
                            name:_dataArray[i].stat_name,
                            type:'line',
                            smooth:true,
                            dbname:_dataArray[i].instance_name,
                            color:this.legendColor[_dataArray[i].instance_name],
                            data:_dataArray[i].stat_value.split(',')
                        }
                        this.series.push(_obj)
                    }
                    this.xData = _dataArray[0].snap_time.split(',')
                    this.drawLine();
                }
            })
        },
        changeLegrend(item,e){
            let _obj = {},
                len = this.series.length,
                _data = this.series;
            let thisDom = e.currentTarget;
            thisDom.classList.toggle('btn-selected');
            for(let i = 0; i < len; i++){
                if(item === _data[i].dbname){
                    //如果为空，说明被选，置为存储的数据
                    if(_data[i].data.length === 0){
                        _data[i].data = this.storage[item][_data[i].name]
                    }else{
                        //先存数据，再置为空
                        _obj[_data[i].name] = _data[i].data;
                        _data[i].data = []
                    }
                }
            }
            //存储数据
            this.storage[item] = _obj;
            this.drawLine();
        }
    },
    mounted(){
        this.fetchData();
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet">
.legend_container{
    text-align center
    li {
        list-style none
        display inline
    }
}
.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}
.btn-legend-item {
    color: rgb(72, 72, 72);
    padding: 0px;
}
.legend-item-bg {
    display:inline-block;
    width: 20px;
    height: 12px;
    margin-right: 5px;
    border-radius: 2px;
}
.btn-selected{
    opacity 0.3
}
</style>

 

相关文章