解决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);
}
