Echarts X轴 Y轴线的类型、颜色、及标签字体颜色设置

75 阅读 0 评论 50 点赞

我是靠谱客的博主直率石头，最近开发中收集的这篇文章主要介绍Echarts X轴 Y轴线的类型、颜色、及标签字体颜色设置，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

 1
// 人均效能
 2
var initRjxnChart = function () {
 3
var rjxnChart = echarts.init(document.getElementById("rjxn_echart"));
 4
var rjxnoption = {
 5 
tooltip: {
 6
trigger: 'axis',
 7 
},
 8 
grid: {
 9
left: '8%',
10
bottom: '20%',
11
top: '10%',
12
right: '8%',
13 
},
14 
legend: {
15
show: true,
16
orient: 'horizontal',
17
data: ['人均每小时操作量'],
18
x: '8%',
19
y: '0%',
20 
textStyle: {
21
color: '#8c8c92'
22 
}
23 
},
24
color: ["#cd9136"],
25 
xAxis: [{
26
type: 'category',
27
data: ['上海', '北京', '江苏', '山东', '湖北', '武汉', '广州'],
28
boundaryGap: true,
29
axisTick: { // X轴线 刻度线 
30
show: false,
31
length: 10,
32 
lineStyle: {
33
color: 'red',
34
type: 'solid',
35
width: 2
36 
}
37 
},
38
axisLabel: {
// X轴线 标签修改 
39 
textStyle: {
40
color: '#8c8c92', //坐标值得具体的颜色
41 
}
42 
},
43 
splitLine:{
44
show: true, // X轴线 颜色类型的修改
45 
lineStyle: {
46
type: 'dashed',
47
color: '#292c38'
48 
}
49 
},
50 
axisLine: {
51
show: true, // X轴 网格线 颜色类型的修改
52 
lineStyle: {
53
type: 'dashed',
54
color: '#292c38'
55 
}
56 
},
57 
}],
58 
yAxis: [{
59
type: 'value',
60
name: '',
61
min: 0,
62
max: 3000,
63
interval: 500,
64 
axisLabel: {
65
formatter: '{value}',
66 
textStyle: {
67
color: '#8c8c92', //坐标值得具体的颜色
68 
}
69 
},
70 
axisLine: {
71
show: true, // Y轴线
72 
lineStyle: {
73
type: 'dashed',
74
color: '#292c38'
75 
}
76 
},
77 
splitLine:{
78
show: true,
79 
lineStyle: {
80
type: 'dashed',
81
color: '#292c38'
82 
}
83 
}
84 
}],
85 
series: [{
86
name: '人均每小时操作量',
87
type: 'line',
88
data: [100, 200, 100, 500, 100, 100, 1000]
89 
}
90 
]
91 
};
92
if (rjxnoption && typeof rjxnoption === "object") {
93
rjxnChart.setOption(rjxnoption, true);
94 
}
95
};