echarts 使用
# echarts 使用
[TOC]
# 一、图形
# 1.1 柱状图
option = {
color: ["#3398DB"],
tooltip: { // 悬浮时的数据提示
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "none" // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
type: "category",
data: [10, 52, 20, 33, 39, 30, 20], // x轴坐标值
axisTick: {
alignWithLabel: false,
length: 0 // 不显示刻度线
},
axisLine: {
lineStyle: { // x轴线文本样式
color: "#E8ECEF"
}
},
axisLabel: { // x轴值样式
fontSize: 12,
fontFamily: "Helvetica",
color: function(value) {
return value == "今天" ? "#0A66CA" : "#52627C";
},
interval: 0, // 每个标签都显示
}
}
],
yAxis: [
{
type: "value",
name: "周接收数量", // y轴名
nameLocation: "end", // 默认，y轴名位置
min: 0,
minInterval: 15,
axisTick: {
alignWithLabel: false,
length: 0 // 不显示刻度线
},
nameTextStyle: { // y轴值样式
fontSize: 12,
fontFamily: "Helvetica",
color: "#52627C"
},
axisLine: {
show: false // 隐藏轴线
}
}
],
series: [
{
name: "接收量",
type: "bar",
barWidth: "60%",
data: [10, 52, 20, 33, 39, 30, 20], // x轴值
itemStyle: { // 柱状条样式
normal: {
color(val) {
if (val.name === "今天") return "#0A66CA";
else return "#D0D5D9";
},
barBorderRadius: [8, 8, 0, 0],
barMaxWidth: 80
},
emphasis: { // 鼠标悬浮时的柱状条样式
color: "#0A66CA"
}
},
label: { // 柱状条上值的样式
show: true,
color(val) {
if (val.dataIndex === 6) return "#0A66CA";
else return "#D0D5D9";
},
fontFamily: "Helvetica Neue",
position: "top"
}
},
{ // 设置背景阴影
type: "bar",
barGap: "-100%",
z: 0
},
{
type: "bar",
barWidth: "60%",
data: shadowData,
z: 0,
itemStyle: {
normal: {
color: "#F6F8FA",
barMaxWidth: 80
},
emphasis: {
color: "#F6F8FA",
}
},
label: {
show: false
}
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
# 1.1.1 markPoint 标记的图形
markPoint : {
symbol:'pin',//标记类型
symbolSize: 40,//图形大小
itemStyle: {
normal: {
borderColor: '#fff',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: true
}
}
},
data : [//配置项
{value:'5',xAxis: 0, yAxis: 5},
{value:'10',xAxis:1, yAxis: 10},
{value:'15',xAxis:2, yAxis: 15},
{value:'20',xAxis:3, yAxis: 20},
{value:'25',xAxis:4, yAxis: 25},
{value:'30',xAxis:5, yAxis: 30},
{value:'50',xAxis:6, yAxis: 50},
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 1.2 饼图
let option = {
// backgroundColor: "#F6F8FA",
backgroundColor: "#fff",
title: {
text: "30%",
// subtext: '文本说明',
x: "center",
y: "center",
textStyle: {
color: "#192B51",
fontSize: 45,
fontWeight: "bold"
}
// subtextStyle: {
// color: "rgba(255,255,255,.45)",
// fontSize: 14,
// fontWeight: 'normal'
// }
},
tooltip: {
trigger: 'item',
// formatter(val) {
// console.log('formatter', val)
// 对应的变量：$vars: (4) ["seriesName", "name", "value", "percent"]
// }
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { // 图例
x: "center",
y: "bottom",
data: ["rose3", "rose5", "rose6", "rose7", "rose8"]
},
calculable: true,
series: [
// 圆形背景
{
type: "pie",
radius: [0, 130],
center: ["50%", "50%"],
z: 0,
itemStyle: {
normal: {
color: "#F6F8FA",
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: { color: "#F6F8FA" } //鼠标移入颜色，禁止高亮
},
data: [
{
value: 100,
hoverAnimation: false, //鼠标移入变大
legendHoverLink: false
}
]
},
{
// 粗圆环
name: "第一个参数", // formatter，seriesName
type: "pie",
radius: [82, 114],
center: ["50%", "50%"],
label: {
color: "#52627C",
fontSize: 16,
lineHeight: 16,
formatter: "{b}\n{hr|}\n{c|{c}}",
rich: {
c: {
color: "#192B51",
fontWeight: "bold",
fontSize: 16,
},
hr: {
borderColor: "#52627C",
width: "100%",
borderWidth: 1,
height: 0
}
}
},
data: [
{
name: "第二个参数", // formatter，name
value: "34", // formatter，value
itemStyle: {
color: "#0A66CA" // 圆条
},
// labelLine: { // 引导线
// length: 8,
// length2: 120,
// lineStyle: {
// color: '#52627C',
// },
// },
},
{
value: 231,
// name: '入库简历总数',
itemStyle: {
color: "transparent"
// borderColor: 'red'
},
hoverAnimation: false //鼠标移入变大
}
]
},
{
// 细圆环
name: "入库简历总数",
type: "pie",
radius: [90, 106],
center: ["50%", "50%"],
data: [
{
// 数值1
value: 34,
// name: '吴际帅\n牛亚莉',
itemStyle: {
color: "transparent"
}
},
{
// 数值2
value: 231,
name: "rose2",
itemStyle: {
color: "#D0D5D9",
emphasis: { color: "#D0D5D9" } //鼠标移入颜色，禁止高亮
},
hoverAnimation: false //鼠标移入变大
}
]
}
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
# 1.3 滚动轴
# 1.3.1 参考教程
暂无
# 1.3.2 功能详解
dataZoom=[ //区域缩放
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
dataZoom: [
{
// 滚动轴
show: true,
height: 10,
xAxisIndex: [0],
bottom: 24, // 距离整张图表底部的距离
start: 50, // 滚动条距离头部的距离（百分比）
end: 100, // 滚动条距离尾部的距离（百分比）
handleSize: "110%",
handleStyle: {
color: "red"
},
textStyle: {
color: "transparent"
},
borderColor: "#90979c",
fillerColor: "red",
backgroundColor: "#fff", //组件的背景颜色
showDataShadow: false, // 隐藏数据折线图
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 1.4 折线图
renderEcharts () {
let eData = this.echartData
let ops = {
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
formatter: '人次：{c}',
backgroundColor: '#fff',
textStyle: {
color: '#0A66CA',
fontSize: 12
},
axisPointer: {
type: 'line',
lineStyle: {
color: '#0A66CA',
type: 'dashed'
}
},
position: 'top',
extraCssText: 'box-shadow: 0px 3px 6px rgba(10,102,202,0.5);'
},
grid: {
borderWidth: 0,
height: '90%',
top: '5%',
left: '0%',
right: '2%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false, //坐标轴两边留白
data: [
`简历入库`,
`HR初筛`,
`面试官筛选`,
`预约面试`,
`发放Offer`,
`人员入职`
],
axisLabel: {
//坐标轴刻度标签的相关设置。
interval: 0, //设置为 1，表示『隔一个标签显示一个标签』
margin: 16,
textStyle: {
color: '#192B51',
fontSize: 12
}
},
axisTick: {
//坐标轴刻度相关设置。
show: false
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: '#E5E9ED'
}
},
splitLine: {
//坐标轴在 grid 区域中的分隔线。
show: true,
lineStyle: {
color: '#F6F8FA'
}
}
},
yAxis: [
{
type: 'value',
splitNumber: 5,
axisLabel: {
margin: 21,
textStyle: {
color: '#52627C',
fontSize: 12
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#F6F8FA'
}
}
}
],
series: [
{
type: 'line',
symbol: 'circle',
emphasis: {
itemStyle: {
borderWidth: 3
}
},
symbolSize: 4,
itemStyle: {
normal: {
color: '#0A66CA',
borderColor: '#fff',
borderWidth: 0,
shadowBlur: 0,
lineStyle: {
color: 'rgba(10,102,202,1)',
width: 1
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 0,
color: 'rgba(33,150,243,0)'
},
{
offset: 1,
color: 'rgba(33,150,243,1)'
}
])
}
}
},
data: [
eData.save_resume,
eData.hr_filter,
eData.interviewer_filter,
eData.interview_appoint,
eData.send_offer,
eData.entry_work
]
}
]
}
this.chart.setOption(ops)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
# 二、样式
# 2.1 颜色
# 2.1.1 彩虹色
color: ["#ff4343", "#f69846", "#f6d54a", "#45dbf7", "#44aff0", "#4777f5", "#5045f6", "#ad46f3", "#f845f1"]
1
# 2.2 标题
title: {
text: "{a|" + value + "%}" + "\n" + "{b|" + title + "}",
x: "center",
y: "center",
textStyle: {
rich: {
a: {
color: "#192B51",
fontSize: "30",
fontWeight: "bolder"
},
b: {
color: "#52627C",
fontSize: "12"
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 三、其他
# 3.1 x轴label悬浮提示
function formatXaxis(el) {
var isXLabel = true;
el.on("mouseover", function(params) {
if ((params.componentType = "xAxis" && params.value.length > 8)) {
var offsetX = params.event.offsetX + 10;
var offsetY = params.event.offsetY + 10;
el.setOption({
tooltip: {
formatter: params.value,
alwaysShowContent: true
}
});
el.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: 0,
position: [offsetX, offsetY]
});
}
});
el.on("mouseout", function(params) {
if ((params.componentType = "xAxis" && params.value.length > 8)) {
el.setOption({
tooltip: {
alwaysShowContent: false
}
});
}
});
}
formatXaxis(this.positionCompletionChart)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 3.2 选择性显示柱条上的数据
// label的配置信息
const topLabelOps = {
// 柱状条上值的样式
show: true,
fontFamily: 'Helvetica Neue',
position: 'top',
color: '#192B51',
fontSize: 12,
formatter: function (params) {
const name = params.name
const seriesName = params.seriesName
let value = params.value
switch (name) {
case 'test':
if (seriesName !== 'test') value = ''
break
}
return value
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 四、参考资料
-
- https://juejin.cn/post/6844903698288607239