echart折线图legend分行显示
时间: 2023-10-02 09:12:50 浏览: 48
可以通过设置legend的orient属性来实现分行显示,代码如下:
legend: {
orient: 'vertical',
left: 10,
top: 20,
data: ['2019', '2020', '2021', '2022', '2023']
}
这样就能将legend垂直分行显示,方便观察和阅读。
相关问题
echart折线图 format
ECharts是一个强大的JavaScript图表库,用于创建交互式的数据可视化。折线图是ECharts中最常见的类型之一,用于展示数据随时间或其他连续变量的变化趋势。在ECharts中,折线图的格式可以通过配置项来定制,包括数据、样式、标记点等。以下是创建折线图的一些关键配置:
1. 数据配置(data):折线图的基本结构需要包含系列(series)的数组,每个系列都有自己的名称、数据点和必要的配置选项。例如:
```javascript
series: [{
name: 'Series Name', // 系列名称
type: 'line', // 类型为折线
data: [1, 2, 3, 4, 5] // 数据点
}]
```
2. 样式配置(style):可以调整线条的颜色、宽度、点样式等。比如:
```javascript
lineStyle: { // 线条样式
color: '#FF0000', // 颜色
width: 2, // 线宽
type: 'solid' // 线型
},
marker: { // 标记点样式
symbol: 'circle', // 标志形状
size: 5 // 标记点大小
}
```
3. 配置其他选项(如x轴和y轴、title、legend等):
```javascript
xAxis: {
type: 'category', // x轴类型
data: ['A', 'B', 'C', 'D', 'E'] // x轴数据
},
yAxis: {
scale: true, // 是否使用数值刻度
},
title: {
text: '折线图示例'
},
legend: {
data: ['Series Name']
}
```
echart折线图增加图列
在ECharts中,要给折线图增加图例,可以设置series中的name属性来实现。下面是一个简单的示例代码:
```javascript
// 引入ECharts库
import echarts from 'echarts';
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义数据
var data = {
categories: ['一月', '二月', '三月', '四月', '五月'],
series: [
{
name: '数据1',
data: [120, 200, 150, 80, 70]
},
{
name: '数据2',
data: [90, 150, 200, 120, 100]
}
]
};
// 配置选项
var = {
legend: {
data: data.series.map(item => item.name) // 设置图例的数据
},
xAxis: {
type: 'category',
data: data.categories
},
yAxis: {
type: 'value'
},
series: data.series.map(item => ({
name: item.name,
type: 'line',
data: item.data
}))
};
// 使用配置项显示图表
myChart.setOption(option);
```
在上面的代码中,通过设置legend.data属性来指定图例的数据,其中data属性的值是一个数组,包含了每个系列的名称。然后在series中,通过设置name属性来指定每个系列的名称,这样就能实现折线图增加图例。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)