前端-如何用echarts绘制含有多个分层的波形图

一、效果图展示

先展示一下实际的效果图

用户选择完需要的波形参数字段之后，页面开始渲染图表，有几个参数就要渲染几个grid，也就是几行波形。

二、绘制逻辑

拿到所选的参数数据之后

1.首先是给横坐标轴的里程-数据注入

2.修改tooltip（跟着竖线走的卡片弹窗）里面的弹出窗的显示，需要返回html模板字符串

3.修改datazoom（最底下的蓝色滑动窗），里面初始的起点和终点

4.按照参数的个数添加grid（每一行的波形），需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200

5.按照参数的个数添加xAxis里面的对象   （需要修改 gridIndex 0 1 2 ...）
只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站
第二个对象开始不显示xAxis坐标轴

6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）

7.最后修改series 每个参数是一个对象的配置（包括数据，线条的类型，颜色）

（值得注意的是，这套绘制，建议放置在一个函数里，然后加载时调用，重新绘制时调用，需要注意重新绘制时，除了要myChart.dispose(); //销毁，还要重新配置option）

三、关键代码

绘制逻辑代码：

1. const self = this;
3. //重新给图标赋值数据
4. this.tableData.forEach(function (currentValue, index, array) {
6. // 4.按照参数的个数添加grid，需要叠加计算的是，距离bottom的高度，一个距离100，2个距离200
7. let height = (index+1)*100;
8. if(index===array.length-1){
9. self.option.grid.push({
10. show:true,
11. left: 50,
12. right: 50,
13. bottom: height,
14. height: 100, //每一个折现图的高度
15. backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色
16. })
17. }else{
18. self.option.grid.push({
19. show:true,
20. left: 50,
21. right: 50,
22. bottom: height,
23. height: 100, //每一个折现图的高度
24. backgroundColor: index % 2 === 1 ? '#f0f0f0' : 'white', // 背景色
25. })
26. }
28. // 5.按照参数的个数添加xAxis里面的对象 （需要修改 gridIndex 0 1 2 ...）
29. // !!!只有第一个对象，要显示X轴坐标，且同时要判断X轴坐标是否包含车站
30. // 第二个对象开始不显示坐标轴
31. if(index==0){
32. self.option.xAxis.push({
33. gridIndex: 0, //x 轴所在的 grid 的索引
34. type: 'category', //类目轴
35. boundaryGap: false, //坐标轴两边留白策略，
36. axisLine: {
37. //是否显示坐标轴轴线。
38. onZero: false,
39. lineStyle: {
40. color: 'black',
41. width: 2,
42. },
43. },
44. //车站标注
45. axisLabel: {
46. // interval: 0,//自适应X轴间距
47. formatter: function (params) {
48. // 自定义div
49. // console.log(typeof(params))
50. let res;
51. if (params.includes('站')) {
52. res = '{abg11|' + params + '}';
53. } else {
54. res = '{abg1|' + params + '}';
55. }
57. return res;
58. },
59. rich: {
60. abg11: {
61. backgroundColor: '#2B8AFD',
62. width: '100%',
63. align: 'right',
64. height: 22,
65. borderRadius: 3,
66. padding: [2, 4, 2, 4],
67. color: '#ffffff',
68. },
69. abg1: {
70. color: '#595959',
71. },
72. },
73. },
74. data: xData,
75. show: true, //是否显示 x 轴。
76. })
77. }else{
78. self.option.xAxis.push({
79. gridIndex: index, //x 轴所在的 grid 的索引
80. type: 'category', //类目轴
81. boundaryGap: false, //坐标轴两边留白策略，
82. axisLine: {
83. onZero: true, //X 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效。
84. lineStyle: {
85. color: '#979797',
86. },
87. },
88. data: xData,
89. show: true, //是否显示 x 轴。
90. axisTick: {
91. //坐标轴刻度相关设置
92. show: false,
93. },
94. axisLabel: {
95. //刻度标签
96. show: false,
97. },
98. })
99. }
101. // 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）
102. self.option.yAxis.push({
103. gridIndex: index, //y 轴所在的 grid 的索引
104. type: 'value',
105. // name: "PM2.5",//纵坐标名字
106. // nameLocation: "middle",//纵坐标名字的位置
107. // nameGap: 30,//纵坐标名字与轴线之间的距离
108. position: 'left', //y轴的位置
109. inverse: false,
110. splitLine: {
111. //坐标轴在 grid 区域中的分割线
112. show: false,
113. },
114. axisLine: {
115. //坐标轴轴线相关设置 竖着那一根
116. show: true,
117. lineStyle: {
118. color: '#979797',
119. },
120. },
121. axisTick: {
122. //坐标轴刻度相关设置
123. show: false,
124. },
125. axisLabel: {
126. //刻度标签
127. show: false,
128. },
129. },)
131. // 7.最后修改series 每个参数是一个对象
132. self.option.series.push({
133. //参数的名字-数据注入
134. name: currentValue.name,
135. type: 'line',
136. color: self.colorArray[index],
137. // 设置不显示小圆圈
138. symbol: 'none',
139. showSymbol: false,
140. xAxisIndex: index, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
141. yAxisIndex: index, //使用的 y 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
142. symbolSize: 8, //标记的大小
143. // hoverAnimation: false,
144. smooth: true, //平滑曲线
145. //每个grid的数据-数据注入
146. data: currentValue.data,
147. markLine: {
148. symbol: 'none', //去掉箭头
149. //最大值和最小值
150. data: [
151. {
152. // type: 'median', //中位数。
153. type: 'average', //中位数。
154. symbol: 'none', //去掉开始的原点
155. label: {
156. //字体设置
157. show: 'true',
158. position: 'insideEndTop',
159. distance: 10,
160. formatter: currentValue.name,
161. color: 'inherit',
162. },
163. lineStyle: {
164. //横线设置
165. width: 1,
166. },
167. },
168. ],
169. },
170. lineStyle: {
171. shadowColor: self.colorArray[index], //透明的颜色
172. shadowOffsetX: 0,
173. shadowOffsetY: 0,
174. opacity: 0.8, //透明度
175. shadowBlur: 8, //阴影大小
176. type: "solid", //实线
177. width: 2,
178. },
179. })
180. });
182. this.getHeight(this.tableData.length)//重新获得动态的图表高度
183. //折线图
184. this.$nextTick(()=>{
185. this.getChart();//实际绘制
186. })

动态高度函数代码：

1. //获得动态高度
2. getHeight(num){
3. this.dynamicHeight = `${num * 100 + 150}px`;
4. },

绘制代码：

1. //绘制折线图
2. getChart() {
3. const chartDom = document.getElementById('main-echarts');
5. if (myChart != null && myChart != '' && myChart != undefined) {
6. console.log("销毁了");
7. myChart.dispose(); //销毁
8. }
10. // // 显示加载图
11. // myChart.showLoading();
13. this.$nextTick(()=>{
14. myChart = echarts.init(chartDom);
15. myChart.setOption(this.option, true);//这里设置true,会每次根据数据重新绘制，设置为false之后，每次新的绘制会在原有图表的基础上再添加（不会有断裂感，会形成流动感）
16. })
18. window.addEventListener('resize', function () {
19. myChart.resize();
20. });
21. }

 Y轴名字显示且竖直放置：

1. // 6.修改y轴 （可显示刻度）（需要修改 gridIndex 0 1 2 ...）
2. self.option.yAxis.push({
3. gridIndex: index, //y 轴所在的 grid 的索引
4. type: 'value',
5. name: currentValue.name.toString().split("").join("\n"),//纵坐标名字竖直从上到下排列
6. nameRotate:0,
7. nameTextStyle: {
8. padding: 10, // 设置与坐标轴的距离，单位为像素
9. color: 'black', // 这里设置颜色
10. },
11. nameLocation: "middle",//纵坐标名字的位置
12. nameGap: 40,//纵坐标名字与轴线之间的距离
13. position: 'left', //y轴的位置
14. inverse: false,
15. splitLine: {
16. //坐标轴在 grid 区域中的分割线
17. show: false,
18. },
19. axisLine: {
20. //坐标轴轴线相关设置 竖着那一根
21. show: true,
22. lineStyle: {
23. color: '#979797',
24. },
25. },
26. axisTick: {
27. //坐标轴刻度相关设置
28. show: false,
29. },
30. axisLabel: {
31. //刻度标签
32. show: true,
33. showMinLabel: false, // 隐藏最小值标签
34. showMaxLabel: false, // 隐藏最大值标签
35. },
36. },)

弹窗显示为半透明

1. this.option = {
2. //鼠标放上去显示的弹窗
3. tooltip: {
4. trigger: 'axis', //坐标系出触发
5. backgroundColor: 'rgba(255, 255, 255, 0.7)', // 设置白色的半透明背景