<!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}
:{c}(lcngcpz%)"
},
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: {
// 設置扇形的顏色
color: '#c23531',
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>
效果圖
