echarts柱状图三列
时间: 2023-11-17 08:01:19 浏览: 89
echarts柱状图三列是指在echarts柱状图中,每个柱子由三个不同的数据组成,通常用于比较不同类别的数据。下面是实现echarts柱状图三列的步骤:
1. 在HTML文件中引入echarts.js文件。
2. 创建一个div元素作为echarts图表的容器。
3. 在JavaScript文件中定义一个echarts实例,并将其与div元素绑定。
4. 定义x轴和y轴的数据。
5. 定义三个不同的数据系列,并将它们添加到echarts实例中。
6. 设置每个数据系列的颜色和渐变色。
7. 设置图例和提示框。
8. 调用echarts实例的setOption方法,将以上设置应用到图表中。
下面是一个实现echarts柱状图三列的范例代码:
```javascript
// 引入echarts.js文件
<script src="echarts.js"></script>
// 创建一个div元素作为echarts图表的容器
<div id="chart" style="width: 600px;height:400px;"></div>
// 在JavaScript文件中定义一个echarts实例,并将其与div元素绑定
var chart = echarts.init(document.getElementById('chart'));
// 定义x轴和y轴的数据
var xAxisData = ['类别1', '类别2', '类别3', '类别4', '类别5'];
var yAxisData = [100, 200, 300, 400, 500];
// 定义三个不同的数据系列,并将它们添加到echarts实例中
chart.setOption({
xAxis: {
data: xAxisData
},
yAxis: {},
series: [{
name: '数据1',
type: 'bar',
data: [150, 250, 350, 450, 550],
itemStyle: {
color: '#FFA07A'
}
}, {
name: '数据2',
type: 'bar',
data: [120, 220, 320, 420, 520],
itemStyle: {
color: '#87CEFA'
}
}, {
name: '数据3',
type: 'bar',
data: [90, 190, 290, 390, 490],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFDAB9'},
{offset: 0.5, color: '#FFA07A'},
{offset: 1, color: '#FF6347'}
]
)
}
}]
});
// 设置图例和提示框
chart.setOption({
legend: {
data: ['数据1', '数据2', '数据3']
},
tooltip: {}
});
// 调用echarts实例的setOption方法,将以上设置应用到图表中
chart.setOption({
series: [{
name: '数据1',
type: 'bar',
data: [150, 250, 350, 450, 550],
itemStyle: {
color: '#FFA07A'
}
}, {
name: '数据2',
type: 'bar',
data: [120, 220, 320, 420, 520],
itemStyle: {
color: '#87CEFA'
}
}, {
name: '数据3',
type: 'bar',
data: [90, 190, 290, 390, 490],
itemStyle: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: '#FFDAB9'},
{offset: 0.5, color: '#FFA07A'},
{offset: 1, color: '#FF6347'}
]
)
}
}]
});
--相关问题--: