ECharts数据可视化：入门、实战与进阶干货
2024-05-15 17:05:33
ECharts数据可视化：入门、实战与进阶干货
定义
ECharts，Enterprise Charts，商业级数据图表，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 端和移动端的绝大部分浏览器上，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
特性
- 丰富的可视化类型（统计数据可视化、地理数据可视化、关系数据可视化）
- 多种数据格式无需转换直接使用（二维表、key-value键值对）
- 千万数据的前端展示
- 移动端优化，交互和布局适配，按需打包
- 跨平台使用（PC端、移动端、微信小程序）
- 绚丽的特效
- ......
ECharts 基本使用
快速上手五部曲
基础配置
编程实操
HTML基本模板
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>HTML基本页面模板</title>
</head>
<body><!-- 1.引入echarts.js文件，通过CDN引入 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><!-- 2.准备一个呈现图表的盒子，必须设置宽高 --><div id="main" style="width:600px;height:450px;"></div><script>// 3.获取DOM元素，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 4.指定图表的配置项和数据var option = {// ...}// 5.使用指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>
折线图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>echarts折线图示例</title>
</head>
<body><!-- 1.引入echarts.js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><!-- 2.准备一个呈现图表的盒子 --><div id="main" style="width:600px;height:450px;"></div><script>// 3.获取DOM元素，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 4.指定图表的配置项和数据var option = {title: { // 标题text: 'Echarts入门示例'},tooltip: {trigger: 'axis', // 坐标轴触发axisPointer: { // 坐标轴指示器type: 'cross',label: {backgroundColor: '#283b56'}}}, // 提示框legend: {data: ['区块链应用']}, // 图例xAxis: { // 直角坐标系x轴data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']},yAxis: {name: '注册用户（个）',}, // 直角坐标系y轴series: [{ // 系列列表name: '区块链应用', // 系列名称type: 'line', // 图表类型smooth: true, // 平滑曲线显示data: [48, 18, 9, 25, 2], // 数据内容数组 }]}// 5.使用指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>
柱状图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>echarts柱状图示例</title>
</head>
<body><!-- 1.引入echarts.js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><!-- 2.准备一个呈现图表的盒子 --><div id="main" style="width:600px;height:450px;"></div><script>// 3.获取DOM元素，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 4.指定图表的配置项和数据var option = {title: { // 标题text: 'Echarts入门示例'},tooltip: {trigger: 'axis', // 坐标轴触发axisPointer: { // 坐标轴指示器type: 'shadow',label: {backgroundColor: '#283b56'}}}, // 提示框legend: {data: ['区块链应用']}, // 图例xAxis: { // 直角坐标系x轴data: ['天河数通', '地质大数据', '自主可控公链', '优版权', '敏捷指控']},yAxis: {name: '注册用户（个）',}, // 直角坐标系y轴series: [{ // 系列列表name: '区块链应用', // 系列名称type: 'bar', // 图表类型data: [48, 18, 9, 25, 2], // 数据内容数组 }]}// 5.使用指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>
饼图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>echarts柱状图示例</title>
</head>
<body><!-- 1.引入echarts.js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><!-- 2.准备一个呈现图表的盒子 --><div id="main" style="width:600px;height:450px;"></div><script>// 3.获取DOM元素，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 4.指定图表的配置项和数据var option = {title: { // 标题text: 'Echarts入门示例'},tooltip: {trigger: 'item', // 数据项图形触发formatter: '{a} <br/>{b} : {c} ({d}%)'}, // 提示框legend: {data: ['区块链应用']}, // 图例series: [{ // 系列列表name: '区块链应用', // 系列名称type: 'pie', // 图表类型data: [{value: 48, name: '天河数通'},{value: 18, name: '地质大数据'},{value: 9, name: '自主可控公链'},{value: 20, name: '优版权'},{value: 2, name: '敏捷指控'}] }]}// 5.使用指定的配置项和数据显示图表myChart.setOption(option);</script>
</body>
</html>
地图
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title>echarts实现地图数据展示</title><style>html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent}html,body {width: 100%;height: 100%;}#main {width: 1000px;height: 900px;}</style>
</head>
<body><!-- 1.引入echarts.js文件 --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script><script src="china.js"></script><!-- <script src="world.js"></script> --><!-- 2.准备一个呈现图表的盒子 --><div id="main"></div><script>// 3.获取DOM元素，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var dataList = [{name: '南海诸岛', value:0},{name: '北京', value: randomValue()},{name: '天津', value: randomValue()},{name: '上海', value: randomValue()},{name: '重庆', value: randomValue()},{name: '河北', value: randomValue()},{name: '河南', value: randomValue()},{name: '云南', value: randomValue()},{name: '辽宁', value: randomValue()},{name: '黑龙江', value: randomValue()},{name: '湖南', value: randomValue()},{name: '安徽', value: randomValue()},{name: '山东', value: randomValue()},{name: '新疆', value: randomValue()},{name: '江苏', value: randomValue()},{name: '浙江', value: randomValue()},{name: '江西', value: randomValue()},{name: '湖北', value: randomValue()},{name: '广西', value: randomValue()},{name: '甘肃', value: randomValue()},{name: '山西', value: randomValue()},{name: '内蒙古', value: randomValue()},{name: '陕西', value: randomValue()},{name: '吉林', value: randomValue()},{name: '福建', value: randomValue()},{name: '贵州', value: randomValue()},{name: '广东', value: randomValue()},{name: '青海', value: randomValue()},{name: '西藏', value: randomValue()},{name: '四川', value: randomValue()},{name: '宁夏', value: randomValue()},{name: '海南', value: randomValue()},{name: '台湾', value: randomValue()},{name: '香港', value: randomValue()},{name: '澳门', value: randomValue()}]function randomValue() {return Math.round(Math.random() * 1000);}// 指定图表的配置项和数据var option = {tooltip: {trigger: 'item', // 数据项图形触发// 数据格式化// formatter: function(params, ticket, cb) {// return params.seriesName + '<br />' + params.name+ '：' + params.value;// }},visualMap: { // 视觉映射min: 0,max: 1000,left: 'left',top: 'bottom',text: ['高','低'], // 取值范围的文字realtime: false, // 拖拽时，是否实时更新calculable: true, // 是否显示拖拽用的手柄color: ['orangered', 'yellow', 'lightskyblue'], // inRange: {// color: ['#e0ffff', '#006edd'] // 取值范围的颜色// },// show: false // 图注},series: [{name: '信息量',type: 'map', map: 'china', // 地图类型roam: false, // 是否开启鼠标缩放和平移// zoom: 1.2, // 视角缩放比例label: {normal: {show: true,fontSize: '10',color: 'rgba(0, 0, 0, 0.7)',formatter: '{b} \n\n {c}'}},itemStyle: {normal:{borderColor: 'rgba(0, 0, 0, 0.2)'},emphasis:{areaColor: '#f3e42e', // 鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}},data: dataList1}]}// 使用指定的配置项和数据显示图表myChart.setOption(option);setInterval(() => {var dataList = [{name: '南海诸岛', value:0},{name: '北京', value: randomValue()},{name: '天津', value: randomValue()},{name: '上海', value: randomValue()},{name: '重庆', value: randomValue()},{name: '河北', value: randomValue()},{name: '河南', value: randomValue()},{name: '云南', value: randomValue()},{name: '辽宁', value: randomValue()},{name: '黑龙江', value: randomValue()},{name: '湖南', value: randomValue()},{name: '安徽', value: randomValue()},{name: '山东', value: randomValue()},{name: '新疆', value: randomValue()},{name: '江苏', value: randomValue()},{name: '浙江', value: randomValue()},{name: '江西', value: randomValue()},{name: '湖北', value: randomValue()},{name: '广西', value: randomValue()},{name: '甘肃', value: randomValue()},{name: '山西', value: randomValue()},{name: '内蒙古', value: randomValue()},{name: '陕西', value: randomValue()},{name: '吉林', value: randomValue()},{name: '福建', value: randomValue()},{name: '贵州', value: randomValue()},{name: '广东', value: randomValue()},{name: '青海', value: randomValue()},{name: '西藏', value: randomValue()},{name: '四川', value: randomValue()},{name: '宁夏', value: randomValue()},{name: '海南', value: randomValue()},{name: '台湾', value: randomValue()},{name: '香港', value: randomValue()},{name: '澳门', value: randomValue()}]myChart.setOption({series: [{data: dataList}]});}, 3000)</script>
</body>
</html>
ECharts数据可视化：入门、实战与进阶干货相关推荐
- python echarts数据可视化实战
python echarts数据可视化 python echarts数据可视化实战 引言 词云分析 柱状图分析 饼图分析 总结 python echarts数据可视化实战 引言 引言 上一章我给大家用 ...
- 一本 ECharts 数据可视化书籍
对Echarts感兴趣的同学,给大家推荐一本很不错的书籍. PS:文末小z还给大家争取了两本的福利. Apache ECharts (incubating),下文简称ECharts,是由百度捐献给Ap ...
- 第一本 ECharts 数据可视化书籍出版了！
L说:这是朋友王大伟的著作,推荐大家购买. 我的第一本书终于出版了,书名叫做<ECharts数据可视化:入门.实战与进阶>,目前在当当.京东已经上架,可购买学习! 什么是ECharts E ...
- Echarts数据可视化 第4章 Echarts可视化图 4.7 漏斗图
Echarts数据可视化 文章目录 Echarts数据可视化 第4章 Echarts可视化图 4.7 漏斗图 Echarts数据可视化:入门.实战与进阶 第4章 Echarts可视化图 4.7 漏斗图 ...
- 《Python数据可视化编程实战》——5.5 用OpenGL制作动画
本节书摘来异步社区<Python数据可视化编程实战>一书中的第5章,第5.5节,作者:[爱尔兰]Igor Milovanović,更多章节内容可以访问云栖社区"异步社区" ...
- Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
- python qt gui与数据可视化编程 kindle_Kindle Python教程 电子书 – Python数据可视化编程实战 PDF...
简介 : < 全书共8章,分别介绍了准备工作环境.了解数据.绘制并定制化图表.学习更多图表和定制化.创建3D可视化图表.用图像和地图绘制图表.使用正确的图表理解数据以及更多matplotlib知 ...
- java——插件echarts数据可视化图表库
插件echarts数据可视化图表库 一.使用idea创建javaWeb工程 二.下载echarts导入js文件 三.使用echarts. 特别鸣谢:感谢林老师传授 嘿嘿嘿 -------- 创作不易, ...
- ECharts数据可视化项目-大屏数据可视化【持续更新中】
ECharts数据可视化项目-大屏数据可视化[持续更新中] 文章目录 ECharts数据可视化项目-大屏数据可视化[持续更新中] 一. 数据可视化ECharts使用 二.技术栈 三.数据可视化 四.可 ...
- 《Python数据可视化编程实战》—— 1.6 安装图像处理工具：Python图像库（PIL）...
本节书摘来异步社区<Python数据可视化编程实战>一书中的第1章,第1.6节,作者:[爱尔兰]Igor Milovanović,更多章节内容可以访问云栖社区"异步社区" ...
最新文章
- Spring中bean标签的属性和值：
- spring系列-注解驱动原理及源码-属性赋值
- 现代数学和理论物理已经发展到多么令人震惊的水平了？
- 电脑亮度多少对眼睛好_电脑显示器亮度多少合适呢??
- 【LeetCode】剑指 Offer 07. 重建二叉树
- OpenGL学习笔记：颜色（RGBA颜色，颜色索引模式）
- Eclipse之Android开发环境搭建
- java applet init_java applet init start
- GMS：基于网格运动统计的快速极度鲁棒的特征匹配
- 我在上海奋斗五年 从月薪3500到700万
- HTML与CSS--------p标签
- 【组织架构】中国铁路上海局集团有限公司
- python中print是什么意思中文-python中使用print输出中文的方法
- 免费多功能转码机器人（小程序转码机器人）
- R语言中Axis()函数的参数详解
- 软件著作权登记时什么情况下必须提供软件设计说明书？
- android 7.0之后的打开相机拍摄头像上传
- 无线能量传输（WPT）中收发线圈的等效电路模型
- 麻省理工的服务器位置,麻省理工学院的地理位置是怎样的？
- Android 代码命名规范 -- 提高代码可以读性