前端大屏数据统计图
站长
· 阅读数 39
在没发现 ECharts 这款神器的时候，之前所做的数据统计图只能自个纯手写，倒也是可以实现，只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件，便尝试了一下，那感觉真的不要太爽！
官方介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
获取 ECharts
1、下载地址
2、点击红色箭头按钮，将压缩包下载下来
3、echarts 库放在解压后文件夹中的 dist 目录里
将整个 dist 目录复制到你的项目中去，可重命名为 echarts
备注：若不想下载 ECharts 库文件，可在头部直接引用 bootcdn 上的 echarts 文件，地址为：
绘制数据图表
1、柱状图
柱状图效果预览
代码实现
<!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、折线图
折线图效果预览
代码实现
<!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://juejin.cn/post/7242258285159415864