echart图例位置,echarts图例自定义,echarts图例位置设置,echarts图例形状,echart图例的形状,echarts添加图例
ECharts 是一个流行的 JavaScript 图表库，其中的图例组件是用于显示和交互图表数据系列的标识。在 ECharts 中，可以通过配置数据项和图例项来自定义图例组件的展示方式。

数据项指的是图表中的每个数据系列，可以通过设置其 name 属性来为其命名，并将该名称与相应的颜色和标志符号关联起来。

例如，以下代码创建了一个简单的折线图，其中包含两个数据系列，分别对应于 2019 年和 2020 年的销售额：

javascript
option = {
legend: {},
xAxis: {
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {},
series: [{
name: "2019",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260, 300, 320, 302, 340, 360]
}, {
name: "2020",
type: "line",
data: [200, 250, 280, 310, 290, 330, 350, 360, 380, 400, 420, 440]
}]
};


在该代码中，数据项分别为 "2019" 和 "2020"，并且由于未通过 legend 配置项设置图例项的名称，因此会默认使用数据项的名称作为图例项的名称。

为了进一步自定义图例，可以通过配置 legend 属性来设置图例项的名称、位置和样式等信息。

例如，以下代码将图例项的名称设置为“年度销售额”，并将其放置在图表的底部中央：

javascript
option = {
legend: {
data: ["年度销售额"],
align: "center",
bottom: 10
},
xAxis: {
data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
yAxis: {},
series: [{
name: "2019",
type: "line",
data: [150, 230, 224, 218, 135, 147, 260, 300, 320, 302, 340, 360]
}, {
name: "2020",
type: "line",
data: [200, 250, 280, 310, 290, 330, 350, 360, 380, 400, 420, 440]
}]
};


在该代码中，legend 的 data 属性设置为一个包含一个字符串元素的数组，该元素为图例项的名称。同时，align 和 bottom 属性分别用于设置图例项在水平方向上居中对齐和距离图表底部的距离。