本章主题-图例组件 – 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>
复制代码
参考图:
下面继续了解其他属性
legend = {
... // 省略号指上面的那些属性
padding: [10, 20] //设置整个图例的上下左右距离, 上面的itemGap是内部单个小图标距离
orient: 'vertical', // 图例列表的布局朝向。 horizontal-水平 vertical-竖直
}
复制代码
竖向legend参考图:
文字在左边显示:
legend = {
...
align: 'right' //图例标记和文本的对齐。默认自动,根据组件的位置和 orient 决定
}
复制代码
修改小方块颜色: 如果不自定义颜色,echarts会自动分配,依次循环从['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
- 统一设置样式在 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% 处的颜色
}],
}
}
}
复制代码
参考图:
设置图片背景
<template>
<img src="@/assets/imgs/xx.png" id="img" />
</template>
legend: {
itemStyle: {
color: {
image: document.getElementById('img'),
repeat: 'repeat'
}
}
}
复制代码
-
3.如果想单独设置每一个, 1.方法在最外层的color设置, 2.单独在每个data里设置
-
第一种方法
option = {
color: ['red', 'yellow', 'blue', 'green', 'pink']
}
复制代码
- 第二种方法
option = {
series: [
{
value: 335,
name: '燕小六',
itemStyle: {
normal: {
color: "rgba(red, 1)"
}
}
},
...
]
}
复制代码
修改文字颜色
legend: {
textStyle: {
color: 'blue'
}
}
复制代码
让文字显示在小方块内
legend: {
itemGap: 30,
itemWidth: 0, //先把小方块宽高设置为0
itemHeight: 0,
textStyle: {
color: 'blue',
padding: [10, 30], //然后把文字块设个背景
backgroundColor: 'rgba(227,161,96,0.8)'
}
}
复制代码
参考图:
超出时显示滚动
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
复制代码
关于legend专题,暂时写到这边, 后续想到啥再补
最后的轻语
`愿终有一日,人人生来平等,再无贵贱之分,守护生命,追求光明 ------ 叙利亚之歌`
复制代码
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END