echarts环形图的制作
环形图与扇形图的差别就是在radius: '55%',
和radius: ['20%','45%'],
就是插入的圆环是一个圆还是两个圆的区别,这里的数字代表的是半径的值,然后就可以和之前制作扇形图一样制作环形图了。
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
],
function (ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: '办税人年龄段分布',
x:'center'
},
// tooltip: {
// trigger: 'item',
// formatter: "{a} <br/>{b}: {c} ({d}%)"
// },
backgroundColor:'#fff',
legend: {
// orient: 'vertical',
x: 'left',
y:'bottom',
data:['20以下','20-30','30-40','40-50','50以上']
},
calculable:true,
series: [
{
name:'访问来源',
type:'pie',
radius: ['20%','45%'],
itemStyle : {
normal : {
label : {
show : true,
formatter: "{b}: ({d}%)",
},
labelLine : {
show : true,
// length:10
},
borderWidth:5, //设置border的宽度有多大
borderColor:'#fff',
},
},
data:[
{value:335, name:'20以下'},
{value:310, name:'20-30'},
{value:234, name:'30-40'},
{value:135, name:'40-50'},
{value:1048, name:'50以上'},
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
制作出来的效果如下
这里做出来的环形图有一个外边框,我制作的时候要求有,如果不想要可以将其去除,对应上面的代码calculable:true,
将其改为false即可。还有一个地方值得注意的是我这里加了一个borderWidth:5;设置的是每个扇环之间的间隔距离,如果不想要也可以删除。
利用echarts做图表非常的方便,但是细节上还需要多加学习,这是我学习之后的直观感觉