legend
legend要显示,series数据一定要有name
let options = {
legend: {
show: true,
},
xAxis: {
data: time,
},
yAxis: {},
series: [
{
id: 1, // legend要显示,series数据一定要有name
name: "data",
type: "line",
data: value,
},
],
};
图形的调节
图形形状和图形之间的间距
itemHeight,itemHeight 图形的宽和高
itemGap:图例之间的间隔
let options = {
legend: {
show: true,
itemWidth: 50, // 图形宽
itemHeight: 50, // 图形高
itemGap: 200, //图例每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
},
xAxis: {
data: time,
},
yAxis: {},
series: [
{
id: 0,
name: "time",
type: "line",
data: value,
},
{
id: 1,
name: "data",
type: "line",
data: value,
},
],
};
线条的调节 lineStyle
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
lineStyle: {
color: "#fff",
type: [1, 10], //"dotted" ,支持数组的写法 [1, 10],具体用法跟svg描边用法相同
},
},
图形形状
通过icon 可以设置图形的形状
legend: {
show: true,
itemWidtg: 50,
itemHeight: 50,
itemGap: 200,
icon: "rect",
},
除了内置的’circle’, ‘rect’, 'roundRect’外,还可以使用图片。
可以通过 ‘image://url’ 设置为图片
legend: {
show: true,
itemWidtg: 50,
itemHeight: 50,
itemGap: 200,
icon: "image://http://localhost:5173//favicon.ico",
lineStyle: {
type: "dashed",
width: 1,
},
},
边框的调节
itemStyle:边框,线条的颜色
legend: {
show: true,
itemWidtg: 50,
itemHeight: 50,
itemGap: 200,
icon: "rect",
itemStyle: {
// 边框,线条的颜色
borderColor: "red",
borderType: "solid",
borderWidth: 1,
},
lineStyle: {
type: "dashed",
width: 1,
},
},
文字样式的调节
文字样式的调节主要集中在 textStyle中
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
lineStyle: {
color: "#fff",
type: [1, 10], //"dotted"
},
textStyle: {
color: "red",
backgroundColor: "yellow",
/* padding: 3,
borderRadius: 3,
borderWidth: 1,
borderColor: "red",*/
lineHeight: 20,
height: 20,
},
},
formatter 自定义文本内容
formatter 用来格式化图例文本,支持字符串模板和回调函数两种形式。
字符串模板:
legend: {
formatter: "legend {name}",
}
回调函数:
legend: {
formatter: (name) => {
return name + "-test";
},
}
例子:
const data = {
d1: [10, 21, 3, 15, 22, 11],
d2: [14, 15, 16, 25, 12, 22],
};
let options = {
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
formatter: (name) => {
const total = data[name].reduce((pre, now) => {
return pre + now;
});
return total;
},
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
legend.data
legend.data:图例的数据数组,如果 data 没有被指定,会自动从当前系列中获取。数组项通常为一个字符串,每一项代表一个系列的 name。也可以是一个对象,对象的属性有:
例子:最大的值的图例的文字颜色设为黄色
onMounted(() => {
let canvas = document.getElementById("canvas");
myEcharts = echarts.init(canvas, "vintage", {
width: 500,
height: 500,
devicePixelRatio: window.devicePixelRatio,
locale: "ZH",
});
const data = {
d1: [10, 21, 3, 15, 22, 11],
d2: [14, 15, 16, 25, 12, 22],
};
let options = {
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
formatter: (name) => {
const total = data[name].reduce((pre, now) => {
return pre + now;
});
return total;
},
},
xAxis: {
data: [1, 2, 3, 4, 5, 6],
},
yAxis: {},
series: [
{
id: 0,
name: "d1",
type: "line",
data: data.d1,
},
{
id: 1,
name: "d2",
type: "line",
data: data.d2,
},
],
};
rednderEcharts(options);
watch(() => {
let nameArr = Object.keys(data);
nameArr.sort((pre, now) => {
let preAllValue = data[pre].reduce((preValue, nowValue) => {
return preValue + nowValue;
});
let nowAllValue = data[now].reduce((preValue, nowValue) => {
return preValue + nowValue;
});
return nowAllValue - preAllValue;
});
let newData = nameArr.map((name, index) => {
if (index == 0) {
return {
name,
textStyle: {
color: "yellow",
},
};
} else {
return {
name,
};
}
});
myEcharts.setOption({
legend: {
data: newData,
},
});
}, data);
});
/*
watch(() => {},data)
当该data发生变化时,触发watch中的函数操作。
*/
图例整体位置和样式的调节
注意 :width 的最大值并不是随便设置的,最大值是item的宽+间距(还有padding等),超出这个值后,在设置就无效。
height也是,正常情况下就是图例的高+padding,变大变小后看不出来,但实际上是有变化的。他有个可视的区域:图例的高+padding,超出这个范围后,可视的区域还是这样。没有超出,再将tyep:scroll后会有分页,可视区域的高不变,但是图例所占的区域是height,超出height的部分隐藏。
当宽度不够时会自动换行
legend: {
show: true,
itemWidtg: 50,
itemHeight: 50,
itemGap: 200,
icon: "rect",
backgroundColor: "blue",
//组件大小
width: 1200, //宽度最大就是item+间距 支持%
padding: 10, //内边距,可以是数组[1,2,3,4]
//调整位置
top: 0,
left: 50,
/*调整位置,支持%
top: "10%",
left: 50,*/
//边框样式
borderWidth: 2,
borderColor: "red",
borderRadius: 5,
// 阴影
shadowColor: "rgba(0, 0, 0, 0.5)",
shadowBlur: 10,
},
图例的交互
图例可以交互,默认点击后图例颜色会变会,数据不在显示。
selected:图例选中状态表
inactiveColor:图例关闭时的颜色
selectedMode:选择的模式,默认开启图例选择,可以设成 false 关闭。也可以设成 ‘single’ 或者 ‘multiple’。
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
formatter: (name) => {
const total = data[name].reduce((pre, now) => {
return pre + now;
});
return total;
},
selected: {
d1: true,
d2: true,
},
inactiveColor: "#fff",
selectedMode: "single",
},
selector: 图例组件中的选择器按钮,目前包括“全选”和“反选”两种功能
legend: {
show: true,
itemWidth: 80,
itemHeight: 50,
backgroundColor: "blue",
formatter: (name) => {
const total = data[name].reduce((pre, now) => {
return pre + now;
});
return total;
},
selector: true,
},
图例的排列方式
orient: “colum”, 如果间距过大,超出 整个echarts范围, orient不会生效或只会部分生效。
legend: {
orient: "vertical",
}
type:图例的类型。‘plain’:普通图例,‘scroll’:可滚动翻页的图例。
分页的样式可以通过pageXxx来修改。
//这里要限制height
legend: {
height: "10%",
width: "30%",
type: "scroll",
backgroundColor: "blue",
orient: "vertical",
},
align: 图例标记和文本的对齐
legend: {
height: "10%",
backgroundColor: "blue",
align: "left",
},