大家好，欢迎来到IT知识分享网。
1.折线图
一.折线图简介（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: 800px; height: 400px”></div>
<script type=”text/javascript”>
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById(“main”));
//指定图表的配置项和数据
var option = {
title:{
text:’年轻人对各大软件使用程度’,
textStyle:{
color:’black’,
}
},
toolip:{
tigger:’axis’,
},
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: ‘category’,
data: [‘微信’, ”, ‘抖音’, ‘快手’, ‘微博’, ‘小红书’, ‘bilibili’]
},
yAxis: {
type: ‘value’
},
series: [
{
markPoint: { // 标记点
data: [
{
type: ‘max’, name: ‘最大值’
},{
type: ‘min’, name: ‘最小值’
}
]
},
markLine: { // 标记线
data: [
{
type: ‘average’, name: ‘平均值’
}
]
},
data: [20, 5, 40, 20, 5,7, 3],
type: ‘line’
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
五.效果图
2.柱状图 条形图
一.柱状图
它的适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。年销售额就是二维数据，”年份”和”销售额”就是它的两个维度，但只需要比较”销售额”这一个维度。
柱状图利用柱子的高度，反映数据的差异。肉眼对高度差异很敏感，辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。
通常来说，柱状图的X轴是时间维，用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况，建议用颜色区分每根柱子，改变用户对时间趋势的关注。
1.实现
var option = {
type: ‘category’,
data: [‘微信’, ”, ‘抖音’, ‘快手’, ‘微博’, ‘小红书’, ‘bilibili’]
},
yAxis: {
type: ‘value’
},
series: [
{
data: [20, 5, 40, 20, 5,7, 3],
type: ‘bar’
}
]
};
2.效果图
3.条形图
条形图是用宽度相同的条形的高度或长短来表示数据多少的图形。条形图可以横置或纵置，纵置时也称为柱形图。
a.实现
<!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>
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById(“main”));
var option = {
title:{
text:’年轻人对各大软件使用程度’,
textStyle:{
color:’red’,
}
},
toolip:{
tigger:’axis’,
},
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’,
},
yAxis: {
type: ‘category’,
data: [‘微信’, ”, ‘抖音’, ‘快手’, ‘微博’, ‘小红书’, ‘bilibili’]
},
series: [
{
markPoint: { // 标记点
data: [
{
type: ‘max’, name: ‘最大值’
},{
type: ‘min’, name: ‘最小值’
}
]
},
markLine: { // 标记线
data: [
{
type: ‘average’, name: ‘平均值’
}
]
},
data: [20, 5, 40, 20, 5,7, 3],
type: ‘bar’,
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
b.效果图
发送
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/139761.html
