用 ECharts 做出漂亮的数据统计图
在没发现 ECharts 这款神器的时候,之前所做的数据统计图只能自个纯手写,倒也是可以实现,只不过特别的费时。后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件,便尝试了一下,那感觉真的不要太爽!
官方介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
获取 ECharts
1、下载地址
https://github.com/apache/incubator-echarts
2、点击红色箭头按钮,将压缩包下载下来
3、echarts 库放在解压后文件夹中的 dist 目录里
将整个 dist 目录复制到你的项目中去,可重命名为 echarts
备注:若不想下载 ECharts 库文件,可在头部直接引用 bootcdn 上的 echarts 文件,地址为:
https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js
绘制数据图表
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 的官方文档
用 ECharts 做出漂亮的数据统计图相关推荐
- 在pycharm里做echarts_用 ECharts 做出漂亮的数据统计图
在没发现 ECharts 这款神器的时候,之前所做的数据统计图只能自个纯手写,倒也是可以实现,只不过特别的费时.后来无意中在网上瞄到 ECharts 这款专门用来生成数据图表的插件,便尝试了一下,那感 ...
- Vue+Echarts构建可视化大数据平台实战项目(上)粒子动效,登录界面抖动,背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言 分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
- clustalw序列比对_如何做出漂亮的序列比对图——ENDscript/ESPript
以下所有内容均属于个人学习过程中的总结,如有错误,欢迎批评指正! 如何做出漂亮的序列比对图--ENDscript/ESPript 大家经常在文献中看到非常好看的序列比对图,现在笔者将目前见过的最好看的 ...
- allow control allow origin_Origin绘图笔记(一)——如何高效绘制一个漂亮的数据图...
软件版本:2018(2019及以上版本功能改进较大,虽然增加了一些功能,但很多操作化简为繁,不建议使用) 步骤1:管理好工作表 想要绘制一个漂亮的数据图,我认为理解工作表Sheet是很有用的,而这也是 ...
- 创建图表_12个免费的顶级信息图表制作工具,让你也能做出漂亮的可视化图表...
先上几张图,感受下,什么叫信息图表,什么叫信息可视化. 如果你在某个稍具规模的公司混,或者,你需要在某个特定场合展示你的数据.这种图就能大大的派上用场.它的好处显而易见:可以装逼很清晰的展示数据,化平 ...
- 学习下ECharts 异步加载数据
ECharts 通常数据设置在 setOption 中,如果我们需要异步加载数据,可以配合 jQuery等工具,在异步获取数据后通过 setOption 填入数据和配置项就行. ECharts 通常数 ...
- 解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示 在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
- java 统计图 mysql_java实现各种数据统计图(转)
转自:http://blog.csdn.net/pzhtpf/article/details/7600100 最近在做数据挖掘的课程设计,需要将数据分析的结果很直观的展现给用户,这就要用到数据统计图, ...
- echarts数据怎么赋值 vue_vue中 怎么把echarts中data的数据循环
export default { name: 'ranking', data(){ return { } }, methods:{ // 工作质态--警情排名 queryRanking() { let ...
最新文章
- 实现一个全链路监控平台很难吗?Pinpoint、skywalking、zipkin,哪个实现比较好?...
- leetcode 160 简单难度 相交链表
- Feature Support and Procedure Mapping
- [转]VirtualBox 复制VDI 并能创建新的虚拟机
- Stimulsoft Reports.Net基础教程(七):创建列式报表①
- Flutter实战一Flutter聊天应用(十)
- 520 简单表白代码(JS)
- 各路技术牛人都推荐的书
- classmethod自己定制
- 本地计算机添加网络打印机共享,如何连接共享打印机?一步一步教你设置和连接局域网共享打印机...
- 【愚公系列】2022年05月 vue3系列 axios请求的封装(TS版)
- 基于Android的医院预约挂号系统
- 未能联接game center服务器,Game Center无法毗邻服务器怎么办 五种方法任你选择
- 2019年春节春晚红包大战战报!30亿!
- java lstm pb_在Tensorflow Serving上部署基于LSTM的文本分类模型
- 【计算机网络】MTU和MSS
- Android虚拟机PC键盘模拟按键 .
- 内网(本机)IP和外网(网络)ip区别
- 日本小学生就要学编程了
- 计算机在机械制造领域中的应用论文,计算机技术在机械制造领域的应用论文