Echarts数据可视化
Echarts
- Echarts 简介
- Echarts快速上手
- 柱状图
- 柱状图的基本使用
- 其他常见效果
- 通用配置项
- title
- tooltip
- toolbox
- legend
- 折线图
- 折线图基本配置
- 其他效果
- 饼状图
Echarts 简介
Echarts 缩写来自 Enterprise Charts(商业级数据图表),是百度的一个开源的数据可视化工具
Echarts 能够绘制 2D 和 3D 的饼状图、柱状图、折线图等几乎所有我们能够见到的图形
Echarts 能够在 PC 端和移动设备上流畅运行,兼容当前绝大部分浏览器
Echarts 是一个纯 JavaScript 的图表库,底层依赖轻量级的 Canvas 库 ZRender
官网: https://echarts.apache.org/zh/index.html
Echarts快速上手
使用步骤:
下载
复制/粘贴代码
代码分析
结论
实现:
- 下载
- 从官网下载
- npm 安装:
npm i echarts
- 按需定制
复制代码
分析代码
通过分析代码得出结论,使用 Echarts 绘制图形只需要做 5 件事情
① 引入 echarts.js 核心文件
② 定义一个用来显示图表的div (使用样式可以控制图表的宽高)
③ 初始化 echarts 实例 (此处要将div的dom对象作为参数传入)
④ 配置图表所需的数据
⑤ 调用 setOption 方法绘制图表
- 结论
- Echarts 使用是比较简单的,按照固定的五个步骤来写即可
- 想要产生不同的图表就需要不同的配置项,学习Echarts就是学习各种配置项
- 不要死记配置项,要熟练使用文档
第四步配置数据项是最为关键的,要掌握里面的主要配置项
柱状图
柱状图的基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 1.安装echarts后,引入js文件 --><script src="./node_modules/echarts/dist/echarts.min.js"></script><title>Document</title>
</head>
<body><!-- 定义显示图标的div --><div id="echart" style="width: 600px;height: 600px;"></div><script>// 初始化 echarts 实例var echart = echarts.init(document.getElementById('echart'))// 配置图表所需的数据var option = {title: {text: 'echart测试'},xAxis: {data: ['java', 'C++', 'C', 'Python']},yAxis: {},series: {type: 'bar',data: [123,456,324,555]}}// 调用 setOption 方法绘制图表echart.setOption(option)</script>
</body>
</html>
- title: 标题组件,里面包含主标题、副标题等
- xAxios: 坐标系的 x 轴
- yAxios: 坐标系的 y 轴
- legend: 图例组件,用于展现不同系列的标记、颜色和名字
- series: 系列列表,配置具体的图标类型、数据等
- 配置项知道的越多越好,但是不要死记硬背,要学会使用文档
其他常见效果
series: {type: 'bar',data: [123,456,324,555],markPoint: {data: [{ type: 'max', name: '最大值'},{ type: 'min', name: '最小值'}]},markLine: {data: [{ type: 'average', name: '平均值'},{ type: 'max', name: '最大值'},{ type: 'min', name: '最小值'}]}}
markPoint:可以通过定义data来显示数据中的最大最小值,并在其对应的柱状图上显示point标记
markLine:可以通过一条线来显示最大最小及平均值
也可以通过交换xAxis和yAxis中的配置项来进行横向显示
xAxis: {},yAxis: {data: ['java', 'C++', 'C', 'Python']},
通用配置项
title
title: 用来设置主标题、副标题、标题样式等
title: {text: 'echart测试', // 主标题文字subtext: '销售数据前5名', // 副标题文字textStyle: { // 主标题样式color: 'red',fontSize: '30px'}, subtextStyle: { //副标题样式color: 'green',fontSize: '24px'} },
tooltip
tooltip: 提示框组件,用来配置鼠标进入或者点击时的提示信息
- {a}: 系列名称,就是 series 中的 name
- {b}: 类目值, 就是 x 轴的分类名
- {c}: 数值, 当前分类对应的数值
tooltip: {trigger: 'item', // 提示信息, itme、axistriggerOn: 'mousemove', //提示触发方式, mousemove(默认)、clickformatter: '{b} <br/> {a}: {c}' // 数据显示格式, string 和 function 两种}
toolbox
toolbox: 内置工具栏, 导出图片、数据视图、动态类型切换、数据区域缩放
toolbox: {feature: {saveAsImage: { // 保存为图片show: true},dataView: {}, // 数据视图dataZoom: {}, // 区域缩放restore: {}, // 重置视图magicType: { // 图表切换type: ['bar', 'line'] // 在柱状图和折线图之间切换}}},
legend
legend: 图例,用于筛选系列,要和 series 配合使用
在 series 中可以有多组数据, 只要定义多个对象即可
script>// 初始化 echarts 实例var echart = echarts.init(document.getElementById('echart'))var ydata1 = [123,456,324,555]var ydata2 = [456,252,123,324]var ydata3 = [235,542,153,111]// 配置图表所需的数据var option = {title: {text: 'echart测试', },tooltip: {trigger: 'item',},legend: {data: [{name: '数据一'},{name: '数据二'},{name: '数据三'}]},xAxis: {data: ['java', 'C++', 'C', 'Python']},yAxis: {},series: [{type: 'bar',data: ydata1,name: '数据一' },{type: 'bar',data: ydata2,name: '数据二' },{type: 'bar',data: ydata3,name: '数据三' }]}// 调用 setOption 方法绘制图表echart.setOption(option)</script>
折线图
折线图基本配置
折线图和柱状图基本上是一样的,只需要将series中的type设置为line
series: [{type: 'line',data: ydata1,name: '数据一' },{type: 'line',data: ydata2,name: '数据二' },{type: 'line',data: ydata3,name: '数据三' }]
其他效果
- 线条控制: series.smooth,折线(false)、平滑曲线(true)
- 填充风格: series.areaStyle,折线内部的填充风格
- color: 填充颜色
- opacity: 透明度
- 紧挨边缘: xAxis.boundaryGap , 值在y轴上(false),值在中间(true)
var option = {title: {text: 'echart测试', },tooltip: {trigger: 'item',},xAxis: {data: ['java', 'C++', 'C', 'Python'],boundaryGap: false},yAxis: {},series: {type: 'line',data: ydata1,name: '数据一',smooth: true,areaStyle: {color: 'gold',opacity: 0.5}} }
饼状图
实际工作时,我们通常都使用复制/粘贴,修改数据 的方式来使用 echarts
https://echarts.apache.org/zh/index.html
Echarts数据可视化相关推荐
- echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- Echarts数据可视化grid直角坐标系(xAxis、yAxis)
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWei ...
- Echarts数据可视化全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件: Echarts数据可视化visualMap全解 Echarts数 ...
- Echarts数据可视化event图表事件的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化action图表行为的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化echarts实例的相关操作,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
- Echarts数据可视化series-scatter散点图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-pie饼图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
最新文章
- 51单片机好学嘛?学完51单片机学什么?
- 软件开发人员标准薪金 人月_软件产品测试周期
- 建模大师怎么安装到revit中_「Revit技巧」插件挤满了、冲突了,怎么办?
- C++Jump Search跳转搜索的实现算法(附完整源码)
- CRUD 还能这么玩?
- PHP实现JS颜文字编码解码过程-aaencode+aadecode
- layer右下脚弹窗
- Python csv文件读写(csv模块)(转载)
- Linux用php上传表单文件,文件太大提示[413 Request Entity Too Large]
- 计算虚继承中对象占用的空间
- 自考计算机软件基础真题,2019年4月自考计算机软件基础考试真题试卷
- Warez 组织的64K 3D动画下载
- 免费查看并下载知网文献
- scrapy框架携带cookie访问淘宝购物车功能的实现代码!
- 被讨厌的勇气:共同体感觉
- 不断进化中的新型零售 便利蜂力主科技赋能
- 图形化开发(五)022-Three.js之材质——受光影响-MeshLambertMaterial 兰伯特材质 MeshPhongMaterial 高光材质
- SpringSocial之QQ登录
- 调制解调器以及ADSL拨号上网
- 斐波那契Fibonacci 算法优化
热门文章
- java web编程从入门到实践 pdf_《Java Web编程从入门到实践》读书笔记(一)
- vue2和vue3安装element-ui或element-plus插件与插件卸载
- w10系统的服务器属性在哪,DNS设置在哪里、设置什么好?Win10电脑DNS设置指南
- 深圳科目三辅城坳【手动挡】笔记
- ios描述文件下载安装
- 四种方法检测网站是否被微信、QQ等拦截屏蔽
- “滴血查癌”女主角被判入狱11年:公司估值曾达90亿美元 一朝覆灭
- 【SDC】StreamSets实战之路-11-基础篇- StreamSets-数据流开发- Edge数据流设计
- html5+简约登录页面,简洁时尚的CSS3用户登录界面设计
- Linux 下sha1加密