Echarts入门的简单学习---折线图、饼图
Echarts简单学习
我们在展示数据时，除了使用表格外，还希望使用折线图、饼状图、柱形图、环形图等图形化展示数据，让数据更直观，同时也可以让我们的界面展示更加丰富。如下图：（本人编写，仅供参考）
其中Echarts通过提供方便丰富的可视化图表，让前端数据可视化更便捷，下面就一起来学习一下使用吧。
一、获取 ECharts
首先，要获取echart的包，把相关引用放入你的项目中。可以直接在官网下载完整版本或者在 ECharts 的 GitHub 上下载最新的 release 版本。官方下载地址---------https://www.echartsjs.com/zh/download.html
二、引入Echarts
当某个界面需要展示echarts类的图形时，先需要简单引入，只要像普通的 JavaScript 库一样用 script 标签引入即可。
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
三、使用Echarts
当我们已经引入后，在想要展示的区域规定一个具备高宽的div
注意：一定要给一个唯一的id名。
然后就可以script标签里或者在js方法中写入图形的数据及个性化样式设定
<script type="text/javascript">
// 基于准备好的div，初始化echarts实例----div的id名
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
四、简单图表介绍
1、折线图
折线图样式有多种，下面仅介绍几个常用的。
①简单折线图–最简单的折线图，如下图所示
代码：—（若想让其从坐标轴处开始，加入boundaryGap: false,）
var myChart = echarts.init(document.getElementById('main'));//main为div的id名
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [20, 22, 20, 27, 25, 30, 27],
type: 'line'
}]
};
myChart.setOption(option);
②带面积的折线图—醒目看出折线的趋势及所涉及面积，如下图所示：
代码----与上方的折线图所不同的是：在series中添加areaStyle: {}属性即可
var myChart = echarts.init(document.getElementById('main'));//main为div的id名
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}//添加后即可显示为面积折线图
}]
};
myChart.setOption(option);
③平滑（垂直水平）折线图，如下图所示：
代码----与上方的折线图所不同的是：在series中添加step属性即可，若step属性存在，即显示平滑线。
var myChart = echarts.init(document.getElementById('main'));//main为div的id名
option = {
legend: {
data:['Step Start']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name:'Step Start',
type:'line',
step: 'start',
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
2、饼图
①普通饼图
直观展示各个子类所占总数百分比时，可使用饼图，简单直观
代码如下：
（若想修改饼图引导线位置，请参照：https://blog.csdn.net/woteafuck/article/details/91989198
若想修改图例位置，请参照：https://blog.csdn.net/woteafuck/article/details/91986313）
var myChart = echarts.init(document.getElementById('main'));//main为div的id名
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告']
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',//单个百分比数字为简单饼图
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
②环形饼图
更多样化展示数据在总数中的百分比，如下图所示：
代码—与上方的简单饼图所不同的是：在series中将radius的属性表示成数组形式，如： [‘40%’, ‘70%’]，即可展示为环形图，第一个数字为内部空白圆形的大小，第二个数字为外部圆形的大小。
var myChart = echarts.init(document.getElementById('main'));//main为div的id名
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['40%', '70%'], //数组为环形图，百分比决定了饼图的圆形大小
avoidLabelOverlap: false,
label: {
normal: {
show: true,
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: true
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'}
]
}
]
};
myChart.setOption(option);