<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>深色背景和浅色标签</title>
<script type="text/javascript" src="echarts.min.js"></script>
<style type="text/css">
.bt{
width: 990px;
height: 600px;
}
</style>
</head>
<body>
<div id="main" class="bt"></div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById("main"));
//指定图表的配置和数据
var option={
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
title:{
text:'某站点用户访问来源',
subtext:"阿里波特的魔法",
color: '#fff',
x:'center'
},
tooltip:{
trigger:"item",
formatter:"{a}
{b}:{c}({d}%)"
},
legend:{
orient:'vertical',
left:"left",
// color:"white",
// color: 'rgba(255, 255, 255, 0.3)',
data:["直接访问","邮件营销","联盟广告","视频广告","搜索引擎"]
},
series:[
{
name:"访问来源",
// roseType: 'angle',
type:"pie",
radius:"55%",
center:["50%","60%"],
//更改阴影，透明度，颜色，边框颜色，边框宽度
itemStyle: {
//normal选项是正常展示下的样式
// normal: {
// // 阴影的大小
// shadowBlur: 200,
// // 阴影水平方向上的偏移
// shadowOffsetX: 0,
// // 阴影垂直方向上的偏移
// shadowOffsetY: 0,
// // 阴影颜色
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
//鼠标hover的时候的高亮样式
emphasis:{
shadowBlur:200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data:[
{value:"335",name:"直接访问"},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
//绑定图表
}
myChart.setOption(option);
</script>
</body>
</html>
效果图
