<!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%"],
data:[
{value:"335",name:"直接访问",itemStyle:{
normal:{
color:"#c23531"
}
}},
{value:310, name:'邮件营销',itemStyle:{
normal:{
color:"#EB745F"
}
}},
{value:234, name:'联盟广告',itemStyle:{
normal:{
color:"#336699"
}
}},
{value:135, name:'视频广告',itemStyle:{
normal:{
color:"#660066"
}
}},
{value:1548, name:'搜索引擎',itemStyle:{
normal:{
color:"#66CC99"
}
}}
]
}
]
//绑定图表
}
myChart.setOption(option);
</script>
</body>
</html>
效果图
