ECharts实战教程

ECharts教程

参考博客：pink老师学习之Echarts
注：本人擅长于后端开发，前端不是很熟练。闲暇时间会跟着pink老师的视频敲敲前端代码，收益颇多<^ 。^>

一、ECharts介绍

官网链接：Apache ECharts

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表（折线图、柱状图、散点图、饼图、K线图且支持自定义）。

二、ECharts入门教程

2.1、官方入门教程: 5分钟上手ECharts

本人一般都喜欢下载压缩版js文件，下载地址为: 获取ECharts.min.js （先点击Dist跳转至GitHub，再选择echarts.min.js，点击后右键Raw，选择链接另存为你的项目目录下即可）

入门篇教程中，我们可以知道绘制一个简单的图表需要如下几步:

<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
</script>

2.2、ECharts的基础配置

官网给出了许多示例：链接 这些都可以直接拿来用，但里面的一些配置需要根据自己的需求来修改，所以我们需要了解ECharts的基础配置。

常用的主要配置:

需要了解的主要配置大致有：series xAxis yAxis grid tooltip title legend color。 详细配置可移步官方配置项参考文档：详细配置 。 也可参考菜鸟教程：移步菜鸟教程
series
- 系列列表。每个系列通过 type 决定自己的图表类型
- 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- ```
series: [{name: '销量',  // 系列名称type: 'bar',  // 系列图表类型data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]
```
xAxis：直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴
grid：直角坐标系内绘图网格。
title：为图表配置标题
tooltip：配置提示信息
toolbox：工具栏
legend：图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
```
legend: {data: [{name: '系列1',// 强制设置图形为圆。icon: 'circle',// 设置文本为红色textStyle: {color: 'red'}}]
}
```
color：调色盘颜色列表
series.stack: 数据堆叠，同个类目轴上系列配置相同的stack值后后一个系列的值会在前一个系列的值上相加。 不想堆叠直接删掉stack属性即可。

三、ECharts项目实战

视频教程地址: pink老师之基于ECharts数据可视化项目

3.1、项目效果图:

3.2、项目前期准备：

项目核心：先布好局，之后利用ECharts填充图表。

设计稿是1920px， 采用屏幕自适应

flexible.js : 检测浏览器宽度、修改html文字大小。 项目引入后手动修改源码的var e=i.clientWidth/24; 把屏幕分为 24 等份。 github地址：https://github.com/amfe/lib-flexible
rem单位：页面元素根据 rem 适配大小，配合 cssrem 插件（vscode）。 idea中需安装px2rem插件
root fontsize 就是 html 中 fontsize 的大小。 项目中基准值是 80px，则其数值修改为80
flex 布局：进行页面快速布局。
jQuery.min.js: jQuery版本
px2rem插件的使用:
1. 使用快捷键 alt + d 可以将局部px 转 rem。
2. 还可以使用 ctrl+ alt + d 进行全局转换。

3.3、基础设置知识点

3.3.1、CSS 的 background 属性的缩写顺序

background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position,background-size。 如果用 background-size,一定要用 / 分隔。

body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/100% 100%;
}

3.3.2、边框图片 border-image

border-image 是 border-image-source、border-image-slice、border-image-width、border-image-outset 和 border-image-repeat 属性的简写，其中：

border-image-source：定义边框图像的路径；
border-image-slice：定义边框图像从什么位置开始分割（不带单位）；
border-image-width：定义边框图像的厚度（宽度）（带单位: 上、右、下、左）；
border-image-outset：定义边框图像的外延尺寸（边框图像区域超出边框的量）；
border-image-repeat：定义边框图像的平铺方式。

border-image-slice 属性可以接收三种类型的值：

number：数值，用具体数值指定图像分割的位置，数值代表图像的像素位置或向量坐标，不允许负值；
percentage：百分比，相对于图像尺寸的百分比，图像的宽度影响水平方向，高度影响垂直方向；
fill：保留边框图像的中间部分。

border-image-repeat 属性用来设置如何填充使用 border-image-slice 属性分割的图像边框，例如平铺、拉伸等等，该属性的语法格式如下：

border-image-repeat：[ stretch | repeat | round | space ]{1,2}

语法说明如下：

stretch：将被分割的图像使用拉伸的方式来填充满边框区域；
repeat：将被分割的图像使用重复平铺的方式来填充满边框区域，当图像碰到边界时，超出的部分会被截断；
round：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会根据情况缩放图像；
space：与 repeat 关键字类似，不同之处在于，当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。

border-image-repeat 属性能够接受 1~2 个参数值：

如果提供两个参数，那么第一个参数将用于水平方向，第二个将用于垂直方向；
如果只提供一个参数，那么将在水平和垂直方向都应用该值。

或者使用相对定位和绝对定位再结合 ::before 和 ::after会出四角角标。

3.3.3、flex布局页面

<!--页面主体 -->
<section class="viewport"><div class="column"><!-- 公用样式 --><div class="panel line"><h2>柱形图-横向 </h2><div class="chart"><!-- 数据图--></div><!-- 角标 --><div class="panel-footer"></div></div></div><div class="column"></div><div class="column"><div class="panel bar"></div></div>
</section>
<style>
/*页面主体*/
.viewport {display: flex;min-width: 12.8rem;max-width: 24rem;margin: 0 auto;padding: 0.125rem 0.125rem 0;min-height: 9.75rem;
}.viewport .column {flex: 3;
}.viewport .column:nth-child(2) {flex: 4;margin: 0.125rem 0.1875rem 0;overflow: hidden;
}
</style>

3.3.4、flex布局li

.viewport .no .no-hd {position: relative;border: 1px solid rgba(25, 186, 13, 0.17);
}.viewport .no .no-hd::before {position: absolute;top: 0;left: 0;content: "";width: 30px;height: 10px;border-top: 2px solid #02A6B5;border-left: 2px solid #02A6B5;
}.viewport .no .no-hd::after {content: "";position: absolute;width: 30px;height: 10px;border-bottom: 2px solid #02a6b5;border-right: 2px solid #02a6b5;right: 0;bottom: 0;
}.viewport .no .no-hd ul {display: flex;
}.viewport .no .no-hd ul li {position: relative;flex: 1;line-height: 1rem;font-size: 0.675rem;color: #FFEB7B;text-align: center;font-family: "electronicFont", serif;
}.viewport .no .no-hd ul li::after {content: "";position: absolute;top: 25%;right: 0;height: 50%;width: 1px;background: rgba(255, 255, 255, 0.2);
}

3.4、折线图实例

需求1：更换图例组件文字颜色 rgba(255,255,255,.5) 文字大小为12

legend: {textStyle: {color: '#4c9bfd'},right: '10%'
},

需求2：修改图表大小

grid: {left: '3%',top: '20%',right: '4%',bottom: '3%',containLabel: true,show: true,borderColor: '#012f4a',
},

需求3： x轴相关配置

刻度去除
x轴刻度标签字体颜色：#4c9bfd
剔除x坐标轴线颜色（将来使用Y轴分割线)
轴两端是不需要内间距 boundaryGap

    xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],axisTick: {show: false // 去除刻度线},axisLabel: {color: '#4c9bfd' // 文本颜色},axisLine: {show: false // 去除轴线},boundaryGap: false  // 去除轴内间距},

需求4： y轴的定制

刻度去除
字体颜色：#4c9bfd
分割线颜色：#012f4a

    yAxis: {type: 'value',axisTick: {show: false  // 去除刻度},axisLabel: {color: '#4c9bfd' // 文字颜色},splitLine: {lineStyle: {color: '#012f4a' // 分割线颜色}}},

需求5：两条线形图定制

颜色分别：#00f2f1 #ed3f35
把折线修饰为圆滑 series 数据中添加 smooth 为 true

    color: ['#00f2f1', '#ed3f35'],series: [{name:'新增粉丝',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',// 折线修饰为圆滑smooth: true,},{name:'新增游客',data: [100, 331, 200, 123, 233, 543, 400],type: 'line',smooth: true,}]

需求6：配置数据

// x轴的文字
xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
}

// 图标数据series: [{name:'新增粉丝',data:  [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],type: 'line',smooth: true},{name:'新增游客',data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],     type: 'line',smooth: true}}]

需求7：新增需求点击 2020年 2021年数据发生变化

以下是后台送过来数据（ajax请求过来的）

 var yearData = [{year: '2020',  // 年份data: [  // 两个数组是因为有两条线[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]]},{year: '2021',  // 年份data: [  // 两个数组是因为有两条线[123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],[143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]]}];

tab栏切换事件
点击2020按钮需要把 series 第一个对象里面的data 换成 2020年对象里面data[0]
点击2020按钮需要把 series 第二个对象里面的data 换成 2020年对象里面data[1]
2021 按钮同样道理

3.5、使用echarts完成中国省市区县镇地图展示

参考博客地址：点击学习

3.6、Echarts-map使用（扩展）

参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)

实现步骤：

第一需要下载china.js提供中国地图的js文件
第二个因为里面代码比较多，我们新建一个新的js文件 myMap.js 引入
使用社区提供的配置即可。

需要修改：

去掉标题组件
去掉背景颜色
修改地图省份背景 #142957 areaColor 里面做修改
地图放大通过 zoom 设置为1.2即可

 geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},roam: false,itemStyle: {normal: {areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},

3.7、大致实现的效果

在实现交通线路图以及3D图形时，请求官方的json数据会超时，故而这里没有测试出来。。。