ucharts柱状图自定义颜色无效？

解决ucharts柱状图某列自定义颜色无效问题

今天遇到一个坑，自己不够仔细。利用官网Demo中的"温度计图表"，实现设备的单节电压显示，通过排序最大值和最小值，标识不同颜色显示。发现怎么设置颜色都不生效…

解决设置颜色不生效问题

• 在 opts. type下修改图表类型，把原来 meter 修改 group

opts: {
	extra: {
         column: {
           	type: "group" // "meter",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            meterBorder: 3,
            meterFillColor: "#EBFBD6"
         }
    }
}

效果图

Demo实现

<view class="charts-box">
    <qiun-data-charts 
      type="column"
	  :opts="opts"
      :chartData="chartData"
	  :ontouch="true"
	  :tooltipShow="false"
    />
</view>

data() {
	return {
		chartData: {},
		opts: {
			// 部分配置，根据个人所需，这里没封装，仅测试
			color: ["#73C0DE", "#FAC858"],
			padding: [10, 0, 0, 5],
			touchMoveLimit: 24,
			enableScroll: true, // 开启滚动条，X轴配置里需要配置itemCount单屏幕数据点数量
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true, // 绘制网格
				rotateLabel: true, // 旋转文字
				itemCount: 14,
				// scrollShow: true, // 是否显示滚动条
				marginTop: 5,
				fontSize: 12,
				fontColor: '#ff6828'
			},
			yAxis: {
				data: [{
					min: 0,
					max: 5,
					format: "yAxisUnit"
				}],
				// disableGrid: true
			},
			extra: {
				column: {
					type: "group",
					width: 15,
					meterBorder: 1,
					meterFillColor: "#a8ff78",
				}
			}
		}
	}
}

getServerData() {
	// 模拟请求数据
	setTimeout(() => {
		let datas = [3.05, 3.11, 3.08, 3.13, 3.05, 3.15, 3.02, 3.12];
		let xMax = Math.max(...datas);
		let xMin = Math.min(...datas);
		
		let valueList = datas.map(item => {
			let color = '#a8ff78'
			if (item == xMax) color = '#FF0000';
			if (item == xMin) color = '#fdab17';
			return {
				value: item,
				color
			}
		})

		let res = {
			categories: datas,
			series: [{
				textSize: 10,
				format: 'seriesUnit',
				data: valueList
			}]
		};
		this.chartData = JSON.parse(JSON.stringify(res));
	}, 500);
}