(本文档仅供参考)

问题1:

   

        希望在自助仪表盘中实现柱图颜色设置,请问如何在自主仪表盘中实现柱图颜色类似于电子表格做柱图的颜色设置:https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=35750506

解决方案

         自助仪表盘的柱图是在series[{}]属性中的data[{}]进行设置的,如果有多少条数据就设置 "itemStyle": {"normal": {"color": "#FFAF00"}} 多少次,具有可参考如下设置:

         

          

           

{
	"series": [
		{
			"data": [
				{
					"itemStyle": {
						"normal": {
							"color": "#FFAF00"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#004151"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#00B7BF"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#F9334C"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#FFAF00"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#004151"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#00B7BF"
						}
					}
				},
				{
					"itemStyle": {
						"normal": {
							"color": "#F9334C"
						}
					}
				}
			]
		}
	]
}

      最终效果:


问题2:

需要实现柱图设置多个柱子中的颜色,柱图是由并列轴+一个指标构成,如图:

image2023-3-7_10-18-59.png

解决方案

1、可设置自定义图形主题实现

image2023-3-7_10-20-11.png

2、或者用扩展属性实现,示例:

1
2
3

{
    "color": ["#FFAF00", "#004151", "#00B7BF"], //多个柱子就设置多个颜色
}   

     最终预览效果如下:

image2023-3-7_10-21-57.png


问题3:

图形中有两个指标Y轴,想自定义修改柱子的颜色,怎么实现

image2021-3-19_14-13-39.png

解决方案

可以使用扩展属性实现,如下:

{
    "series": [{
        "itemStyle": {
            "normal": {
                "color": 'blue'
            }
        }
    }, {
        "itemStyle": {
            "normal": {
                "color": 'red'
            }
        }
    }]
}


效果图如下:

image2021-3-19_14-15-14.png


问题4:

        如何修改瀑布图的颜色?

解决方案

         可扩展属性,自定义瀑布图柱子的颜色:

{
    "series": [{}, {
        "data": [{
            "itemStyle": { //第一列柱子
                "normal": {
                    "color": "#FFAF00"   //自定义柱子颜色
                }
            }
        }, {
            "itemStyle": { //第二列柱子
                "normal": {
                    "color": "#004151"
                }
            }
        }]
    }]
}

  图1.png

效果:

图2.png