Training
Training 1 Basic information of members and comparative analysis of spending power
1. Training points (1) Master the drawing of stacked histograms. (2) Master the drawing of standard bar graphs.
(3) Master the drawing of waterfall charts.
2. Requirements Description
The "Member Information Form. xlsx" file records the member information on the sales system of a flower shop, including member number, name, gender, age, age group, city, membership method, membership level, membership date, VIP creation date, total purchase amount, and total purchase times information. Draw a stacked column chart to analyze the age distribution of members, draw a standard bar chart to analyze the membership channel, and draw a waterfall chart to analyze the distribution of the total consumption amount of members in different cities.
3. Realization ideas and steps
(1) Create three . html files, respectively stacked histogram. html, standard bar chart. html and waterfall charts. html.
(2) Draw a stacked histogram. First, in the stacked histogram. The echarts. js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container with the init0 method. Finally, set the configuration items of the stacked histogram, the data of "gender" and "people meeting mode", and complete the drawing of the stacked histogram.
(3) Draw a standard bar graph. First, in the standard bar chart. The echarts. js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container using the init method. Finally, set the configuration items, "gender" and "age range" data of the standard bar chart to complete the drawing of the standard bar chart.
(4) Draw a waterfall chart. First, in the waterfall chart. The echarts js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container with the init0 method. Finally, set the configuration items of the waterfall chart, the "city" and "total purchase amount" data, and complete the drawing of the waterfall chart.
<!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: ['20～29岁', '30～39岁', '40～49岁']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '男',
type: 'bar',
stack: '年龄段', //设置堆积效果
data: [4, 0, 1]
},
{
name: '女',
type: 'bar',
stack: '年龄段', //设置堆积效果
data: [6, 3, 0],
markLine: {
itemStyle: {
normal: {
lineStyle: {
type: 'dashed'
}
}
},
}
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
<!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: [2, 0, 1, 2],
},
{
name: '女',
type: 'bar',
data: [3, 2, 2, 2],
},
],
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
<!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,0,0,0)' //设置柱子的颜色
color:'rgba(0,220,0,0.8)'
},
emphasis: { //设置鼠标滑过时柱子的样式
barBorderColor: 'rgba(0,0,0,0)', //设置鼠标滑动到柱子边框的颜色
barBorderWidth: 25, //设置鼠标滑动到柱子边框的宽度
color: 'rgba(0,0,0,0)' //设置鼠标滑动到柱子的颜色
}
},
data: [0, 801, 1094, 635]
},
{
name: '生活费',
type: 'bar', //设置柱状图
stack: '总量', //设置堆积
itemStyle: { normal: { label: { show: true, position: 'inside' } } },
data: [3076, 2275, 1181, 546]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html> 
Correlation analysis of the number of members in training 2
1. Training points
Master the drawing of line charts.
2. Requirements Description
Draw a line chart based on the "Member Information Form. xlsx" data to analyze the changing trend of the number of members at different levels over the years.
3. Implementation ideas and steps
(1) Create a line chart in Eelipse. html file.
(2) Draw a line chart. First, in the line chart. The echarts. js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container using the init method. Finally, set the configuration items of the line chart, the data of "Membership Day" and "Membership Level" to complete the drawing of the line chart.
<!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 = {
backgroundColor: '#eee',
title: { //配置标题组件
text: "历年不同级别会员数量变化趋势", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
x: 'center'
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: {
data: ['普通会员', 'VIP会员'],
left: 'right'
},
xAxis: [ //配置X轴坐标轴
{
type: 'category',
data: ['2016年', '2017年', '2018年']
}
],
yAxis: [ //配置Y轴坐标轴
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '普通会员',
type: 'line', //设置指定显示为折线
data: [7, 0, 0],
smooth: true
},
{
name: 'VIP会员',
type: 'line', //设置指定显示为折线
data: [0, 3, 4],
smooth: true
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
Training 3 Member source structure analysis
1. Training points
(1) Master the drawing of pie charts. (2) Master the drawing of donut diagrams. 2. Requirement Description Draw pie charts and donut charts based on the data in the "Member Information Form xlsx", and analyze the channel distribution of member associations.
3. Implementation ideas and steps
(1) Create a pie chart in Eelipse. html and donut charts. html file. (2) Draw a pie chart. First, in the pie chart. The echarts. js library file is introduced into the html file. Next, prepare a div container with a specified size, and initialize the container with the init0 method. Finally, set the configuration items of the pie chart and the data of "person meeting mode" to complete the drawing of the pie chart.
(3) Draw a donut chart. First, in the donut chart. The echarts. js library file is introduced into the html file. Next, prepare a
div container with a specified size, and initialize the container with the init0 method. Finally, set the configuration items of the donut chart and the "meeting mode" data to complete the drawing of the donut chart.
<!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: 5, name: '自愿' },
{ value: 2, name: '微信推广' },
{ value: 3, name: '团购促销' },
{ value: 4, name: '节日活动' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
<!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: 'yellow', //设置主标题的背景颜色
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: 3, name: '团购促销' },
{ value: 4, name: '节日活动' }
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html> 