uchart的y轴对应与数据从大到小排序

141 阅读1分钟

image.png

y轴对应,主要是两个柱形图都设置index:0,折线图设置index:1

async getCountSupvProblem() {
				const result = await getCountSupvProblem({
					year: this.dateValue
				});

				const arr = Object.keys(result).sort((a, b) => {
					return result[b].problemNum - result[a].problemNum
				}).map(k => [k, result[k]])
				const arr2 = new Map(arr)
				console.log(arr2)

				let map0 = [...arr2.keys()];
				let map1 = [...arr2.values()];
				let map2 = [...arr2.entries()];

				let problemNumList = [];

				let problemRateList = [];

				let rectificationRateList = [];
				map1.map(i => {
					problemNumList.push(i.problemNum)

					problemRateList.push(i.problemRate)

					rectificationRateList.push(i.rectificationRate)
				})
				let rectificationRateList2 = []
				rectificationRateList.map(i => {
					rectificationRateList2.push(i.replace('%', ''))
				})

				let problemNumList2 = problemNumList.map(Number)
				let problemRateList2 = problemRateList.map(Number)
				let rectificationRateList3 = rectificationRateList2.map(Number)
				let cityNameList = [];
				for (let cityName in result) {
					// 城市名称列表
					cityNameList.push(cityName);
				}
				let options = {
					categories: cityNameList,
					series: [{
							name: "问题数量",
							type: "column",
							data: problemNumList2,
							index: 0,
						},
						{
							name: "问题发现比率(%)",
							type: "column",
							data: problemRateList2,
							index: 0,
						},
						{
							name: "问题整改率(%)",
							type: "line",
							addPoint: true,
							data: rectificationRateList3,
							index: 1,
						},
					]
				};

				this.opts3 = {
						dataLabel: true,
						color: ["#4089B4", "#00FF00", "#FFC233"],
						padding: [0, 0, 10, 0],
						enableScroll: true, //开启图表拖拽功能
						scrollAlign: 'left', //图表滚动条起始位置

						legend: {
							position: 'top',
							float: 'right',
							padding: 10,
						},
						xAxis: {
							disableGrid: true,
							fontSize: 12,
							gridType: 'dash',
							itemCount: 5, //x轴单屏显示数据的数量,默认为5个
							scrollShow: true, //新增是否显示滚动条,默认false
							scrollAlign: 'left', //滚动条初始位置
						},
						yAxis: {
							disabled: false,
							disableGrid: false,
							splitNumber: 5,
							gridType: "dash",
							dashLength: 4,
							gridColor: "#CCCCCC",
							padding: 10,
							showTitle: true,
							data: [{
									position: "left",
									title: "问题数量",
									titleOffsetY: -7,
									min: 0,
									textAlign: "left",
									fontSize: 12,
								},
								{
									position: "right",
									title: "",
									min: 0,
									max: 100,
									title: "",
									textAlign: "right",
									fontSize: 12,
								},

							]
						},
						extra: {
							mix: {
								column: {
									width: 10,

								}

							},
						},
					},
					this.chartData3 = options;
			},