option = {
"backgroundColor": "#fff",
"color": [
"#72A9FE",
"#FFC533",
"#56C994",
"#F6856E",
],
"title": {
},
"legend": {
"orient": "horizontal",
"data": [
{
"name": "语文"
},
{
"name": "数学"
},
{
"name": "英语"
},
{
"name": "总分"
},
{
"name": "名次"
},
],
"left": '30%',
"top": "4%",
"textStyle": {
"color": "#666",
"fontSize": 14
}
},
"grid": {
left: '2%',
right: '4%',
bottom: '6%',
top: '16%',
"containLabel": true
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
},
"textStyle": {
"align": "left"
}
},
"xAxis": [
{
"type": "category",
"data": [
'分班考', '23期中', '23期末', '24期中'
],
"axisTick": {
"show": false,
},
"axisLine": {
"show": true,
lineStyle: {
color: '#cdd5e2'
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#282828",
"fontSize": 14
},
"formatter": "{value}"
},
}
],
"yAxis": [
{
"type": "value",
"max": "350",
"interval": 20,
"axisTick": {
"show": false
},
"axisLine": {
"show": true,
lineStyle: {
color: '#cdd5e2'
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#282828",
"fontSize": 14
}
},
"splitLine": {
"show": false,
"lineStyle": {
"color": "rgba(255,255,255,0.2)"
}
}
},
{
type: "value",
name: "百分比",
"interval": 20,
"max": "410",
nameTextStyle: {
color: "#666666"
},
position: "right",
axisLine: {
lineStyle: {
color: '#cdd5e2'
}
},
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: "{value}", //右侧Y轴文字显示
textStyle: {
color: "#666666",
fontSize: 14,
}
},
inverse: true // 倒转y轴显示顺序
}
],
dataZoom: [
{
show: false,
realtime: true,
"height": 12,
start: 0,
end: 100,
bottom: '2%',
},
{
type: 'inside',
realtime: true,
"height": 12,
start: 0,
end: 70
}
],
"series": [
// {symbol: 'circle'},
{
"name": "语文",
"type": "bar",
"stack": "总量",
"barWidth": "30%",
"data": [
"78.5",
"87.5",
"99",
"97"
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
//
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "数学",
"type": "bar",
"stack": "总量",
"barWidth": "30%",
"data": [
"76",
"105",
"105",
"112"
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "英语",
"type": "bar",
"stack": "总量",
"barWidth": "30%",
"data": [
"89",
"112",
"108.9",
"112.5"
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
"name": "总分",
"type": "bar",
"barWidth": "20%",
"data": [
"243.5",
"304.5",
"312.9",
"321.5"
],
itemStyle: {
normal: {
label: {
show: true, //开启显示
formatter: function(params) {
const totalIndex = params.dataIndex;
const totalScore = parseFloat(option.series[0].data[totalIndex])
+ parseFloat(option.series[1].data[totalIndex])
+ parseFloat(option.series[2].data[totalIndex]);
return totalScore.toFixed(1);
},
textStyle: { //数值样式
color: '#333',
fontSize: 14
}
}
}
}
},
{
name: "名次",
type: "line",
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
smooth: false, //平滑曲线显示
symbol: "circle", //标记的图形为实心圆
symbolSize: 8, //标记的大小
itemStyle: {
normal: {
color: '#F1C60A',
borderColor: 'rgba(241, 198, 10, 0.5)', //圆点透明 边框
borderWidth: 7
},
},
lineStyle: {
color: "#FDF608",
"width": 5
},
data: [
{
"value": "146",
"label": {
"show": true,
"position": "top",
"textStyle": {
"fontSize": 15 // 设置字体大小为14
}
}
},
{
"value": "128",
"label": {
"show": true,
"position": "top",
"textStyle": {
"fontSize": 15 // 设置字体大小为14
}
}
},
{
"value": "107",
"label": {
"show": true,
"position": "top",
"textStyle": {
"fontSize": 15 // 设置字体大小为14
}
}
},
{
"value": "63",
"label": {
"show": true,
"position": "top",
"textStyle": {
"fontSize": 15 // 设置字体大小为14
}
}
}]
},
]
}