<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="echarts.min (1).js">
</script>
</head>
<body>
<img src="../Picture/1.jpg"/>
<div id="main" style="width: 900px; height: 600px;">
</div>
<script type="text/javascript">
var myChart=echarts.init(document.getElementById('main'));
var option={
//显示标题
title:{
text:'某站点用户访问来源',
subtext:'纯属虚构',
x:'center'
},
//浮动提示框,模版
tooltip:{
trigger:'item',
formatter:"{a}<br/>{b}:{c} ({d}%)"
},
// 图例,竖直排列,在左边
legend:{
orient:'vertical',
left:'left',
data:['直接访问','永久的地位','张三','李四','送二']
},
series:[
{
name:'访问来源',
type:'pie',
radius:'55%',
//圆心的位置
center:['50%','60%'],
//数据的值是多少,与上面的值绑定
data:[
{value:335,name:'直接访问'},
{value:435,name:'永久的地位'},
{value:535,name:'张三'},
{value:635,name:'李四'},
{value:735,name:'送二'}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
echarts画饼图
最新推荐文章于 2023-10-21 16:41:50 发布