刚开始学习echart遇到了许多麻烦,对于各个属性的不了解和刚接触的陌生,让我学起来不知道怎么学
看到了别人可以再圆环中显示文字感觉很酷
- 看代码
<div id="app" style="width:600px;height:400px;margin:300px auto;"></div>
<script type="text/javascript">
var myApp = echarts.init(document.getElementById('app'));
var option={
legend:{//图例
orient:'horizontal',//布局方式
left:10,
data:['A','V','B','C','E'],
itemGap:20,//图例间隔默认10
itemHeight:14,
itemWidth:20,
textStyle:{//图例颜色
color:'#333'
}
},
series:[{
name:'显示提示信息',
type:'pie',
radius:['50%','70%'],//内半径,外半径
avoidLabelOverlap:false,//是否启用防止标签重叠策略 ,环形圆是false
label:{//饼图图形上的文本标签,可用于说明图形的一些数据信息,
show:false,
position:'center'// outside 饼图扇区外侧,通过引导线 inside 扇区内部 center饼图中心
},
emphasis:{
label:{
show:true,//是否显示标签
fontSize:'30',//默认12
fontWidth:'bold'
}
},
labelLine:{//如果是outside 才会有引线
show:false //是否显示视觉引导线
},
data:[
{value:333,name:'直接访问'},
{value:310,name:'邮件'},
{value:210,name:'视频'},
{value:130,name:'引擎'},
{value:130,name:'广告'},
]
}]
}
myApp.setOption(option)
</script>
其实不需要那么复杂,看注释就行了,
多学习多总结多挑战