目录
一、圆环图
圆环图是在圆环中显示数据的图形，其中每一个圆弧代表一个数据项，用于对比分类数据的数值大小。在绘制环形图时，适合用一个分类数据字段或连续数据字段，但数据最好不超过9条。
制作圆环图，只需要在饼图的代码中将“radius”中的数据修改一下，修改后的半径是两个数值的数组，分别代表圆环的内外半径。
绘制圆环图的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
option = {
title: {
text: '影响人健康的各类因素',
subtext: 'WHO调查报告显示',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['50%','70%']
data: [
{ value: 1048, name: '被污染的食物' },
{ value: 735, name: '不健康的作息' },
{ value: 250, name: '经常不运动' },
{ value: 300, name: '遗传因素' },
{ value: 500, name: '长期抑郁的心情' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>上面代码展示的结果如图：
二、绘制嵌套饼图
嵌套饼图用于在每个类别中再嵌套多个类别，反映各类数据之间的比例关系。嵌套饼图有两种饼图的嵌套，外层是一个环形图，内层是一个标准饼图或环形图。
还有一个重要的，要加入交互功能，根据需要，可以为嵌套圆环添加交互功能，如tooltip提示框的自定义显示内容，使用户在鼠标悬停时可以获取更多信息。
绘制嵌套饼图的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: '某大学三大院专业分布',
subtext: '官网',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
top: 'center',
},
toolbox: {
show: true,
left: 'right',
top: 'top',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnelAlign: 'left',
max: 1548
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: '专业名称',
type: 'pie',
radius: ['30%', '20%'], // 内层圆环的半径
data: [
{value: 1200, name: '计算机学院'},
{value: 900, name: '大数据学院'},
{value: 600, name: '财经学院',selected:true}
],
label: {
show: false,
},
formatter: function(params) {
if (params.name === '某些不想显示的名称') {
return '';
}
return params.name + ': ' + params.percent + '%';
} ,
labelLine: {
show: false ,
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
}
},
{
name: '具体成绩',
type: 'pie',
radius: ['40%', '55%'], // 外层圆环的半径
avoidLabelOverlap: false,
clockWise: true,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: true
},
data: [
{value: 17, name: '软件应用技术'},
{value: 13, name: '大数据技术'}, // 即便数学不及格，也显示其数值
{value: 12, name: '物联网技术'},
{value: 21, name: '投资理财'},
{value: 37, name: '物流管理'}
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>上面代码的展示图如下：
三、绘制南丁格尔玫瑰图
南丁格尔政瑰图又名鸡冠花图、极坐标区域图，亡將柱图转化为更美观的饼图形式，是极坐标化的柱图，是夸大了数据之问差昇的视觉效果，适合用于对比数据原本差昇小的数括。
在ECharts 中绘制南丁格尔玫瑰因时，参数与标准饼图没有差别，但是南丁格尔玫瑰图有一个特殊的参数—roseType(称为南丁格尔玫瑰图模式)。该模式可以使用的值有两种：radius(¥径)利 arca(面积）。当使用半径模式时，以各个 itemn 的值作为扇形的半径，一般情况下，半径模式可能造成较大的失真：当使用面积模式时，以各个itom 的值作为扇形的面积，一般情况下，面积模式的失真较小。
绘制南丁格尔玫瑰图的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 1000px; height: 800px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
option = {
title: {
text: '二年级学院分布',
backgroundColor:'#B5A642',
textStyle:{
fontSize:18,
fontFamily:"黑体",
color:"#9932CD"
},
},
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [50, 250],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: '大数据技术' },
{ value: 38, name: '人工智能' },
{ value: 32, name: '外国语' },
{ value: 30, name: '机器人' },
{ value: 28, name: '艺术' },
{ value: 26, name: '财经' },
{ value: 22, name: '机电' },
{ value: 18, name: '建工' }
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>上面代码展示的结果如图所示：
四、实例演示
1.会员基本信息及消费能力对比分析
需求说明
“会员信息表.xlsx” 文件记录了某鲜花店销售系统上的会员信息，具体内容包括会员编号、姓名、性别、年龄、城市、入会方式、会员级别、会员入会日、vD 建立日、购买总金额、购买总次数等信息。绘制标淮条形图分析会员入会渠道，绘制堆积柱状图分析会员年龄分布，绘制瀑布图分析不同城市会员消费总金额分布。
实现思路及步骤
(1）在vs Code 中依次创建 了个buml 文件，分别为 stackBar.htunl、standBar.btnl 和
falls.html.
(2）绘制堆积柱状图。首先，在stackBar.biml 文件中 入echartsijs 库文件。其次，准备一个具备大小(weight 与 heigho的 dix 容器，并使用 inito方法初始化容器。最后设置堆积柱状图的配置项、“性别” 与“入会方式”数据完成堆积柱状图绘制。
(3) 绘制标准条形图。首先，在standBar.btml 文件中 入echartsjs 库文件。其次，准备一个具备大小(weight 与 heighD的 div 容器，并使用 init0方法初始化容器。最后设置标淮条形图的配置项、“性别”与“年龄”数据完成标准条形图绘制。
(4) 绘制瀑布图。首先，在talls.hunl 文件中引入echarts.is 库文件。其次，准备一个具备大(weight 与 height）的 div 容器，并使用 init()方法初始化容器。最后设置瀑布图的配置项、“城市”与“购买总金额”数据完成瀑布图的绘制。
成果展示
绘制上述要求图表的代码如下：
(1) 绘制堆积柱状图
<!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: '',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 设置坐标轴指示器，坐标轴触发有效
type: 'shadow' // 设置坐标轴默认为直线，可选为:'line'|'shadow'
}
},
legend: {
data: ['男', '女']
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar', 'stack', 'tiled']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
xAxis: [{
type: 'category',
data: ['15～18岁', '18～25岁', '25～35岁']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '女',
type: 'bar',
stack: '年龄段', // 设置堆积效果
data: [3, 4, 6]
},
{
name: '男',
type: 'bar',
stack: '年龄段', // 设置堆积效果
data: [5, 3, 4],
markLine: {
itemStyle: {
normal: {
lineStyle: {
type: 'dashed'
}
}
},
}
},
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>上面代码展示的结果如图所示：
(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: 800px; height: 400px"></div>
<script type="text/javascript">
// 基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: {
text: '会员入会渠道分布情况',
subtext: '',
},
tooltip: {
trigger: 'axis',
},
legend: {
data: ['男', '女'],
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
},
},
},
calculable: true,
xAxis: [{
type: 'value', // 设置柱状图
boundaryGap: [0, 0.01],
}, ],
yAxis: [{
type: 'category',
data: ['被吸引', '抖音', '微博', '外卖软件'],
}, ],
series: [{
name: '女',
type: 'bar',
data: [4, 5, 3, 2],
},
{
name: '男',
type: 'bar',
data: [2, 5, 3, 6],
},
],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果图：
(3)瀑布图的绘制
代码：
<!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: '',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 设置坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[0];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
xAxis: [{
type: 'category',
splitLine: {
show: false
},
data: ['武汉', '重庆', '上海', '云南']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '消费金额',
type: 'bar',
stack: '总量',
itemStyle: {
normal: { // 设置正常情况下柱子的样式
//barBorderColor: 'rgba(0,0,0,0)', // 设置柱子边框的颜色
barBorderColor: 'rgba(20,20,0,0.5)',
barBorderWidth: 5, // 设置柱子边框的宽度
//color: 'rgba(0,8,9,0)' // 设置柱子的颜色
color: 'rgba(0,220,9,0.8)'
},
emphasis: { // 设置鼠标滑过时柱子的样式
barBorderColor: 'rgba(0,0,0,0)', // 设置鼠标滑动到柱子边框的颜色
barBorderWidth: 20, // 设置鼠标滑动到柱子边框的宽度
color: 'rgba(0,6,5,1)' // 设置鼠标滑动到柱子的颜色
}
},
data: [0, 2500, 1100, 0]
},
{
name: '工资',
type: 'bar', // 设置柱状图
stack: '总量', // 设置堆积
itemStyle: {
normal: {
label: {
show: true,
position: 'inside'
}
}
},
data: [3200, 1500, 1390, 1200]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>效果图：
2.会员来源结构分析
需求说明
基于“会员信息表”的数据，绘制折线图分析历年不同级别会员数量的变化趋势。
实现思路和步骤
(1) 创建line.html文件。
(2) 绘制饼图。准备一个合适的div容器，然后使用init()初始化容器，最后设置饼图的配置项和“入会方式”，完成绘制。
(3) 绘制环形图。准备一个合适的div容器，然后使用init()初始化容器，最后设置环形图的配置项和“入会方式”，完成绘制。
成果展示
(1) 绘制饼图
代码：
<!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: '', // 设置次标题
left: 'center' // 设置主次标题都左右居中
},
tooltip: { // 配置提示框组件
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { // 配置图例组件
orient: 'vertical', // 设置垂直排列
left: 62, // 设置图例左边距
top: 22, // 设置图例顶边距
data: ['自愿', '公众号推广', '短视频', '美团']
},
toolbox: { // 配置工具箱组件
show: true, // 设置工具箱组件是否显示
left: 444, // 设置工具箱左边距
top: 28, // 设置工具箱顶边距
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [ // 配置数据系列组件
{
name: '入会方式',
type: 'pie',
radius: '66%', // 设置半径
//radius: ['45%', '75%'],
center: ['58%', '55%'], // 设置圆心
clockWise: true,
data: [ // 设置数据的具体值
{
value: 3,
name: '被吸引'
},
{
value: 5,
name: '抖音'
},
{
value: 6,
name: '微博'
},
{
value: 4,
name: '外卖软件'
}
]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>上述代码展示的效果如图所示：
(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: 900px; height: 600px"></div>
<script type="text/javascript">
// 基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
// 指定图表的配置项和数据
var option = {
title: { // 配置标题组件
backgroundColor: 'red', // 设置主标题的背景颜色
text: '会员入会渠道分布情况', // 设置主标题的文字
textStyle: { // 设置主标题文字样式
color: 'green', // 设置主标题文字的颜色
fontFamily: '仿宋', // 设置主标题文字的字体
fontSize: 28 // 设置主标题文字的大小
},
x: 'center' // 设置主标题左右居中
},
tooltip: { // 配置提示框组件
trigger: 'item', //设置提示框的触发方式
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: { //配置图例组件
orient: 'vertical', //设置图例垂直方向
x: 32, // 设置图例的水平方向
y: 74, // 设置图例的垂直方向
data: ['自愿', '公众号推广', '短视频', '美团']
},
toolbox: { // 配置工具箱组件
show: true, // 设置工具箱是否显示
x: 555, // 设置工具箱的水平位置
y: 74, // 设置工具箱的垂直位置
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: false,
series: [{
name: '入会方式',
type: 'pie',
selectedMode: 'single',
radius: ['40%', '55%'],
data: [{
value: 5,
name: '被吸引'
},
{
value: 2,
name: '抖音'
},
{
value: 5,
name: '微博'
},
{
value: 8,
name: '外卖软件'
}
]
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>上述代码展示的效果如图所示：
3489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
