Echarts 5 瞎入门指南-4

本章主题-图例组件 – legend
图例组件展现了不同系列的标记,颜色和名字。可以通过点击图例控制哪些系列不显示

先来看个简单的图例组件

<template>
    <div ref="chart" id="chart"></div>
</template>

<script>
    import * as echarts from 'echarts'
    
    const legend =  {
        itemGap: 10,  //图例每项之间的间隔
        itemWidth: 30, //图形宽度 
        itemHeight: 20, //图形高度
    },           
    
    const series = [
        {
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                {value: 335, name: '燕小六'},
                {value: 310, name: '李大嘴'},
                {value: 234, name: '佟湘玉'},
                {value: 135, name: '白展堂'},
                {value: 1548, name: '秀才'}
            ]
        }
    ]
    
    const options = {
        backgroundColor: '#fff', //背景颜色
        legend,
        series
    };
    
    ~function init() {
        const dom = document.getElementById('chart')
        let myChart = echarts.init(dom);
        myChart.setOption(options)
    }()
</script>
复制代码

参考图:

1.png

下面继续了解其他属性

legend =  {
        ...   // 省略号指上面的那些属性
        
        padding: [10, 20]  //设置整个图例的上下左右距离, 上面的itemGap是内部单个小图标距离
        orient: 'vertical', // 图例列表的布局朝向。 horizontal-水平   vertical-竖直
    }
复制代码

竖向legend参考图:

2.png

文字在左边显示:

legend = {    
    ...
    align: 'right'   //图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定
}
复制代码

fx.png

修改小方块颜色: 如果不自定义颜色,echarts会自动分配,依次循环从['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

  1. 统一设置样式在 legend.itemStyle里设置
legend = {
    itemStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#912634' // 0% 处的颜色
                }, {
                    offset: 1, color: 'blue' // 100% 处的颜色
                }],
            }
    }
}

复制代码

参考图:

渐变.png

设置图片背景

<template>
    <img src="@/assets/imgs/xx.png" id="img" />
</template>

legend: {       
    itemStyle: {
        color: {
            image: document.getElementById('img'),
            repeat: 'repeat'
        }
    }
}
复制代码

图片背景.png

  • 3.如果想单独设置每一个, 1.方法在最外层的color设置, 2.单独在每个data里设置

  • 第一种方法

option = {
    color: ['red', 'yellow', 'blue', 'green', 'pink']
}


复制代码
  • 第二种方法
option = {
    series: [
        {
            value: 335,
            name: '燕小六',
            itemStyle: {
                normal: {
                    color: "rgba(red, 1)"   
                }
            }
        },
        ...
    ]
}
复制代码

单个颜色修改.png

修改文字颜色

legend: {       
    textStyle: {
        color: 'blue'
    }
}
复制代码

文字颜色.png

让文字显示在小方块内

legend: {
    itemGap: 30,
    itemWidth: 0,  //先把小方块宽高设置为0
    itemHeight: 0,
    textStyle: {
        color: 'blue',
        padding: [10, 30],   //然后把文字块设个背景
        backgroundColor: 'rgba(227,161,96,0.8)'
    }
}
复制代码

参考图:

文字在块里.png

超出时显示滚动

 legend: {
    ...
    type: 'scroll',
    width: '60%',
    data: (function (){
        var list = [];
        for (var i = 1; i <=30; i++) {
            list.push(i + 2000 + '');
        }
        return list;
    })()
}

//注意要与series 里的data要对应起来, data.length === series.data.length
复制代码

滚蛋.gif

关于legend专题,暂时写到这边, 后续想到啥再补

最后的轻语

`愿终有一日,人人生来平等,再无贵贱之分,守护生命,追求光明 ------ 叙利亚之歌`
复制代码
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享