ECharts的讲解
目录
什么是数据可视化
ECharts的介绍
ECharts的特点
ECharts的基本使用
操作步骤
通用配置title的相关配置
通用配置tooltip的相关配置
触发类型：trigger
触发时机：triggerOn
格式化：formatter
通用配置toolbox的相关配置
通用配置legend的相关配置
案例源码
小结
折线图常见效果
标记
线条控制
编辑填充风格
紧挨边缘
缩放：脱离 0 值比例
堆叠图
案例源码
什么是数据可视化
- 把数据以更直观的形式展现----图表
- 可以清晰有效地传达与沟通信息
- 可以帮助我们快速的获取隐藏在数据中的信息
ECharts的介绍
ECharts是一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提供直观，交换丰富，可高度个性化定制的数据可视化图表。
官网地址：https://echarts.apache.org/zh/index.html
ECharts的特点
- 它具有丰富的可视化类型，折线图，柱状图，饼图，K线图等等.....
- 它可以支持多种数据格式，比如key-value数据格式，二维表，和TypedArray格式
- 它可以支持流数据，对于超大的数据量而言，数据的本身就非常非常耗费资源了，而ECharts支持对数据的动态渲染，加载多少数据就渲染多少数据，这样一来就省去了漫长数据加载等待的时间，它也提供了增量渲染技术(只渲染变化的数据)，从而提供资源的利用效率。
- 还具有移动端的优化，跨平台的使用，绚丽的特效和三维可视化等等特点，感兴趣的同学可以访问这个网址：https://echarts.apache.org/zh/feature.html
小结
ECharts的基本使用
操作步骤
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项
步骤5：将配置项设置给echarts实例对象
echarts.js获取（此为链接，可点击发生跳转）
案例演示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的尝试</title><!-- 步骤1：引入echarts.js文件 --><script src="./js/echarts.min.js"></script>
</head>
<!--
步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象 --><body><!-- 步骤2：准备一个呈现图表的盒子 --><div id="changshi" style="width:600px; height:400px"></div><script>// 步骤3：初始化echarts实例对象// 参数，dom，决定图表最终呈现的位置var chart = echarts.init(document.querySelector('#changshi'))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]// 步骤4：准备配置项var option = {title: {text: '成绩',link: ' http://www.itcast.cn' //点击可以发生页面跳转},xAxis: {type: 'value' //数值轴},yAxis: {type: 'category', //类目轴data: xDataArr},series: [{name: '语文成绩',type: 'bar', //图表的类型，line就是折线图，pie就是饼图等等markPoint: {data: [{type: 'max',name: '最大值'},{type: 'min',name: '最小值'}]},markLine: {data: [{type: 'average',name: '平均值'}]},label: {show:true,//显示数值rotate:60,//可以让数值旋转60°，给用户带来不一样的体验position:'top'//位置标签},barWidth:'30%',data: yDataArr}]};// 步骤5：将配置项设置给echarts实例对象chart.setOption(option)</script>
</body></html>最初效果
添加最值和平均值
改变柱子的宽度和显示柱子的数值
将柱状图变为横向的(最终效果)
小结
通用配置title的相关配置
文字样式textStyle；标题边框的宽度(borderWidth),颜色(borderColor)和圆角半径(borderRadius)；标题位置(left,top,right和bottom)。
通用配置tooltip的相关配置
tooltip:提示框组件，用于配置鼠标滑过或点击图表时的显示框
触发类型：trigger
trigger:'item'
当鼠标滑在图表(图中红色矩形部分)之上，就会有提示框出现。
trigger:'axis'
当鼠标滑在图表(图中红色矩形部分)之上，就会有提示框出现。
触发时机：triggerOn
triggerOn:'mouseover'
triggerOn:'click'
格式化：formatter
字符串模板
回调函数
咱们就是说，不会的话，或者忘记了，都可以去上文提到的官方文档中查询。
通用配置toolbox的相关配置
通用配置legend的相关配置
案例源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通用配置</title><!-- 步骤1：引入echarts.js文件 --><script src="./js/echarts.min.js"></script>
</head>
<!--
步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象 --><body><!-- 步骤2：准备一个呈现图表的盒子 --><div id="changshi" style="width:600px; height:400px"></div><script>// 步骤3：初始化echarts实例对象// 参数，dom，决定图表最终呈现的位置var chart = echarts.init(document.querySelector('#changshi'))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]// 步骤4：准备配置项var option = {title: {text: '成绩展示',textStyle: {color: 'red'},borderWidth: 5, //边框宽度borderColor: 'blue', //边框颜色borderRadius: 5, //边框圆角半径left: 50, //距离盒子的左侧50pxtop: 10, //距离盒子的上面10pxlink: ' http://www.itcast.cn' //点击可以发生页面跳转},tooltip: {// trigger: 'item'trigger: 'axis',// triggerOn:'mouseover' //鼠标滑过图表时，便会弹出提示框，这是默认的triggerOn: 'click', //鼠标点击图表时，才会弹出提示框// formatter:'{b}的成绩是{c}'formatter: function (arg) {console.log(arg) //控制台打印参数return arg[0].name + '的分数是' + arg[0].data}},toolbox: {feature: {saveAsImage: {}, //导出图片的功能dataView: {}, //数据视图restore: {}, //重置dataZoom: {}, //区域缩放magicType: {type: ['bar', 'line']} //动态图表类型的切换}},legend:{data:['语文成绩','数学成绩']},//筛选系列xAxis: {type: 'category', //类目轴data: xDataArr},yAxis: {type: 'value' //数值轴},series: [{name: '语文成绩',type: 'bar', //图表的类型，line就是折线图，pie就是饼图等等markPoint: {data: [{type: 'max',name: '最大值'},{type: 'min',name: '最小值'}]},markLine: {data: [{type: 'average',name: '平均值'}]},label: {show: true, //显示数值rotate: 60, //可以让数值旋转60°，给用户带来不一样的体验position: 'top' //位置标签},// barWidth: '30%',data: yDataArr1},{name: '数学成绩',type: 'bar', //图表的类型，line就是折线图，pie就是饼图等等markPoint: {data: [{type: 'max',name: '最大值'},{type: 'min',name: '最小值'}]},markLine: {data: [{type: 'average',name: '平均值'}]},label: {show: true, //显示数值rotate: 60, //可以让数值旋转60°，给用户带来不一样的体验position: 'top' //位置标签},// barWidth: '30%',data: yDataArr2},]};// 步骤5：将配置项设置给echarts实例对象chart.setOption(option)</script>
</body></html>小结
折线图常见效果
标记
线条控制
填充风格
紧挨边缘
缩放：脱离 0 值比例
堆叠图
堆积图是在普通面积图的基础上，将不同数据项一层层堆叠起来，每个数据系列的起始点是上一个数据系列的结束点，既能看到各数据系列的走势，又能看到整体的规模和不同数据项的占比情况。
两折线图堆叠前
两折线图堆叠后
堆叠并填充后
案例源码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>折线图常见效果</title><!-- 步骤1：引入echarts.js文件 --><script src="./js/echarts.min.js"></script>
</head>
<!--
步骤1：引入echarts.js文件步骤2：准备一个呈现图表的盒子步骤3：初始化echarts实例对象步骤4：准备配置项步骤5：将配置项设置给echarts实例对象 --><body><!-- 步骤2：准备一个呈现图表的盒子 --><div id="changshi" style="width:600px; height:400px"></div><script>// 步骤3：初始化echarts实例对象// 参数，dom，决定图表最终呈现的位置var chart = echarts.init(document.querySelector('#changshi'))var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大牛']var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300]var yDataArr1 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300]// 步骤4：准备配置项var option = {title: {text: '成绩展示',textStyle: {color: 'red'},borderWidth: 5, //边框宽度borderColor: 'blue', //边框颜色borderRadius: 5, //边框圆角半径left: 50, //距离盒子的左侧50pxtop: 10, //距离盒子的上面10pxlink: ' http://www.itcast.cn' //点击可以发生页面跳转},tooltip: {// trigger: 'item',trigger: 'axis',// triggerOn:'mouseover' //鼠标滑过图表时，便会弹出提示框，这是默认的// triggerOn: 'click', //鼠标点击图表时，才会弹出提示框// formatter:'{b}的成绩是{c}'// formatter: function (arg) {// console.log(arg) //控制台打印参数// return arg[0].name + '语文的分数是' + arg[0].data// }},xAxis: {type: 'category', //类目轴data: xDataArr// boundaryGap:false},yAxis: {type: 'value', //数值轴scale: true},series: [{name: '语文成绩',type: 'line', //图表的类型，line就是折线图，pie就是饼图等等// markPoint: {// data: [{// type: 'max',// name: '最大值'// },// {// type: 'min',// name: '最小值'// }// ]// },// markLine: {// data: [{// type: 'average',// name: '平均值'// }]// },// markArea: {// data: [// [{// xAxis: '张三'// }, {// xAxis: '李四'// }],// [{// xAxis: '小明'// }, {// xAxis: '茅台'// }]// ]// },// smooth: true, //变成平滑的效果lineStyle: {color: 'green',type: 'solid' //虚线的效果 dotted 点线 solid 实线(默认)},label: {show: true, //显示数值rotate: 60, //可以让数值旋转60°，给用户带来不一样的体验position: 'top' //位置标签},// barWidth: '30%',// areaStyle: {// color: 'green'// }, //面积填充data: yDataArr,stack:'all',areaStyle:{}},{name: '数学成绩',type: 'line',label: {show: true, //显示数值rotate: 60, //可以让数值旋转60°，给用户带来不一样的体验position: 'top' //位置标签},data:yDataArr1,stack:'all',areaStyle:{}}]};// 步骤5：将配置项设置给echarts实例对象chart.setOption(option)</script>
</body></html>ECharts的讲解相关推荐
- echarts 地图自定义图标_DMKB08：Echarts 分段设色
为了丰富DataMap的可视化效果,集成了百度的Echarts 本文讲解Echarts分段设色. 关于Echarts可以浏览官网: Apache ECharts (incubating)echart ...
- 【前端大屏实战1】Vue+Echarts -- 大屏简介初体验 =＞ 大屏自适应缩放解决方案 =＞ 使用transform:scale =＞ 组件化抽离ScaleBox=＞【两分钟实现大屏宽高等比例】
如果累了就冬眠吧,如果睡不着,就接纳暂时的失眠,不强迫自己入睡. 目录 一.大屏简介 1.数据可视化 2.大屏用途 3.大屏效果展示 二.大屏需求分类 1.固定尺寸的"真实"大屏 ...
- 史上最全的ECharts讲解与使用
首先搞清楚,什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库. ECharts支持数据类型 支持直接传入包括二维表,key-value 等多种格式的数据源.常 ...
- echarts画图实例讲解
前两天分享了一个项目(http://hyuhan.com/2016/11/17/A-data-display-platform/),里面用到了echarts(一个纯Javascript的图表库)来画图 ...
- 在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
- echart 圆饼图 显示单位_玩转ECharts之实现“1/2圆的玫瑰图”
前言 玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
- echarts label加边框_玩转ECharts之实现“动态颜色的Label”
前言 玩转ECharts系列,主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表,接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些&qu ...
- echarts迁徙图 vue_vue中高德搭配echarts做数据迁徙流线图
前言 此系列共分为以下几篇 <vue中高德地图的使用> <vue中基于高德的多行政区域覆盖> <vue中高德搭配echarts做数据迁徙流线图> (本篇) 本篇效果 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
最新文章
- 病毒及***防御手册之一
- Distinct Subsequences
- 第5周实践项目2 链栈的算法库建立
- C# Datagridview完整攻略
- idea提交spark任务，内存不足，指定JVM内存的解决方法
- 各项兼容坑的记录-持续更新
- 智慧城市近两年来受到国家高度重视
- ue html乱码,UE UTF8 乱码
- 数学建模常用解题方法
- 初级学电脑计算机的入门知识,电脑基础知识入门学习（小白学好电脑从哪里开始）...
- git error Missing tree 解决办法
- 【HMS core】【push kit】【FAQ】华为推送服务 手机未收到推送消息/消息延迟/息屏通知 问题合集
- 假装自己升级了Win11~
- log4j2远程执行漏洞原理以及解决方案
- 裸金属服务器（Bare Metal Server，BMS）
- 用什么软件测试usb速度,什么是usb 3.0?实测usb 3.0与usb 2.0传输速度对比
- 计算机四种传播途径,计算机病毒的传播途径
- 华为手机怎么录屏？十分简单，轻松学会
- 微信小程序项目实例Java后台的小程序求职招聘|兼职管理系统
- 判断sign签名(json格式)