PS相关学习资料链接:Pink老师的教程分解
效果:
1.html结构
<div class="pannel age">
<h2>圆环饼图</h2>
<div class="chart">
图表
</div>
</div>
2.css自行设置chart位置的宽和高
3.js逻辑:
//饼图:年龄分布
(function() {
var myChart = echarts.init(document.querySelector(".age .chart"));
var option = {
color: [
"#065aab",
"#066eab",
"#0682ab",
"#0696ab",
"#06a0ab",
],
tooltip: {
trigger: 'item', //类目触发,axis是坐标轴触发
formatter: '{a}<br />{b}:{c}({d}%)'
//a:年龄分布:series里的name
//b:搜索引擎:series里的data的name
//c:1048:series里的data的value
//d:echarts自己将值换算的百分数
},
legend: {
bottom: '0%',
// 距离底部为0%
bottom: "0%",
// 小图标的宽度和高度
itemWidth: 10,
itemHeight: 10,
textStyle: { //图例文字的样式
color: 'rgba(255, 255, 255, 0.5)'
}
},
series: [{
name: '年龄分布',
type: 'pie',
// 设置饼形图在容器中的位置
center: ["50%", "50%"],
//内圆半径和外圆半径
radius: ['30%', '60%'],
avoidLabelOverlap: false,
不显示标签文字
label: {
show: false
},
// 不显示连接线(图形和文字之间的线)
labelLine: {
show: false
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}]
};
myChart.setOption(option);
//让图表跟随屏幕自适应
window.addEventListener("resize", function() {
myChart.resize();
});
})();