ECharts Y 轴倒置

最新推荐文章于 2024-07-04 09:28:19 发布

花开花落丶丶

最新推荐文章于 2024-07-04 09:28:19 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： ECharts

本文链接：https://blog.youkuaiyun.com/u013402515/article/details/49149265

通过ECharts库，实现成绩排名的动态展示，包括最高分、最低分、平均分及级部排名，并采用不同图表类型和样式增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECharts：

参考 http://echarts.baidu.com/doc/example/line6.html 降雨图，进行修改。

这是我完成的：供参考

option = {
title:
{
text: '成绩排名'
},
legend:
{
x: '200',
data: ['最高分', '最低分', '平均分', '级部排名']
},
tooltip:
{
trigger: 'axis',
textStyle:
{
fontSize: 10,
fontStyle: 'consolas'
}
},
xAxis:
[
{
type: 'category',
boundaryGap: true,
axisLine: {onZero: false}, //让Y轴下来，不加这句话，Y轴在上面
axisLabel:
{
show: true,
interval: 0,
rotate: -10
},
data: ['八年级期末练习1', '八年级期末练习2']
}
],
yAxis:
[
{
type: 'value',
name: '分数',
//max: 150,
//splitNumber: 5,
axisLabel:
{
formatter: '{value} '
}
},
{
type: 'value',
name: '排名',
//splitNumber: 5,
axisLabel:
{
//formatter: '{value} '
formatter: function(v){
return - v;

}
}
}
],
series:
[
{
name: '最高分',
type: 'bar',
data: [83, 74]
},
{
name: '最低分',
type: 'bar',
data: [32, 27]
},
{
name: '平均分',
type: 'bar',
data: [56.68, 43.1]
},
{
name: '级部排名',
type: 'line',
yAxisIndex: 1,
//data: [1, 2]
data: (function(){
var oriData = [1, 2];
var len = oriData.length;
while(len--) {
oriData[len] *= -1;
}
return oriData;
})()
}
]
}
;