一.堆积柱状图
1.应用情况：堆积图既能看到各数据系列的走势，又能看到整体的规模和不同数据项的占比情况。
适合用于堆积柱形图的指标，应该是这多个指标，是组成一个大指标的局部成分的局部指标。用堆积来反映局部与整体的成分关系，而且这个堆积出来的结果也要是有意义的才适合。
2.优点：直观清晰
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title:{
text:'会员年龄分部',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['18-20', '21-25', '26-30', '31-35', '36-40', '41-45', '45及以上']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Direct',
type: 'bar',
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Email',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果展示：
二.瀑布图的绘制
1.瀑布图其实是柱状图的一种特例，其核心是按照维度或指标下钻分解。
2.优点：当拆解项较多时，通过数字的标记依旧清晰辨识。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '城市消费总金额',
subtext: 'Living Expenses in Shenzhen'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
splitLine: { show: false },
data: ['总金额', '上海', '武汉', '广州', ]
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Placeholder',
type: 'bar',
stack: 'Total',
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
},
emphasis: {
itemStyle: {
borderColor: 'transparent',
color: 'transparent'
}
},
data: [0, 1800, 800, 0]
},
{
name: 'Life Cost',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'inside'
},
data: [3000, 1200, 1000, 800]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果图展示：
三.饼图的绘制
1.
Echarts饼图的特点如下：
直观的数据占比展示：饼图通过不同大小的扇形来表示数据的比例和占比关系，直观地展示了数据的分布情况。饼图适用于展示相对比例关系和部分占整体的数据。
多样的样式配置：Echarts饼图提供了丰富的样式配置选项，可以自定义扇形的颜色、内外半径、标签样式等，以及整个图表的标题、图例等，使图表更具个性化。
交互操作丰富：Echarts饼图支持选中、高亮、点击事件等交互操作，用户可以与饼图进行交互，进行数据的筛选和查看。
动画效果：Echarts可以为饼图添加动画效果，使图表在加载或数据更新时呈现平滑的过渡效果，增强用户的视觉体验。
兼容性强：Echarts饼图能够兼容主流的浏览器，并且提供了响应式布局的功能，可以自适应不同的屏幕尺寸。
可扩展性好：Echarts提供了丰富的扩展插件和主题，用户可以根据需求自定义图表的功能和外观。同时，Echarts还支持与其他前端框架（如Vue、React）的集成，方便开发者更好地使用和扩展。
2.代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: {
text: '入会方式',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果展示：
四.绘制环形图
1.环形图，又称为甜甜圈图，其本质是饼图将中间区域挖空
环形图中间有一个圆形空白，一个环表示一个数据集，数据集中的每一个数据变量都由一段环带表示
优点：在占比方面，环形图相较于饼图更容易让人把视觉重心从面积转移到长度上来，在肉眼观察数据占比情况的分析上，环形图更有视觉优势相对于饼图空间的利用率更高，比如我们可以使用环形图的空心区域补充说明数据的相关信息，这部分往往更能吸引人的注意力，使用得当更有利于读者理解数据信息
功能：对比分类数据的数值大小
适合的数据：列表(包含两个字段，一个分类数据字段、另一个是连续数据字段)，其中分类数据字段映射到环形的颜色，连续数据字段映射到环形的角度
适合的数据条数：不超过9条数据
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title:{
backgroundColor:'yelow',
text:'会员来源结构分析',
left:'10',
top:'70',
textStyle:{
color:'red',
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果展示：
注意
1.环形图不适合分类过多的场景
举个栗子：统计中国各个省的人口的占比情况，由于包含的分类过多(共计34个省级行政区，包括23个省、5个自治区、4个直辖市、2个特别行政区)，很难清晰对比各个省份的人口数据占比情况，所以这种情况下，推荐使用条形图进行结果展示
2.环形图不适合分类占比差别不明显的场景
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
