页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

(本文档仅供参考)

...

问题1:实线&颜色边框

        如何在柱图上设置边框。

解决方案

以下示例为自助仪表盘中的多系列的自定义属性:

代码块
{
	"series": [
		{
			"itemStyle": {
				"normal": {
					"color": "#87CEEB",
                     //边框
					"borderWidth": 1,
					"borderColor": "#00FFFF"
				}
			}
		},
		{
			"itemStyle": {
				"normal": {
					"color": "#90EE90",
                     //边框
					"borderWidth": 1,
					"borderColor": "#00FF7F"
				}
			}
		}
	]
}


问题2:虚线边框

如何给柱图的柱子添加虚线边框

解决方案

可以使用如下扩展属性:

{
"series": [
{
"itemStyle": {
"normal": {
"barBorderWidth": 2,
"barBorderColor": "#FFCCA3",
"borderType": "dotted"//这一行属性就是虚线
}
}
}
]
}

实现效果如下图所示:

image2023-10-9_19-23-32.pngImage Added

涉及的属性说明也可查看echarts官网:

https://echarts.apache.org/zh/option.html#series-bar.itemStyle.borderType

image2023-10-9_19-24-21.pngImage Added