<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>深色背景和淺色標(biāo)簽</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:'某站點(diǎn)用戶訪問來源',
subtext:"阿里波特的魔法",
color: '#fff',
x:'center'
},
tooltip:{
trigger:"item",
formatter:"{a}
涩赢:{c}(3vkvkb7%)"
},
legend:{
orient:'vertical',
left:"left",
// color:"white",
// color: 'rgba(255, 255, 255, 0.3)',
data:["直接訪問","郵件營(yíng)銷","聯(lián)盟廣告","視頻廣告","搜索引擎"]
},
series:[
{
name:"訪問來源",
// roseType: 'angle',
type:"pie",
radius:"55%",
center:["50%","60%"],
//更改陰影，透明度轩勘，顏色筒扒，邊框顏色，邊框?qū)挾?br>
itemStyle: {
normal: {
// 設(shè)置扇形的顏色
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
data:[
{value:"335",name:"直接訪問"},
{value:310, name:'郵件營(yíng)銷'},
{value:234, name:'聯(lián)盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
]
}
]
//綁定圖表
}
myChart.setOption(option);
</script>
</body>
</html>
效果圖
