<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts.min.js"></script>
</head>
<body style="background-color:#151414">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:900px;height: 300px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
top: '15%',
left: 'center',
textStyle:{
color:"#ffffff"
},
formatter: function(name) {
// 获取legend显示内容
let data = option.series[0].data;
let total = 0;
let tarValue = 0;
for (let i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
let p = (tarValue / total * 100).toFixed(2);
return name + ' ' + ' ' +tarValue +' ' + p + '%';
},
},
series: [
{
name: '',
type: 'pie',
width:'450px',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: "搜索引擎"},
{ value: 735, name: "直接访问"},
{ value: 580, name: "邮件营销"},
{ value: 484, name: "联盟广告"},
{ value: 300, name: "视频广告"},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
posted on
