Echarts个性化图表的样式--绘制南丁格尔图

最新推荐文章于 2023-05-16 09:59:12 发布

anphygvyti09102

最新推荐文章于 2023-05-16 09:59:12 发布

阅读量787

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/webBlog-gqs/p/7103907.html

版权

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>个性化图表的样式--绘制南丁格尔图</title>
</head>
<body>
<div id="main" style="width:800px;height:600px;"></div>
<script src="echarts.js"></script>
<script>
myChart = echarts.init(document.querySelector("#main"));
myChart.setOption({
backgroundColor:'#2c343c',
textStyle:{color:'rgba(255,255,255,.6)'},
roseType:'angle',//设置成 南丁格尔图
itemStyle:{
normal:{
color:'#c23531', //设置扇形的颜色
shadowBlur:200, //阴影的大小
shadowOffsetX:0, //阴影水平方向上的偏移
shadowOffsetY:0, //阴影垂直方向上的偏移
shadowColor:'rgba(255,255,255,.5)' //阴影颜色
}
},
series:[
{
name:'',
type:'pie',
radius:'55%',
data:[
{value:235,name:'视频广告',itemStyle:{normal:{color:'#243516'}}},
{value:135,name:'联盟广告'},
{value:350,name:'邮件营销'},
{value:146,name:'直接访问'},
{value:211,name:'搜索引擎'}
]
}
],
label:{
normal:{
textStyle:{
color:'rgba(255,255,255,.6)'
}
}
},
labelLine:{
normal:{
lineStyle:{
color:'rgba(255,255,255,.3)'
}
}
},
visualMap:{
show:false, //不显示visualMap组件,只用于明暗度的映射
min:80,
max:600,
inRange:{
colorLightness:[0,1] //明暗度的范围是0到1
}
}
})
</script>
</body>
</html>

转载于:https://www.cnblogs.com/webBlog-gqs/p/7103907.html

anphygvyti09102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts个性化图表的样式--绘制南丁格尔图

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>个性化图表的样式--绘制南丁格尔图</title></head><body><div id="main" style="...
复制链接

扫一扫