echarts可视化图表（怎样用ECharts做出漂亮的数据统计图）
echarts可视化图表（怎样用ECharts做出漂亮的数据统计图）3、echarts 库放在解压后文件夹中的 dist 目录里image1、下载地址https://github.com/apache/incubator-echarts2、点击红色箭头按钮，将压缩包下载下来
在没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是可以实现，只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！
官方介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
获取 ECharts
1、下载地址
https://github.com/apache/incubator-echarts
2、点击红色箭头按钮，将压缩包下载下来
image
3、echarts 库放在解压后文件夹中的 dist 目录里
image
将整个 dist 目录复制到你的项目中去，可重命名为 echarts
备注：若不想下载 ECharts 库文件，可在头部直接引用 bootcdn 上的 echarts 文件，地址为：
https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js
绘制数据图表
1、柱状图
image
柱状图效果预览
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据统计图：柱状图</title>
<!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
<script src="echarts/echarts.min.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: '2014-2019年 前端人均工资'
}
tooltip: {} //提示框组件（鼠标移动到数字表时触发）
xAxis: { //x轴
data: ["2014年" "2015年" "2016年" "2017年" "2018年" "2019年"]
}
yAxis: {} //y轴 内容会自动从以下的series.data 中获取
series: [{
name: '人均工资'
type: 'bar' //类型为：柱状图
data: [3800 4600 5100 5800 6300 7300] //x轴项目对应的数据
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2、折线图
image
折线图效果预览
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据统计图：折线图</title>
<!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
<script src="echarts/echarts.min.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'
}
xAxis: {
type: 'category'
data: ['周一' '周二' '周三' '周四' '周五' '周六' '周日']
}
yAxis: {
type: 'value'
axisLabel: { //坐标轴刻度标签的相关设置。
formatter: '{value} °C' // 使用字符串模板，模板变量为刻度默认标签 {value}
}
}
series: [
{
name:'最高气温'
type:'line'
data:[11 11 15 13 12 13 10]
}
{
name:'最低气温'
type:'line'
data:[1 -2 2 5 3 2 0]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3、饼图
饼图效果预览
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据统计图：饼图</title>
<!-- 引入 ECharts 文件 这里选择min.js压缩版的echarts -->
<script src="echarts/echarts.min.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: '某公司年龄阶段的员工占比'
x:'center'//水平居中
}
tooltip : {//提示框组件。
trigger: 'item' //'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
formatter: "{a} <br/>{b} : {c} ({d}%)" //{a}（系列名称），{b}（数据项名称），{c}（数值） {d}（百分比）
}
series : [
{
name: '年龄占比'
type: 'pie'
radius : '55%' //饼图的半径
center: ['50%' '60%'] //饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
data:[
{value:80 name:'20-25岁'}
{value:30 name:'26-30岁'}
{value:20 name:'31-35岁'}
{value:8 name:'36-40岁'}
{value:5 name:'41岁以上'}
]
itemStyle: {//图形样式。
emphasis: {
shadowBlur: 10
shadowOffsetX: 0
shadowColor: 'rgba(0 0 0 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
结语
以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：
https://echarts.baidu.com/index.html
