ECharts实战教程
pink老师讲解的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.min.js文件 -------->图表依赖这个js文件
- 准备一个具备大小的DOM容器 --------->生成的图表会放入这个容器内
- 初始化echarts实例对象--------------> 通过 echarts.init 方法初始化一个 echarts 实例
- 指定配置项和数据(option)---------->根据具体需求修改配置选项
- 将配置项设置给echarts实例对象-------->让echarts对象根据修改好的配置生效
<!-- 为 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插件的使用:
- 使用快捷键
alt + d
可以将 局部px
转rem
。 - 还可以使用
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数据会超时,故而这里没有测试出来。。。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)