码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-02 10:29:35      阅读:447      评论:0      收藏:0      [点我收藏+]

标签:map   select   tor   shadow   document   ext   html   item   art   

<!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>

 

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

标签:map   select   tor   shadow   document   ext   html   item   art   

原文地址:http://www.cnblogs.com/webBlog-gqs/p/7103907.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!