eacharts 嵌套饼圆
<script src="../js/echarts.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var mychart = echarts.init(document.getelementbyid('main'));
// 指定图表的配置项和数据
option = {
tooltip: {
show: true,
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
toolbox: {
show: true,
},
calculable: true,
series: [{
// 小圆
name: '访问来源',
type: 'pie',
center: ['50%',200], //位置
radius: 80,
itemstyle: {
normal: {
label: {
position: 'inner',
formatter: function (params) {
return (params.percent - 0).tofixed(0) + '%'
}
},
labelline: {
show: false
}
},
emphasis: {
label: {
show: true,
formatter: "{b}\n{d}%"
}
}
},
// 中间部分
data: [{
value: 335,
name: '直达'
},
{
value: 679,
name: '营销广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
},
{
// 大圆
name: '访问来源',
type: 'pie',
center: ['50%', 200],
radius: [110, 140],
data: [{
value: 335,
name: '直达'
},
{
value: 310,
name: '邮件营销'
},
{
value: 234,
name: '联盟广告'
},
{
value: 135,
name: '视频广告'
},
{
value: 1048,
name: '百度',
itemstyle: {
normal: {
color: (function () {
// var zrcolor = require('zrender/tool/color');
// return zrcolor.getradialgradient(
// 300, 200, 110, 300, 200, 140,
// [[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
// )
})(),
label: {
textstyle: {
color: 'rgba(30,144,255,0.8)',
align: 'center',
baseline: 'middle',
fontfamily: '微软雅黑',
fontsize: 30,
fontweight: 'bolder'
}
},
labelline: {
length: 40,
linestyle: {
color: '#f0f',
width: 3,
type: 'dotted'
}
}
}
}
},
{
value: 251,
name: '谷歌'
},
{
value: 102,
name: '必应',
itemstyle: {
normal: {
label: {
show: false
},
labelline: {
show: false
}
},
emphasis: {
label: {
show: true
},
labelline: {
show: true,
length: 50
}
}
}
},
{
value: 147,
name: '其他'
}
]
},
]
};
// 使用刚指定的配置项和数据显示图表。
mychart.setoption(option);
</script>
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论