echart折线图legend分行显示
时间: 2023-10-02 14:12:50 浏览: 185
可以通过设置legend的orient属性来实现分行显示,代码如下:
legend: {
orient: 'vertical',
left: 10,
top: 20,
data: ['2019', '2020', '2021', '2022', '2023']
}
这样就能将legend垂直分行显示,方便观察和阅读。
相关问题
echart 折线图legend不显示
ECharts是一款强大的数据可视化库,在创建折线图时,如果想要隐藏Legend(图例),你可以通过设置`legend`选项的`show`属性为`false`来实现。下面是一个简单的例子:
```javascript
var option = {
xAxis: { // x轴配置
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: { // y轴配置
type: 'value'
},
series: [ // 数据系列
{
name: '销量',
type: 'line', // 折线图
data: [120, 132, 101, 134, 90, 230, 210], // 数据点
lineStyle: { // 隐藏图例的样式
show: false // 关闭显示
}
}
]
};
// 初始化图表,并隐藏图例
echarts.init(document.getElementById('main')).setOption(option);
```
在这个例子中,`lineStyle.show: false`表示该系列的图例将不会显示。如果你希望全局隐藏所有图例,可以在`legend`选项本身设置`show: false`。
echart折线图代码
好的,以下是一个简单的 ECharts 折线图的代码示例:
HTML 代码:
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
JavaScript 代码:
```javascript
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项和数据
var option = {
title: {
text: '折线图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: [5, 20, 36, 10, 10, 20, 15]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
需要注意的是,使用 ECharts 需要先引入 ECharts 库和其依赖的其他库,例如:
```html
<head>
<meta charset="utf-8">
<title>折线图示例</title>
<!-- 引入 ECharts 主文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入主题文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>
</head>
```
这里使用了 `macarons` 主题,可以根据需要选择其他主题。
阅读全文