背景介绍
目前维护的项目属于多年积累的老项目了，使用的 vue2 + vue-router + vuex + element-ui + webpack 的技术架构。涉及图表相关的库主要使用 echarts@4.9.0 和 饿了么前端团队基于 echarts 4.x 封装的 v-charts 1.19.0。
近期接运营要求，需要增加一些图表效果，基本界面效果实现如下：
问题
但在实现过程中，在区域缩放组件拖动调整数据显示范围时，发现x轴会出现重影的现象，如下图所示：
排查过程
初期怀疑跟图表配置项的 xAxis 相关配置信息有关，随将 position: 'bottom' 配置项注释掉，发现重影现象没有了，但是上下出现了重复的x 轴label如下图所示：
将echarts 图表配置信息拷贝到 echarts 实例页面（https://echarts.apache.org/v4/examples/zh/editor.html?c=bar-large）进行验证，发现在该页面不存在重影现象：
配置信息如下：
var option = {
"color": ["#004CA1", "#32D4E3", "#03A2DC", "#B581E3", "#0F7DFA", "#c4b4e4"],
"tooltip": { "trigger": "axis", "axisPointer": { "type": "shadow" } },
"legend": { "show": true, "top": -5, "data": ["CPU", "GPU"] },
"grid": {
"right": "5%",
"top": "10%",
"bottom": "20%",
"containLabel": true
},
"dataZoom": [
{ "type": "inside" },
{ "type": "slider", "left": 77, "right": 77 }
],
"xAxis": {
"data": [
"2022-11-26",
"2022-11-27",
"2022-11-28",
"2022-11-29",
"2022-11-30",
"2022-12-01",
"2022-12-02",
"2022-12-03",
"2022-12-04",
"2022-12-05",
"2022-12-06",
"2022-12-07",
"2022-12-08",
"2022-12-09",
"2022-12-10",
"2022-12-11",
"2022-12-12",
"2022-12-13",
"2022-12-14",
"2022-12-15",
"2022-12-16",
"2022-12-17",
"2022-12-18",
"2022-12-19",
"2022-12-20",
"2022-12-21",
"2022-12-22",
"2022-12-23",
"2022-12-24",
"2022-12-25",
"2022-12-26",
"2022-12-27",
"2022-12-28",
"2022-12-29",
"2022-12-30",
"2022-12-31",
"2023-01-01",
"2023-01-02",
"2023-01-03",
"2023-01-04",
"2023-01-05",
"2023-01-06",
"2023-01-07",
"2023-01-08",
"2023-01-09",
"2023-01-10",
"2023-01-11",
"2023-01-12",
"2023-01-13",
"2023-01-14",
"2023-01-15",
"2023-01-16",
"2023-01-17",
"2023-01-18",
"2023-01-19",
"2023-01-20",
"2023-01-21",
"2023-01-22",
"2023-01-23",
"2023-01-24",
"2023-01-25",
"2023-01-26",
"2023-01-27",
"2023-01-28",
"2023-01-29",
"2023-01-30",
"2023-01-31",
"2023-02-01",
"2023-02-02",
"2023-02-03",
"2023-02-04",
"2023-02-05",
"2023-02-06",
"2023-02-07",
"2023-02-08",
"2023-02-09",
"2023-02-10",
"2023-02-11",
"2023-02-12",
"2023-02-13",
"2023-02-14",
"2023-02-15",
"2023-02-16",
"2023-02-17",
"2023-02-18",
"2023-02-19",
"2023-02-20",
"2023-02-21",
"2023-02-22",
"2023-02-23",
"2023-02-24",
"2023-02-25",
"2023-02-26",
"2023-02-27",
"2023-02-28",
"2023-03-01",
"2023-03-02",
"2023-03-03",
"2023-03-04",
"2023-03-05",
"2023-03-06",
"2023-03-07",
"2023-03-08",
"2023-03-09",
"2023-03-10",
"2023-03-11",
"2023-03-12",
"2023-03-13",
"2023-03-14",
"2023-03-15",
"2023-03-16",
"2023-03-17",
"2023-03-18",
"2023-03-19",
"2023-03-20",
"2023-03-21",
"2023-03-22",
"2023-03-23",
"2023-03-24",
"2023-03-25",
"2023-03-26",
"2023-03-27",
"2023-03-28",
"2023-03-29",
"2023-03-30",
"2023-03-31",
"2023-04-01",
"2023-04-02",
"2023-04-03",
"2023-04-04",
"2023-04-05",
"2023-04-06",
"2023-04-07",
"2023-04-08",
"2023-04-09",
"2023-04-10",
"2023-04-11",
"2023-04-12",
"2023-04-13",
"2023-04-14",
"2023-04-15",
"2023-04-16",
"2023-04-17",
"2023-04-18",
"2023-04-19",
"2023-04-20",
"2023-04-21",
"2023-04-22",
"2023-04-23",
"2023-04-24",
"2023-04-25",
"2023-04-26",
"2023-04-27",
"2023-04-28",
"2023-04-29",
"2023-04-30",
"2023-05-01",
"2023-05-02",
"2023-05-03",
"2023-05-04",
"2023-05-05",
"2023-05-06",
"2023-05-07",
"2023-05-08",
"2023-05-09",
"2023-05-10",
"2023-05-11",
"2023-05-12",
"2023-05-13",
"2023-05-14",
"2023-05-15",
"2023-05-16",
"2023-05-17",
"2023-05-18",
"2023-05-19",
"2023-05-20",
"2023-05-21",
"2023-05-22",
"2023-05-23",
"2023-05-24"
],
"type": "category",
"silent": false,
"axisLine": { "show": true },
"axisLabel": {
"show": true,
"interval": "auto",
"showMinLabel": true,
"showMaxLabel": true
},
"scale": true,
"splitLine": { "show": false },
"splitArea": { "show": true }
},
"yAxis": { "type": "value", "axisLine": { "show": true } },
"series": [
{
"type": "bar",
"stack": "总量",
"name": "CPU",
"barMaxWidth": 40,
"label": { "show": false, "position": "insideRight" },
"large": true,
"data": [
41284.35, 47697.4, 8413.61, 9252.11, 31770.33, 35508.78, 46398.67,
58060.04, 18176.99, 36094.06, 9143.29, 29802.65, 3537.02, 47931.77,
45087.27, 16314.9, 56488.59, 34108.47, 32244.21, 13635.22, 58377.44,
462.67, 56279.27, 2491.55, 13690.14, 29416.47, 35530.21, 18119.02,
23853.13, 33763.83, 7201.61, 26889.05, 51124.77, 53054.58, 48729.74,
37691.94, 46411.41, 25579.66, 30987.66, 18372.65, 45733.25, 56040.3,
13739.55, 16133.89, 53678.09, 1180.71, 4276.45, 11854.02, 46574.02,
6939.56, 18079.92, 25200.51, 47832.78, 25691.29, 14248.72, 4032.22,
39072.21, 12722.16, 42049.24, 27181.52, 29552.25, 51946, 48863.94,
22122, 39071.33, 50454.55, 59850.52, 23004.45, 51904.63, 28075.69,
38243.83, 32189.07, 1613.23, 40114.69, 30133.03, 28253.31, 38028.55,
25430.73, 23515.73, 9958.14, 38543.8, 36322.66, 57980.19, 57456.79,
27707.03, 269.52, 7980.29, 17138.2, 432.99, 48010.12, 1241.83, 39925.79,
41015.29, 38714.92, 18084.32, 28493.39, 51526.46, 22794.2, 32825.65,
53792.55, 18065.35, 4739.43, 39413.07, 37827.19, 9056.71, 49265.35,
35348.52, 10957.42, 30322.44, 22973.19, 47500.12, 48545.9, 946.19,
19273.15, 22761.02, 40868.44, 775.85, 49775.87, 28345, 52012.99,
30051.59, 45289.68, 36900.8, 31460.81, 51110.19, 12397.24, 34578.01,
47720.53, 15712.89, 6756.28, 25762.61, 54078.42, 50010.54, 16609.55,
13129.16, 32402.43, 26270.31, 5681.48, 31295.89, 5824.84, 12550.59,
50847.39, 32752.45, 18003.45, 53884.61, 32547.36, 47514.46, 5961.97,
24958.12, 51028.81, 26937.62, 31497.45, 16485.2, 13467.6, 35387.98,
14217.41, 18260.78, 45292.45, 15902.32, 15645.63, 48198.75, 26858.24,
28383.47, 5838.99, 35127.11, 26490.36, 21835.39, 3394.33, 55933.54,
55142.88, 39673.89, 4071.1, 44240.5, 39103.1, 45423, 15899.4, 372.21,
4810.24, 15848.72, 10573.71
]
},
{
"type": "bar",
"stack": "总量",
"name": "GPU",
"barMaxWidth": 40,
"label": { "show": false, "position": "inside" },
"large": true,
"data": [
45656.8, 48919.63, 30686.44, 39105.29, 6583.58, 16579.54, 28757.36,
48880.32, 34710.97, 52267.01, 35244.55, 29465.79, 18699.38, 26708.27,
48610.16, 41065.65, 11168.56, 52782.18, 50920.27, 8510.37, 1054.53,
15473.91, 52598.26, 20234.36, 54710.49, 37693.7, 25479.18, 15601.02,
715.52, 47497.22, 30241.03, 15098.62, 36223.61, 39782.68, 31656.7,
52831.1, 4355.73, 13741.26, 2690.1, 8953.15, 40778.42, 40186.61,
29139.39, 34951.79, 29297.1, 13981.23, 50465.4, 52068.09, 24882.09,
11735.73, 24719.71, 26538.39, 54061.69, 17362.82, 27552.54, 39175.74,
35403, 45847.45, 39241.42, 21423.24, 28252.3, 15936.17, 51460.45,
38450.2, 36549.7, 8833.54, 49552.81, 11116.06, 7629.68, 23024.14,
46621.6, 48414.22, 34057.44, 16508.14, 8695.67, 9935.44, 23205.87,
459.17, 6058.89, 11538.15, 1691.72, 5674.09, 43659.65, 42399.6,
23885.54, 16819.74, 18714.28, 51726.61, 12924.85, 9741.92, 47726.78,
52780.24, 19201.93, 17926.32, 42666.5, 8034.12, 1942.08, 47110.64,
46218.2, 44514.71, 31623.2, 42708.9, 26215.12, 28139.43, 32497.47,
45742.64, 38990.36, 4446.69, 44520.51, 20765.67, 18069.18, 6911.16,
5579.52, 29354.69, 17215.26, 26342.73, 11537.4, 16678.75, 37653.87,
3944.92, 15016.5, 31703.34, 46996.72, 4255.04, 36405.66, 15890.87,
8085.44, 8727.37, 20420, 11387.02, 50816.76, 38010.23, 44139.63,
1437.55, 19776.06, 5491.32, 1402.23, 18269.63, 31190.68, 9546.1,
52578.27, 26100.02, 8729.68, 37343.21, 2299.31, 28782.83, 31684.85,
16185.26, 15100.92, 29155.27, 38192.58, 16588.44, 18377.32, 54143.88,
51351.67, 43105.14, 46469.82, 22805.7, 3730.43, 29585.85, 21114.32,
26529.31, 15564.97, 615.24, 32499.96, 43994.11, 36856.41, 19624.48,
7703.24, 17755.76, 47110.48, 54746.48, 23024.8, 3153.74, 39398.46,
31583.36, 9440.84, 10548.38, 8578.17, 17212.49
]
}
]
}
那问题肯定基本上就能定位是 v-charts在封装的时候对相关的配置信息做了些变更。
于是，使用 v-charts 组件的 afterSetOption 获取最终的配置信息：
控制台打印的最终 echarts 配置信息如下：
简单清理一些data数据后，使用 Beyond 进行数据对比，还真发现使用 v-charts 转换后的数据存在很大问题：
然后进一步跟踪相关源代码，发现在图表组件初始化的时候，不知为何将 xAxis 初始化为2个对象的数组：
然后在 optionsHandler 方法中将 extend 中的数据附加到option上就改变了原有数据
然后 setExtend 方法会把xAxis对象数据复制到目标数组内的每一个对象值里：
解决方案
问题分析过程中，认真阅读了下相关的核心源码，发现 v-charts 组件在执行echarts.setOption()前提供了 afterConfig的扩展点，可以基于该扩展点对前期生成的 option 进行修改：
为解决该问题，修改后的核心代码如下：
修复后的效果
总结
项目开发过程中出现问题往往不可怕，最重要的是需要静下心来定位问题，当知道问题的产生缘由后，往往解决问题的方法也就水到渠成了。
评论 (0)