<!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"));
//指定圖表的配置和數(shù)據(jù)
var option={
backgroundColor: '#2c343c',
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
title:{
text:'某站點用戶訪問來源',
subtext:"阿里波特的魔法",
color: '#fff',
x:'center'
},
tooltip:{
trigger:"item",
formatter:"{a}
:{c}(pnhpnp1%)"
},
legend:{
orient:'vertical',
left:"left",
// color:"white",
// color: 'rgba(255, 255, 255, 0.3)',
data:["直接訪問","郵件營銷","聯(lián)盟廣告","視頻廣告","搜索引擎"]
},
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:'聯(lián)盟廣告',itemStyle:{
normal:{
color:"#336699"
}
}},
{value:135, name:'視頻廣告',itemStyle:{
normal:{
color:"#660066"
}
}},
{value:1548, name:'搜索引擎',itemStyle:{
normal:{
color:"#66CC99"
}
}}
]
}
]
//綁定圖表
}
myChart.setOption(option);
</script>
</body>
</html>
效果圖
