<!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>
时间： 2024-10-05 23:30:28