FAQ中心
页面树结构
转至元数据结尾
转至元数据起始

（本文档仅供参考）

问题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轴柱子颜色修改


图形中有两个指标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


问题5:3D柱图颜色修改


Echarts图形的3d柱图如何修改默认的柱子颜色呢？

原始3d柱图.jpg

实现方案

此示例的扩展属性如下，相关的属性可以上echarts官网查看，http://echarts.baidu.com

{
 
 
    "visualMap": {
 
 
        "show": true,
 
 
        "min": 0,
 
 
        "max": 140,//标记染色的数值区间
 
 
        "inRange": {
 
 
            "color":
["#EED2EE", "#FFDAB9", "#EED2EE",
"#EECBAD", "#FFC1C1", "#F08080"]
 
 
        }//表示标记颜色，数值由小到大
 
 
    }
 
 
}

代码解释.jpg

最终效果如图:

改完效果.jpg



Viewtracker License Missing

There is a problem with the license of the Viewtracker addon. Please check if you have a valid license.

授权码细节