实现
echarts之环形图环形图，实际上就是饼图，，先贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<!--引⼊echarts⽂件-->
<script src="../js/echarts.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../theme/dark.js"></script>
<title>柱状图</title>
</head>
<body>
<!--准备⼀个dom容器-->
<div id="main" ></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts
var myChart = echarts.ElementById('main'));
option = {
tooltip: {//提⽰框，可以在全局也可以在
trigger: 'item', //提⽰框的样式
formatter: "{a} <br/>{b}: {c} ({d}%)",
color:'#000', //提⽰框的背景⾊
textStyle:{ //提⽰的字体样式
color:"black",
}
绿杨馄饨},
legend: { //图例
orient: 'vertical', //图例的布局，竖直 horizontal为⽔平
x: 'right',//图例显⽰在右边
data:['直接访问','邮件营销','联盟⼴告','视频⼴告','搜索引擎'],蝇眼照相机
textStyle:{ //图例⽂字的样式
color:'#333', //⽂字颜⾊
韩国电影排行榜前十名fontSize:12 //⽂字⼤⼩
}
电脑桌面壁纸美女},
ries: [
{
name:'访问来源',
type:'pie', //环形图的type和饼图相同
radius: ['50%', '70%'],//饼图的半径，第⼀个为内半径，第⼆个为外半径
avoidLabelOverlap: fal,
color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
label: {
normal: { //正常的样式
show: true,
position: 'left'
},
emphasis: { //选中时候的样式
show: true,
textStyle: {
fontSize: '20',
fontWeight: 'bold'
}
}
}, //提⽰⽂字
labelLine: {
normal: {
show: fal
}
},
data:[
{value:335, name:'直接访问'},缺少dll
{value:310, name:'邮件营销'},
{value:234, name:'联盟⼴告'},
妖桃{value:135, name:'视频⼴告'},
{value:1548, name:'搜索引擎'}
清白拼音]
}
]
};
myChart.tOption(option);
</script>
</body>
</html>
效果图⼊下
