数据可视化的目的 ECharts的基本使用步骤

1.什么是数据可视化

1.1 数据可视化

数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律和道理。

1.2 数据可视化的场景
目前互联网公司通常有这么几大类的可视化需求：
通用报表
移动端图表
大屏可视化
图编辑&图分析
地理可视化

1.3 常见的数据可视化库

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案
等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

小结
数据可视化主要目的：
借助于图形化手段，清晰有效地传达与沟通信息
数据可视化主要作用：
数据可视化在我们互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑等
数据可视化常见的库：
数据可视化库有很多，常用的是ECharts

2. ECharts

2.1Echarts简介
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网地址：https://www.echartsjs.com/zh/index.html

2.2Echarts优点

丰富的可视化类型
多种数据格式支持
流数据的支持
移动端优化
跨平台使用
绚丽的特效
详细的文档说明

3. ECharts的基本使用

3.1 ECharts 使用五步曲

 步骤1：下载并引入echarts.js文件     =>>图表依赖这个js库步骤2：准备一个具备大小的DOM容器     =>>生成的图表会放入这个容器内步骤3：初始化echarts实例对象        =>>实例化echarts对象步骤4：指定配置项和数据option       =>>根据具体需求修改配置选项步骤5：将配置项设置给echarts实例对象 =>>让echarts对象根据修改好的配置生效

3.2 相关配置讲解

title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox: 工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series: 系列列表。
color：调色盘颜色列表

代码演示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Echarts-配置项</title><style>/* 记得使用id不要用div设置样式 不然会出现  tooltip提示框属性出错 bug:(框过大)*/#main {width: 700px;height: 400px;margin: 20px auto;border: 1px solid #ccc;}</style><!-- 1.引入Echarts文件 --><script src="./echarts.min.js"></script>
</head><body><!-- 2.创建一个标签 id名为main --><div id="main"></div><script>// 3.创建一个Echarts实例let myChart = echarts.init(document.getElementById('main'));// 4.定义参数 柱状图option = {// 标题设置title: {text: '未来一周气温变化',   //text 主标题文本subtext: '纯属虚构'        //subtext副标题文本},// 提示框设置tooltip: {trigger: 'axis'     //trigger触发类型//'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用 //'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。//'none' 什么都不触发},// toolsbox工具栏设置toolbox: {show: true,   //是否显示工具栏组件feature: {    //各工具配置项dataZoom: {yAxisIndex: 'none'},dataView: { readOnly: false },magicType: { type: ['line', 'bar'] },restore: {},saveAsImage: {}}},// legend图例设置legend: {data: ['最高气温', '最低气温']  //图例的数据数组},// xAxis x轴设置xAxis: {type: 'category',       // 坐标轴类型。// 'value'数值轴; // 'category' 类目轴;// 'time' 时间轴  boundaryGap: false,     //坐标轴两边留白策略data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']  //类目数据},// yAxis y轴设置yAxis: {type: 'value',       // 坐标轴类型。  (一般y轴类型为value数据轴)axisLabel: {         // 坐标轴刻度标签的相关设置。formatter: '{value} °C'}},// series 系列列表series: [{name: '最高气温',type: 'line',data: [10, 11, 13, 11, 12, 12, 9],markPoint: {data: [{ type: 'max', name: '最大值' },{ type: 'min', name: '最小值' }]},markLine: {data: [{ type: 'average', name: '平均值' }]}},{name: '最低气温',type: 'line',data: [1, -2, 2, 5, 3, 2, 0],markPoint: {data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]},markLine: {data: [{ type: 'average', name: '平均值' },[{symbol: 'none',x: '90%',yAxis: 'max'}, {symbol: 'circle',label: {position: 'start',formatter: '最大值'},type: 'max',name: '最高点'}]]}}]};// 4.使用 刚指定的配置项和数据  显示图表。myChart.setOption(option);</script>
</body></html>

数据可视化的目的 ECharts的基本使用步骤相关推荐

【2】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 物流大数据
目录精彩案例汇总效果展示一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1 ...
【1】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网企业数据
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
目录效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 需求确认 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.开发环境搭建 1.Java开发环 ...
【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传
目录效果展示多主题样式一. 确定需求方案 1.确定产品上线部署的屏幕分辨率 2.部署方式二.整体架构设计三.编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1.前端html代码 - ...
12【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例 - 供应链
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
2【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物流大数据
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前小伙伴们建议我出一些视频课程来学习Echarts,这样可以更快上 ...
33【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏 - 制造业生产管理看板
效果展示 1.动态实时更新数据效果图 2.鼠标右键切换主题一.确定需求方案 1. 屏幕分辨率这个案例的分辨率是16:9,最常用的的宽屏比. 根据电脑分辨率屏幕自适应显示,F11全屏查看: 2. 部 ...
3【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-物联网
数据可视化大屏的出现,掀起一番又一番的浪潮,众多企业主纷纷想要打造属于自己的"酷炫吊炸天"的霸道总裁大屏驾驶舱. 之前有小伙伴们建议我出一些视频课程来学习Echarts,这样可以更 ...
【15】数据可视化：基于 Echarts + Vue 实现的大屏范例 - 世界人口统计大屏
系列文章 https://blog.csdn.net/lildkdkdkjf/article/details/120705616 文末有免费福利,喜欢的小伙伴们一键三连支持下,关注收藏点赞~ 目录 ...
【4】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 厦门市某医院
目录精彩案例汇总效果展示 1.首先看动态效果图 2.再看实时分片数据图一. 确定需求方案 1.确定产品上线部署的屏幕LED分辨率 2.功能模块 3.部署方式二.整体架构设计三.编码实现 (基 ...

数据可视化的目的 ECharts的基本使用步骤

1.什么是数据可视化

2. ECharts

3. ECharts的基本使用

数据可视化的目的 ECharts的基本使用步骤相关推荐

最新文章

热门文章