前端数据可视化—Echart——笔记整理（黑马课程）

1.Echarts介绍

1.1 常见的数据可视化库：

1.2 什么是echarts

1.3 使用步骤：

2.Echarts的配置

3.柱状图bar引入到HTML中

3.1 立即执行函数

3.2 柱状图bar引入到HTML

4.定制柱状图

4.1 修改柱形为圆角以及柱子宽度（在series配置项里设置）

4.2 更换对应数据

4.3 让图表随着屏幕的变化而自适应（只需两行代码）

5.Echarts社区

6.Echarts小结

6.2 常见类型

6.2 使用场景

1.Echarts介绍

官网：Apache ECharts

1.1 常见的数据可视化库：

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

1.2 什么是echarts

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

官网地址：Apache ECharts

1.3 使用步骤：

1.引入echarts 插件文件到html页面中

2.准备一个有宽、高的DOM容器

3.初始化echarts实例对象

4.指定配置项和数据(option)

5.将配置项设置给echarts实例对象

1.引入echarts.min.js 插件、flexible.js、jquery.js、文件到html页面中

下载：：下载 - Apache ECharts

    <script src="js/echarts.min.js"></script>

2.准备一个有宽、高的DOM容器

<div id="main" style="width: 600px;height:400px;"></div>

3.初始化echarts实例对象

var myChart = echarts.init(document.getElementById('main'));

4.指定配置项和数据(option)

var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]
};

5.将配置项设置给echarts实例对象

myChart.setOption(option);

整体的代码如下：

    <title>Echarts使用</title><!-- 第一步：引入echarts.js文件 --><script src="js/echarts.min.js"></script><style>/* 第二步：准备一个有宽、高的DOM容器 */.box {width: 300px;height: 300px;background-color: pink;}</style>
</head><body><div class="box"></div><script>//第三步：初始化实例对象  echarts.init(dom容器)var Chart = echarts.init(document.querySelector(".box"));// 第四步：指定配置项和数据var option = {  xAxis: {    type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },yAxis: {    type: 'value' },series: [{    data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line' }]};// 第五步：将配置项给实例对象// 本页面的配置项为option，实例对象为ChartChart.setOption(option)</script></body>

2.Echarts的配置

可查询官方手册：Documentation - Apache ECharts

需要了解的主要配置：

series、 xAxis、yAxis、grid、tooltip、title、legend、color

series：系列列表。每个系列通过 type 决定自己的图表类型。图标数据，指定什么类型的图标，可以多个图表重叠。
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：标题组件
tooltip：提示框组件
legend：图例组件
boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
color：调色盘颜色列表。
stack：数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。

option = {// color设置我们线条的颜色 注意后面是个数组color: ['pink', 'red', 'green', 'skyblue'],// title设置图表的标题title: {text: '折线图堆叠123'},// tooltip的提示框组件 tooltip: {// trigger触发方式trigger: 'axis'},// legend图例组件legend: {// 如果series里面有了 name值则 legend里面的data可以删掉},// grid网格配置  grid可以控制线形图 柱状图 图表大小grid: {//距左右上下的距离left: '3%',right: '4%',bottom: '3%',// containLabel是否显示刻度标签 如果是true 就显示 否则反之containLabel: true},// toolbox工具箱组件  可以另存为图片等功能toolbox: {feature: {saveAsImage: {}}},// xAxis设置x轴的相关配置xAxis: {// category为类目type: 'category',// boundaryGap是否让我们的线条和坐标轴有缝隙boundaryGap: false,data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']},// yAxis设置y轴的相关配置yAxis: {type: 'value'},// series系列图表配置 它决定着显示那种类型的图表series: [{name: '邮件营销',type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},{name: '联盟广告',type: 'line',data: [220, 182, 191, 234, 290, 330, 310]},{name: '视频广告',type: 'line',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接访问',type: 'line',data: [320, 332, 301, 334, 390, 330, 320]}]
};

3.柱状图bar引入到HTML中

官网找到类似实例，适当分析，并且引入到HTML页面中
根据需求定制图表

3.1 立即执行函数

为了防止变量污染，减少命名冲突，可采取立即执行函数的写法。因为里面的变量都是局部变量。

立即执行函数可封装大量的工作而不会在背后遗留任何全局变量。
定义的所有变量都会成员立即执行函数的局部变量，不用担心这些临时变量会污染全局空间。

var o = {  message: (function() {  var who = "me",  what = "call";  return what + " " + who;  } ()),  getMsg: function() {  return this.message;  }
};
// usage
o.getMsg(); // "call me"
o.message; // "call me"
//其中：o.message是一个字符串类型的属性，不是一个函数，但它需要一个函数在脚本被载入时被执行并帮忙定义属性。

3.2 柱状图bar引入到HTML

新建index.js，在其中使用（自行手动跳转到1.3使用步骤）。在html引入index.js【注：在body标签的最底下引用】

4.定制柱状图

配置项可查询官方手册：Documentation - Apache ECharts

4.1 修改柱形为圆角以及柱子宽度（在series配置项里设置）

series: [{name: "直接访问",type: "bar",// 修改柱子宽度barWidth: "35%",data: [10, 52, 200, 334, 390, 330, 220],itemStyle: {// 修改柱子圆角barBorderRadius: 5}}]};

4.2 更换对应数据

// x轴中更换data数据data: [ "旅游行业","教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业" ],
// series 更换数据data: [200, 300, 300, 900, 1500, 1200, 600]

4.3 让图表随着屏幕的变化而自适应（只需两行代码）

  window.addEventListener("resize", function() {myChart.resize();});

其他样式同理。

注：记得引入echarts.min.js 插件、flexible.js、jquery.js、文件到html页面中。新建index.js，在其中使用（自行手动跳转到1.3使用步骤）。在html引入index.js【注：在body标签的最底下引用】

5.Echarts社区

官网链接：Examples - Apache ECharts

自行查看

文档

下载echarts

资源图片

社区

6.Echarts小结

6.2 常见类型

柱状图 bar	seriess[].type、xAxis、yAxis、markPoint、markLine、label、barWidth
折线图 line	seriess[].type、xAxis、yAxis、markPoint、markLine、markArea、smooth、lineStyle、areaStyle、boundaryGap、scale
散点图 scatter	seriess[].type、xAxis、yAxis、symbolSize、itemStyle、showEffectOn、rippleEffect、scale

饼图 pie	seriess[].type、label、radius、roseType、selectedMode、selectedOffset
地图 map	seriess[].type、geo、map、roam、zoom、center、label、GeoIndex、visualMap、coordinateSystem
雷达图 radar	seriess[].type、radar、indicator、label、areaStyle、shape
仪表盘 gauge	seriess[].type、max、min、itemStyle

grid show、borderWidth、borderColor、left、top、right、bottom、width、height

axis type、data、position

dataZoom type、xAxisIndex、yAxisIndex、start、end

title textStyle、borderWidth、borderColor、borderRadius、left、top、right、bottom

tooltip trigger、triggerOn、formatter

toolbox feature、saveAsImage、dataView、restore、dataZoom、magicType

legend data

其中这三个只适合直角坐标系（柱状图 bar、折线图 line、散点图 scatter）

grid show、borderWidth、borderColor、left、top、right、bottom、width、height

axis type、data、position

dataZoom type、xAxisIndex、yAxisIndex、start、end

grid	show、borderWidth、borderColor、left、top、right、bottom、width、height
axis	type、data、position
dataZoom	type、xAxisIndex、yAxisIndex、start、end

title	textStyle、borderWidth、borderColor、borderRadius、left、top、right、bottom
tooltip	trigger、triggerOn、formatter
toolbox	feature、saveAsImage、dataView、restore、dataZoom、magicType
legend	data

grid	show、borderWidth、borderColor、left、top、right、bottom、width、height
axis	type、data、position
dataZoom	type、xAxisIndex、yAxisIndex、start、end

6.2 使用场景

柱状图：柱状图描述的是分类数据，呈现的是每一一个分类中有多少
折线图：折线图常用来分析数据随时间的变化趋势
散点图：散点图可以帮助我们推断出不同维度数据之间的相关性
饼图：饼图可以很好地帮助用户快速了解不同分类的数据的占比情况
地图：地图主要可以帮助我们从宏观的角度快速看出不同地理位置上数据的差异
雷达图：雷达图可以用来分析多个维度的数据与标准数据的对比情况。
仪表盘：仪表盘可以更直观的表现出某个指标的进度或实际情况

前端数据可视化—Echart——笔记整理相关推荐

ECharts数据可视化学习笔记和应用
ECharts数据可视化学习笔记和应用一.概念二.Echarts使用使用步骤三.Echarts-基础配置四.柱状图图表1 五.柱状图图表2 六.折线图1 七.折线图2 八.饼状图1 九.饼形 ...
前端数据可视化可绘制地图等插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
用最科学的方法展示最形象的图表——前端数据可视化实践
前言也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题. 需求那么,在我们的项目 ...
python气象数据可视化学习笔记6——利用python地图库cnmaps绘制地图填色图并白化
文章目录 1. 效果图 2. cnmaps简介及安装 2.1 写在前面 2.2 cnmaps简介和安装 3. 导入库 4. 定义绘图函数 4.1 使用get_adm_maps返回地图边界 4.2 ax ...
FlyFish｜前端数据可视化开发避坑指南（二）
FlyFish是云智慧开源的一款数据可视化编排平台.通过配置数据模型为用户提供上百种可视化图形组件,零编码即可实现符合自己业务需求的炫酷可视化大屏. 同时,FlyFish也提供了灵活的拓展能力,支持组 ...
前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线
我为什么选择ECharts ? 1.容易使用,好上手,官网文档优雅清晰,案例简明美观,学习时间短. 2.开源免费,压根不要什么成本,适合我这种穷屌啊.所以,在比较了MetricGraphics.js后 ...
matplotlib 显示批量图片_chapter4-1 简单数据可视化包Matplotlib整理1
Matplotlib是Python数据可视化最简单常用的包之一,笔者希望通过本篇文章和之后的常用技巧补充,将自己在科研和工作中积累和摘抄的数据可视化包使用经验和技巧笔记展示大家~ 本部分技巧知识点主要 ...
数据可视化学习笔记一——概述
工作准备文章目录工作准备工作内容补充说明地理信息数字化技术 GIS QGis PostGIS PostgreSQL 可视化技术 echarts mapbox three.js [Vue.js ...
第十二届前端搞可视化部分笔记
第十二届前端搞可视化文章目录第十二届前端搞可视化 <如何融合数据可视化与物理世界> <深度探索图分析与图可视化> <如何对BI产品做可视化技术选型> < ...
1. 数据可视化简介笔记
数据可视化简介 1 可视化释义 2 可视化简史 3 数据可视化详解 4 数据可视化研究挑战以上是引用了某本书籍的目录数据可视化-百度百科参考:大数据分析与应用_可视化基础PPT 1 可视化释义 ...

前端数据可视化—Echart——笔记整理

1.Echarts介绍

1.1 常见的数据可视化库：

1.2 什么是echarts

1.3 使用步骤：

2.Echarts的配置

3.柱状图bar引入到HTML中

3.1 立即执行函数

3.2 柱状图bar引入到HTML

4.定制柱状图

4.1 修改柱形为圆角以及柱子宽度（在series配置项里设置）

4.2 更换对应数据

4.3 让图表随着屏幕的变化而自适应（只需两行代码）

5.Echarts社区

6.Echarts小结

6.2 常见类型

6.2 使用场景

前端数据可视化—Echart——笔记整理相关推荐

最新文章

热门文章