echarts实现环形图 颜色渐变以及圆角
echarts实现环形图 颜色渐变以及圆角
·
1、第一步 添加圆角
series中做如下配置
series: [{
...
type: 'pie', // 类型设置为饼图
radius: ['68%', '90%'], // 设置内圈与外圈的半径使其呈现为环形
center: ['37%', '50%'], // 圆心位置, 用于调整整个图的位置
data: data, // 数据
itemStyle: {
borderRadius: 60, // 设置每一段子项目的圆角
borderWidth: 10, // 子项目间距
}
...
}]
2、渐变实现
在series中加入color设置如下
color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FC6679 " },
{ offset: 1, color: "#FDC581 " }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#AF3ADB" },
{ offset: 1, color: "#4E65DD" }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FC6679" },
{ offset: 1, color: "#FDC581" }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#02CEFC" },
{ offset: 1, color: "#0272ED" }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#7FC268" },
{ offset: 1, color: "#0BBBB7" }
]),
new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#E7B115" },
{ offset: 1, color: "#F5814C" }
])
]
3.实现效果图
更多推荐
已为社区贡献1条内容
所有评论(0)