可视化项目
Apache ECharts
数据可视化
- 数据可视化主要目的:借助于图形化手段,清晰有效地传达与沟通信息。
- 数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理。
- 数据可视化在我们互联网公司中经常用于通用数据报表,移动端图表,大屏可视化,图编辑等
- ECharts.js 百度出品的一个开源 Javascript 数据可视化库
使用技术
完成该项目需要具备以下知识:
-
div + css 布局
-
flex 布局
-
css3动画
-
css3渐变
-
css3边框图片
-
原生js + jquery 使用
-
rem适配
-
echarts基础
CSS3 动画、渐变
jQuery库+ 原生 JavaScript
flex布局 和 rem 适配方案
图片边框 border-image
ES6 模板字符
ECharts 可视化库等等
ECharts的基本使用
ECharts 使用五步曲
- 步骤1:下载并引入echarts.js文件---------->图表依赖这个js库
- 步骤2:准备一个具备大小的DOM容器---------->生成的图表会放入这个容器
- 步骤3:初始化echarts实例对象----------->实例化echarts对象
- 步骤4:指定配置项和数据(option)--------->根据具体需求修改配置选项
- 步骤5:将配置项设置给echarts实例对象--------->让echarts对象根据修改好的配
置生效
文档菜单—配置项手册 学echarts关键在于学会查阅文档,根据需求修改配置
Echarts-体验
自己步骤:
- 下载echarts https://github.com/apache/incubator-echarts/tree/4.5.0
- 引入echarts
dist/echarts.min.js
- 准备一个具备大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
-
初始化echarts实例对象
echarts.init () 是一个方法
echarts.init () = new Obj( )
var myChart = echarts.init(document.getElementById('main'));
- 指定配置项和数据(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'
}]
};
-
将配置项设置给echarts实例对象
setoption 设置
myChart.setOption(option);
Echarts-基础配置
-
series
- 系列列表。每个系列通过
type
决定自己的图表类型 - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- 系列列表。每个系列通过
-
xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
-
yAxis:直角坐标系 grid 中的 y 轴
-
grid:直角坐标系内绘图网格。
-
title:标题组件
-
tooltip:提示框组件
-
legend:图例组件
-
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的
stack
值后 后一个系列的值会在前一个系列的值上相加。

代码演示 :
var option = {
color: ['pink', 'blue', 'green', 'skyblue', 'red'],
title: {
text: '我的折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['直播营销', '联盟广告', '视频广告', '直接访问']
},
grid: {
left: '3%',
right: '3%',
bottom: '3%',
// 当刻度标签溢出的时候,grid 区域是否包含坐标轴的刻度标签。如果为true,则显示刻度标签
// 如果left right等设置为 0% 刻度标签就溢出了,此时决定是否显示刻度标签
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
// 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
boundaryGap: false,
data: ['星期一', '星期二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
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]
}
]
};
grid
- 如果 left right 为0% , 刻度标签就溢出了 , 此时决定了 是否显示刻度标签
grid: {
containLabel: true
},
xAxis
默认为 true
,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
boundaryGap: false // 刻度显示
color
线条颜色 , 后面跟数组类型
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
}
series: [
{
name: 'Email', // name 和 legend 里面的数据对应显示, 包括修改和删除
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
stack : 数据堆叠
-
如果给stack 指定不同值或者去掉这个属性则不会发生数据堆叠
-
如果要直观的显示数据 可以直接删除掉
-
后期要显示数据 可以给stack 设置 不同的值
01-数据可视化项目适配方案

REM适配
-
设计稿是1920px
-
PC端适配: 宽度在 1024~1920之间页面元素宽高自适应
-
flexible.js 把屏幕分为 24 等份
-
cssrem 插件的基准值是 80px , 按最大设计稿尺寸划分 (1920)
插件-配置按钮—配置扩展设置–Root Font Size 里面 设置。
但是别忘记重启vscode软件保证生效
-
要把屏幕宽度约束在1024~1920之间有适配,实现代码:
-
// 实现rem适配
@media screen and (max-width: 1024px) {
html {
font-size: 42.66px !important;
}
}
@media screen and (min-width: 1920px) {
html {
font-size: 80px !important;
}
}
02-项目搭建(初始化)

- 新建相关文件夹
- 引入相关文件
03-基础布局

- 效果图: 1920px * 1078px
- body 设置背景图 ,行高1.15
- viewport 主体容器,限制最小宽度1024px,与最大宽度1920px,最小高度780px。
- 需要居中显示
- 使用logo.png做为背景图,在容器内显示
- 内间距 88px 20px 0
- column 列容器,分三列,占比 3:4:3
- 中间容器外间距 32px 20px 0
04-边框图片
边框图片切割原理:(重要)
把四个角切出去(九宫格的由来),中间部分可以铺排、拉伸或者环绕。


组合写法:
border-image: url("images/border.jpg") 167/20px round;
// 路径 , 裁剪的尺寸 , 图片边框 , 图片边框平铺
拆分写法:
border-image-source: url("images/border.jpg");
border-image-slice: 167 167 167 167;
border-image-width: 20px;
border-image-repeat: round;
要设置边框图片需要设置边框大小
边框图片的宽度,默认边框的宽度。
border-image-width 需要加单位 ; border-image-slice 不需要加单位
border: 15px solid pink;
05-设置公共面板样式
inner 里的内容会显示边框下面 , 为了让inner 显示在panel 中间 , inner 盒子采用定位 负的 left top bottom right 的值 撑大盒子 , 给一个上下左右内边距隔开
面板 .panel
- 容器 .inner 内边距是 上下24px 左右 36px
/* 公共面板样式 */
.panel {
// 边框盒子
position: relative;
border: 15px solid transparent;
border-width: .6375rem .475rem .25rem 1.65rem;
border-image-source: url(../images/border.png);
border-image-slice: 51 38 20 132;
margin-bottom: .25rem;
}
.inner {
// 负值撑开盒子
position: absolute;
top: -0.6375rem;
left: -1.65rem;
right: -0.475rem;
bottom: -0.25rem;
padding: .3rem .45rem;
}
.panel h3 {
font-size: 0.25rem;
color: #fff;
font-weight: 400;
}
06-概览区域(overview)-布局
07-监控区域(monitor)-布局
监控区域 monitor 大盒子的高度是 480px
结构解释:
- .tabs 标签选项 加上active激活选项 默认激活第一个选项
- .content 切换内容 加上
style="display: block;"
显示内容 默认激活第一个内容
样式描述:
- .inner 容器内间距 24px 0
- .tabs 容器内间距 0 36px
- a 容器 颜色: #1950c4 内间距:0 27px 字体:18px
- 第一个a容器 去除左侧内间距 加上右侧2px宽度边框#00f2f1
- 激活的时候 颜色白色
- .content容器
- 占满剩余高度 flex:1
- 默认隐藏
- .head 容器
- 行高 1.05 背景 rgba(255, 255, 255, 0.1) 内间距 12px 36px 颜色 #68d8fe 字体大小 14px
- row 容器
- 行高 1.05 内间距 12px 36px 颜色 #68d8ff 字体大小 12px
- .icon-dot 字体图标 绝对定位 左边0.2rem 透明度0
- 鼠标经过后:背景 rgba(255, 255, 255, 0.1) 透明度1
- col容器
- 宽度:1rem 2.5rem 1rem
- 第二个col 一行不换行 溢出 省略
08-监控区域-效果
立即执行函数用法
JS文件中,会有大量的变量命名,特别是Echarts使用中,需要大量初始化Echarts对象?
为了防止变量名冲突(变量污染) 我们采用立即执行函数策略:
(function(){})();
注意 : 多个立即执行函数中间必须加分号隔开
切换功能
- 绑定 标签页点击 事件
- 当前容器加active其他容器移除active
- index对应的内容容器显示其他容器隐藏
动画功能:
- 实现思路:
- 先克隆列表,追加在后面
- marquee-view 占满剩余高度,溢出隐藏
- 绝对定位,top 1.6rem bottom 0
- 宽度100%,溢出隐藏
- 使用animation实现动画
- 使用 translateY 向上位移 50%
- 动画时间15s,匀速播放,循环执行。
无缝滚动原理
- 先克隆marquee里面所有的行(row)
- 通过CSS3动画滚动marquee
- 鼠标经过marquee 就停止动画:
animation-play-state: paused;
js代码:
// 动画
$(".marquee-view .marquee").each(function() {
// console.log($(this));
var rows = $(this).children().clone();
$(this).append(rows);
});
css代码:
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
animation: move 15s linear infinite;
}
@keyframes move {
0% {
}
100% {
transform: translateY(-50%);
}
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
animation-play-state: paused;
}
09-点位区域(point)-布局
- 复制 html 和 css
- 设置公共样式 h3
10-点位区域-饼图
1. HTML引入图表
// 点位分布统计模块
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie"));
// 2. 指定配置项和数据
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: "面积模式",
type: "pie",
radius: [30, 110],
center: ["75%", "50%"],
roseType: "area",
data: [
{ value: 10, name: "rose1" },
{ value: 5, name: "rose2" },
{ value: 15, name: "rose3" },
{ value: 25, name: "rose4" },
{ value: 20, name: "rose5" },
{ value: 35, name: "rose6" },
{ value: 30, name: "rose7" },
{ value: 40, name: "rose8" }
]
}
]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
})();
2. 定制需求
第一步:参考官方例子,熟悉里面参数具体含义
option = {
// 提示框组件
tooltip: {
// trigger 触发方式。 非轴图形,使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容:
// a 代表series系列图表名称
// b 代表series数据名称 data 里面的name
// c 代表series数据值 data 里面的value
// d代表 当前数据/总数据的比例
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 控制图表
series: [
{
name: '点位统计', // 图表名称
type: 'pie', // 图表类型
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 饼形图半径。 可以是像素。也可以是百分比( 基于DOM容器大小)第一项是内半径,第二项是外半径(通过它可以实现饼形图大小)
radius: ['10%', '70%'],
center: ['50%', '50%'], // 图表中心位置 left 50% top 50% 距离图表DOM容器
roseType: 'radius', // radius 半径模式 半径长短,另外一种是 area 面积模式
// 数据集 value 数据的值 name 数据的名称
data: [
{value:10, name:'rose1'},
{value:5, name:'rose2'},
{value:15, name:'rose3'},
{value:25, name:'rose4'},
{value:20, name:'rose5'},
{value:35, name:'rose6'},
{value:30, name:'rose7'},
{value:40, name:'rose8'}
]
}
]
};
第二步:按照需求定制
- 需求1:颜色设置
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
- 需求2:修改饼形图大小 ( series对象)
radius: ['10%', '70%'],
- 需求3: 把饼形图的显示模式改为 半径模式
roseType: "radius",
- 需求4:数据使用更换(series对象 里面 data对象)
{ value: 20, name: '云南' },
{ value: 26, name: '北京' },
{ value: 24, name: '山东' },
需求5:字体略小些 10 px ( series对象里面设置 )
饼图图形上的文本标签可以控制饼形图的文字的一些样式。 label 对象设置
需求6:防止缩放的时候,引导线过长。引导线略短些 (series对象里面的 labelLine 对象设置 )
- 连接图表 6 px
- 连接文字 8 px
// 文字调整
+ label:{
+ fontSize: 10
+ },
+ // 引导线调整
+ labelLine: {
+ length: 6, // 连接扇形图线长
+ length2: 8 // 连接文字线长
+ }
需求7:浏览器缩放的时候,图表跟着自动适配。
// 监听浏览器缩放,图表对象调用缩放resize函数
// resize 是 myChart 对像的方法
window.addEventListener("resize", function() {
myChart.resize();
});
代码演示
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie"));
// 2. 指定配置项和数据
var option = {
// 一. 提示框组件
tooltip: {
trigger: "item", // 移动触发条件
formatter: "{a} <br/>{b} : {c} ({d}%)", // 格式化提示内容
// 格式化提示内容:
// a 代表series系列图表名称
// b 代表series数据名称 data 里面的name
// c 代表series数据值 data 里面的value
// d代表 当前数据/总数据的比例
},
// 二. 设置颜色
color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"],
// 三. series系列列表
series: [
{
name: "点位统计", // 图标名称
type: "pie", // 图标类型
radius: ["10%", "70%"], // 修改饼形图大小 ( series对象)
center: ["50%", "50%"], // 修改饼形图位置 ( series对象)
roseType: "radius", // 饼形图的显示模式改为 半径模式
// 文本标签控制饼形图文字的相关样式, 注意它是一个对象
label: {
fontSize: 10, // 修改文字大小
},
// 引导线调整
labelLine: {
length: 6, // 连接扇形图线长
length2: 8, // 连接文字线长
},
// 更换数据
data: [
{ value: 20, name: "云南" },
{ value: 26, name: "北京" },
{ value: 24, name: "山东" },
{ value: 25, name: "河北" },
{ value: 20, name: "江苏" },
{ value: 25, name: "浙江" },
{ value: 30, name: "四川" },
{ value: 42, name: "湖北" },
],
},
],
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
// resize 是 myChart 对像的方法
window.addEventListener("resize", function () {
myChart.resize();
});
})();
3. 饼图区域总结

11-地图区域 (map) -预留布局
注意第二列(column) 有个外边距(上面 32px 左右 20px 下是 0)
.viewport .column:nth-child(2) {
flex: 4;
margin: .4rem .25rem 0;
}
12-用户统计 (users) -布局
- 复制 html 和 css 结构
13-用户统计 (users) -柱状图
引入柱形图
// 1. 实例化对象
// 2. 指定配置和数据
// 3. 把配置给实例对象
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
第二步:按照需求修改
- 需求1: 修改柱子的颜色
// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
// (x1,y1) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[
{ offset: 0, color: '#00fffb' }, // 0 起始颜色
{ offset: 1, color: '#0061ce' } // 1 结束颜色
]
),
// 修改线性渐变色方式 2
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
- 需求2: 提示框组件放到柱子上触发, 没有阴影等效果
//提示框组件
tooltip: {
trigger: 'item', // 触发类型 经过轴触发axis 经过柱子触发item
// axisPointer: { // 坐标轴指示器,坐标轴触发有效 这个模块我们此时不需要删掉即可
// type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
// }
},
- 需求3: 修改柱形图表大小, 以及相关网格。
- 饼形图修改图表大小是通过 series 对象里面的 radius
- 柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
- 显示网格 show: true,网格颜色是 borderColor
// 直角坐标系内绘图网格(区域)
grid: {
left: "0%", // 网格距离 上右下左 的距离
right: "3%",
bottom: "3%",
containLabel: true, // 溢出是否包含文本
show: true, // 是否显示直角坐标系网格
borderColor: "rgba(0, 240, 255, 0.3)", //grid 四条边框的颜色 , 前提show 为true
},
- 需求4: X 轴调整
- 柱子在刻度之间
- 剔除刻度不显示
- 刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
- 修改x轴线的颜色 axisLine 里面的 lineStyle
// 1.刻度设置
axisTick: {
alignWithLabel: true, // true意思:图形在刻度中间 ,false意思:图形在刻度之间
show: false, // 不显示刻度
},
// 2.x坐标轴文字标签样式设置
axisLabel: {
color: "#4c9bfd",
},
// 3.x坐标轴颜色设置
axisLine: {
lineStyle: {
color: "rgba(0, 240, 255, 0.3)",
// width:8, x轴线的粗细
// opcity: 0, 如果不想显示x轴线 则改为 0
},
},
- 需求5: Y 轴调整
- 剔除刻度不显示
- Y轴文字颜色 #4c9bfd 通过 axisLabel 对象设置
- Y轴分割线颜色 splitLine 对象里面 lineStyle 对象设置
yAxis: [
{
// 1.刻度设置
axisTick: {
show: false, // 不显示刻度
},
// 2.y坐标轴文字标签样式设置
axisLabel: {
color: "#4c9bfd",
},
// 3.y坐标轴颜色设置
axisLine: {
lineStyle: {
color: "rgba(0, 240, 255, 0.3)",
// width:8, x轴线的粗细
// opcity: 0, 如果不想显示x轴线 则改为 0
},
},
// 4.y轴 分割线的样式
splitLine: {
lineStyle: {
color: "rgba(0, 240, 255, 0.3)",
},
},
},
],
- 需求6:调整数据,与省略图形定制
// x 轴的柱形图数据 // xAxis
data: ["上海", "广州", "北京", "深圳", "合肥", "", "......", "", "杭州", "厦门", "济南", "成都", "重庆"],
// series 柱形图数据
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]
-
省略图形
- 经过图形才显示提示,且省略的柱子不需要提示 ( 提取变量 )
- 图形单独设置颜色
var item = {
name: "",
value: 1200,
// 柱子颜色
itemStyle: {
color: "#254065",
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: "#254065",
},
},
// 鼠标经过工具提示隐藏
tooltip: {
extraCssText: "opacity:0",
},
}
// series配置data选项在中使用
data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],
浏览器缩放的时候,图表也等比例缩放
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
柱形图线条样式总结

核心原理:series 对象里面的data数组,里面的每一个数据影响每一个柱形。
重要的是,data数组里面除了直接写数字,还可以是对象。
直接把data里面对应的数据修改为需求配置的对象即可。
14-订单区域(order)-布局
- 复制 html 和 css 结构
15-销售统计( sales )-布局
- 复制 html 和 css 结构
16-销售统计( sales )-线形图
实现步骤:
- 寻找官方的类似示例,给予分析, 引入到HTML页面中
- 按照需求来定制它。
**第一步:**寻找官方的类似示例,给予分析。
// 销售统计模块
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".line"));
// 2. 指定配置和数据
var option = (option = {
tooltip: {
trigger: "axis",
},
legend: {
data: ["Email", "Union Ads"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["Mon", "Tue"],
},
yAxis: {
type: "value",
},
series: [
{
name: "Email",
type: "line",
stack: "Total",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "Union Ads",
type: "line",
stack: "Total",
data: [220, 182, 191, 234, 290, 330, 310],
},
],
});
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function () {
myChart.resize();
});
})();
**第二步:**按照需求来定制它。
- 需求1: 修改折线图大小,显示边框设置颜色:#012f4a,并且显示刻度标签。
// 设置网格样式
grid: {
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
show: true,// 显示边框
borderColor: '#012f4a',// 边框颜色
containLabel: true // 包含刻度文字在内
},
- 需求2: 修改图例组件中的文字颜色 #4c9bfd, 距离右侧 right 为 10%
// 图例组件
legend: {
textStyle: {
color: '#4c9bfd' // 图例文字颜色
},
right: '10%' // 距离右边10%
},
- 需求3: x轴相关配置
- 刻度去除
- x轴刻度标签字体颜色:#4c9bfd
- 剔除坐标轴线颜色(将来使用Y轴分割线)
- 轴两端是不需要内间距 boundaryGap
xAxis: {
type: 'category',
data: ["周一", "周二"],
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
-
如果series 里面设置了name,此时图例组件的data可以省略
data: [“邮件营销”, “联盟广告”]
color: ['#00f2f1', '#ed3f35'],
series: [{
name:'预期销售额',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true, // 折线修饰为圆滑
},{
name:'实际销售额',
type: 'line',
smooth: true,
}]
- 需求6: 配置数据
复制// x轴的文字和// 图标数据
总结:现在给的是年份数据,还需要切换效果。
点击年显示data 对应的数据[data]
17-销售统计( sales )-切换效果
销售统计模块切换原理
核心原理:
- series 里面的data 数据决定着折线的显示
- 当我们点击不同的tab标签, 就让 series 里面的data调用不同的数据即可。
- 我们现在只准备了年的数据,还需要准备季度、月和周的数据
实现步骤:
-
- 准备切换需要依赖的数据 4组
-
- 绑定点击事件
- 切换激活 tab 的样式
- 切换图表依赖的数据(重新渲染图表)
-
- 开启定时器,进行切换, 鼠标经过sales停止定时器,离开开启定时器
第一步:准备数据,使用数据
var data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
],
quarter: [
[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
],
month: [
[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
],
week: [
[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
]
}
series 里面修改 data 数据
series: [{
name:'预期销售额',
data: data.year[0],
type: 'line',
smooth: true,
itemStyle: {
color: '#00f2f1'
}
},{
name:'实际销售额',
data: data.year[1],
type: 'line',
smooth: true,
itemStyle: {
color: '#ed3f35'
}
}]
第二步:点击后切换
// 切换
$('.sales').on('click', '.caption a', function(){
// 样式
$(this).addClass('active').siblings().removeClass('active')
// currData 当前对应的数据
// this.dataset.type 标签上的data-type属性值,对应data中的属性
// obj[k]
// data["year"]
var currData = data[this.dataset.type] ?
// 修改图表1的数据
option.series[0].data = currData[0]
// 修改图表2的数据
option.series[1].data = currData[1]
// 重新设置数据 让图标重新渲染
myChart.setOption(option)
})
第三步:tab栏自动切换效果
- 开启定时器每隔3s,自动让a触发点击事件即可
- 鼠标经过sales,关闭定时器,离开开启定时器
var as = $(".sales .caption a");
var index = 0;
var timer = setInterval(function() {
index++;
if (index >= 4) index = 0;
as.eq(index).click();
}, 1000);
// 鼠标经过sales,关闭定时器,离开开启定时器
$(".sales").hover(
function() {
clearInterval(timer);
},
function() {
// 开启之前先清除定时器
clearInterval(timer);
timer = setInterval(function() {
index++;
if (index >= 4) index = 0;
as.eq(index).click();
}, 1000);
}
);
自动缩放
// 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
18-渠道区域&销售进度-布局
复制 html 和 css 样式
19-渠道分布(channel)-雷达图
第一步: 参考类似实例:
第二步: 按照需求来定制它
- 需求1: 去掉背景颜色,调整雷达图大小 65%
radar:{
center: ['50%', '50%'],
// 外半径占据容器大小
radius: '65%',
}
需求2: 指示器轴的分割段数为4条(4个圆圈)
radar:{
center: ['50%', '50%'],
// 外半径占据容器大小
radius: '65%',
// 指示器轴的分割段数
splitNumber: 4,
}
需求3: 雷达图分割线设为白色半透明 0.5
// 坐标轴在 grid 区域中的分隔线(圆圈)
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)',
// width: 2,
// type: 'dashed'
}
},

需求4: 雷达图 坐标轴轴线相关设置(竖线) axisLine
// 坐标轴轴线相关设置(竖线)axisLine
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
// width: 1,
// type: 'solid'
}
},
需求5: 修饰雷达图文字颜色为 #4c9bfd
name: {
// 修饰雷达图文本颜色
textStyle: {
color: '#4c9bfd'
}
},
需求6: 修饰 区域填充样式 series 对象
- 区域填充的背景颜色设置为: rgba(238, 197, 102, 0.6)
areaStyle: {
color: 'rgba(238, 197, 102, 0.6)',
},
- 区域填充的线条颜色为白色
// 线条样式
lineStyle: {
normal: {
color: '#fff',
// width: 1
}
},

需求7: 标记的图形(拐点)设置 注意 series 里面设置
- 用圆点显示, 拐点的大小设置为 5
- 小圆点设置为白色
- 在小圆点上显示相关数据,颜色设置为白色,10像素
// symbol 标记的样式(拐点),还可以取值'rect' 方块 ,'arrow' 三角等
symbol: 'circle',
// 拐点的大小
symbolSize: 5,
// 小圆点(拐点)设置为白色
itemStyle: {
color: '#fff'
},
// 在圆点上显示相关数据
label: {
show: true,
color: '#fff',
fontSize: 10
},
需求8: 鼠标经过显示提示框组件
tooltip: {
show: true,
// 控制提示框组件的显示位置
position: ['60%', '10%'],
},
需求9: 更换数据
// 雷达图的指示器 内部填充数据
indicator: [
{ name: '机场', max: 100 },
{ name: '商场', max: 100 },
{ name: '火车站', max: 100 },
{ name: '汽车站', max: 100 },
{ name: '地铁', max: 100 }
],
data: [[90, 19, 56, 11, 34]],
整个代码
// 销售渠道模块 雷达图
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".radar"));
// 2.指定配置
var option = {
tooltip: {
show: true,
// 控制提示框组件的显示位置
position: ["60%", "10%"]
},
radar: {
indicator: [
{ name: "机场", max: 100 },
{ name: "商场", max: 100 },
{ name: "火车站", max: 100 },
{ name: "汽车站", max: 100 },
{ name: "地铁", max: 100 }
],
// 修改雷达图的大小
radius: "65%",
shape: "circle",
// 分割的圆圈个数
splitNumber: 4,
name: {
// 修饰雷达图文字的颜色
textStyle: {
color: "#4c9bfd"
}
},
// 分割的圆圈线条的样式
splitLine: {
lineStyle: {
color: "rgba(255,255,255, 0.5)"
}
},
splitArea: {
show: false
},
// 坐标轴的线修改为白色半透明
axisLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.5)"
}
}
},
series: [
{
name: "北京",
type: "radar",
// 填充区域的线条颜色
lineStyle: {
normal: {
color: "#fff",
width: 1,
opacity: 0.5
}
},
data: [[90, 19, 56, 11, 34]],
// 设置图形标记 (拐点)
symbol: "circle",
// 这个是设置小圆点大小
symbolSize: 5,
// 设置小圆点颜色
itemStyle: {
color: "#fff"
},
// 让小圆点显示数据
label: {
show: true,
fontSize: 10
},
// 修饰我们区域填充的背景颜色
areaStyle: {
color: "rgba(238, 197, 102, 0.6)"
}
}
]
};
// 3.把配置和数据给对象
myChart.setOption(option);
// 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
})();
20-销售进度 (quarter) -饼状图
实现步骤:
- 寻找官方的类似示例,给予分析,引入到HTML页面中
- 按照需求来定制它。
第一步:参考官方示例:https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut
// 销售模块 饼形图 半圆形 设置方式
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".gauge"));
// 2. 指定数据和配置
var option = {
series: [
{
name: "销售进度",
type: "pie",
radius: ["50%", "70%"],
//是否启用防止标签重叠策略
// avoidLabelOverlap: false,
labelLine: {
normal: {
show: false
}
},
data: [{ value: 100 }, { value: 100 }, { value: 200 }]
}
]
};
// 3. 把数据和配置给实例对象
myChart.setOption(option);
})();
第二步:进行定制
需求1:改成半圆,图表大一些,让50%
文字在中心。
var option = {
series: [
{
type: "pie", // 饼形图
radius: ["130%", "150%"], // 放大半圆图形
center: ["48%", "80%"], // 移动半圆位置 套住50%文字
// avoidLabelOverlap: false, //是否启用防止标签重叠策略
label: {
normal: {
show: false // 线隐藏
}
},
startAngle: 180, startAngle: 180, // 半圆的起始角度,支持范围[0, 360] 不是旋转角度
data: [
{ value: 100 }, // 不需要名称
{ value: 100,}, // 不需要名称
{ value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域
]
}
]
}
需求2:鼠标经过无需变大,修改第一段颜色渐变#00c9e0->#005fc1,修改第二段颜色#12274d。
hoverOffset: 0, // 鼠标经过不变大
data: [
{
value: 100,
itemStyle: {
// 颜色渐变#00c9e0->#005fc1
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0,
0,
0,
1,
[
{ offset: 0, color: "#00c9e0" }, // 0 起始颜色
{ offset: 1, color: "#005fc1" } // 1 结束颜色
]
)
}
},
{ value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d


21-热销排行(top)-布局
复制 html 和 css
22-热销排行(top)-效果
实现思路:
- 准备后台返回的真实数据
- 利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串,进行渲染)
- 当鼠标进入 tab 的时候
- 激活当前的tab样式,删除其他tab的样式
- 渲染各省热销 sub 模块 (拼接html格式字符串,进行渲染)
- 默认激活第一个tab的效果
- 开启定时器,按依次切换
预备知识:
- 扩展知识:ES6模版字符
`${表达式}` //模板字符串使用反钩号 `` 而且允许自由换行
开始实现:
第一步:得到后台数据(实际开发中,这个数据通过ajax请求获得)
var hotData = [
{
city: '北京', // 城市
sales: '25, 179', // 销售额
flag: true, // 上升还是下降
brands: [ // 品牌种类数据
{ name: '可爱多', num: '9,086', flag: true },
{ name: '娃哈哈', num: '8,341', flag: true },
{ name: '喜之郎', num: '7,407', flag: false },
{ name: '八喜', num: '6,080', flag: false },
{ name: '小洋人', num: '6,724', flag: false },
{ name: '好多鱼', num: '2,170', flag: true },
]
},
{
city: '河北',
sales: '23,252',
flag: false,
brands: [
{ name: '可爱多', num: '3,457', flag: false },
{ name: '娃哈哈', num: '2,124', flag: true },
{ name: '喜之郎', num: '8,907', flag: false },
{ name: '八喜', num: '6,080', flag: true },
{ name: '小洋人', num: '1,724', flag: false },
{ name: '好多鱼', num: '1,170', flag: false },
]
},
{
city: '上海',
sales: '20,760',
flag: true,
brands: [
{ name: '可爱多', num: '2,345', flag: true },
{ name: '娃哈哈', num: '7,109', flag: true },
{ name: '喜之郎', num: '3,701', flag: false },
{ name: '八喜', num: '6,080', flag: false },
{ name: '小洋人', num: '2,724', flag: false },
{ name: '好多鱼', num: '2,998', flag: true },
]
},
{
city: '江苏',
sales: '23,252',
flag: false,
brands: [
{ name: '可爱多', num: '2,156', flag: false },
{ name: '娃哈哈', num: '2,456', flag: true },
{ name: '喜之郎', num: '9,737', flag: true },
{ name: '八喜', num: '2,080', flag: true },
{ name: '小洋人', num: '8,724', flag: true },
{ name: '好多鱼', num: '1,770', flag: false },
]
},
{
city: '山东',
sales: '20,760',
flag: true,
brands: [
{ name: '可爱多', num: '9,567', flag: true },
{ name: '娃哈哈', num: '2,345', flag: false },
{ name: '喜之郎', num: '9,037', flag: false },
{ name: '八喜', num: '1,080', flag: true },
{ name: '小洋人', num: '4,724', flag: false },
{ name: '好多鱼', num: '9,999', flag: true },
]
}
]
第二步:根据数据渲染各省热销 sup 模块内容
- 删掉原先自带小li
- 遍历数据 $.each()
- 拼接字符串把数据渲染到 li 的span 里面
- 追加给 .sup 盒子
var supHTML = "";
$.each(hotData, function(index, item) {
// console.log(item);
supHTML += `<li><span>${item.city}</span><span> ${item.sales} <s class=
${item.flag ? "icon-up" : "icon-down"}></s></span></li>`;
// 三元表达式 item.flag
});
// 数据渲染
$(".sup").html(supHTML);
第三步:当数据进入 tab 的时候
- 激活当前的tab样式,删除其他tab的样式
- 渲染各省热销 sub 模块
- 注意鼠标进入tab, 只遍历 当前索引号对应的 城市对象里面的 brands
- 拼接html格式字符串,进行渲染
// 3.鼠标进入激活样式
// 事件委托 动态生成的未来的元素 使用普通的也可以
$(".province .sup").on("mouseenter", "li", function () {
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
var obj = hotData[index]; // 当前对应的城市
var brands = obj.brands; // 找到的就是鼠标移入的城市对应的品牌种类
// console.log(obj);
// console.log(brands);
// 开始遍历数组
var subHTML = "";
$.each(brands, function (index, item) {
console.log(item);
subHTML += `<li><span>${item.name}</span><span>${item.num}<s class="${item.flag ? "icon-up" : "icon-down"}"></s></span></li>`;
// 把生成的6个小li 字符串给 subdom 盒子
$(".sub").html(subHTML);
});
});
第四步:默认激活第一个tab
// 所有的LI
var lis = $(".province .sup li");
// 第一个默认激活
lis.eq(0).mouseenter();
第五步:开启定时切换
// 开启定时切换;
var index = 0;
var timer = setInterval(function () {
index++;
if (index >= 5) index = 0;
lis.eq(index).mouseenter();
}, 2000);
$(".province .sup").houver(
function () {
// 鼠标经过
clearInterval(timer);
},
function () {
// 鼠标离开
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= 5) index = 0;
lis.eq(index).mouseenter();
}, 2000);
}
);
封装 render 渲染函数
// 这个函数需要传递当前元素进去
function render(currentEle) {
currentEle
.addClass("active")
.siblings()
.removeClass();
// 拿到当前城市的品牌对象
// console.log($(this).index());
// 可以通过hotData[$(this).index()] 得到当前的城市
// console.log(hotData[$(this).index()]);
// 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类
// console.log(hotData[$(this).index()].brands);
// 开始遍历品牌数组
var subHTML = "";
$.each(hotData[currentEle.index()].brands, function(index, item) {
// 是对应城市的每一个品牌对象
// console.log(item);
subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class=
${item.flag ? "icon-up" : "icon-down"}
></s></span></li>`;
});
// 把生成的6个小li字符串给 sub dom盒子
$(".sub").html(subHTML);
}
定时器调用函数
// 开启定时切换;
var index = 0;
var timer = setInterval(function () {
index++;
if (index >= 5) index = 0;
// lis.eq(index).mouseenter();
render(lis.eq(index));
}, 2000);
$(".province .sup").hover(
function () {
// 鼠标经过
clearInterval(timer);
},
function () {
// 鼠标离开
clearInterval(timer);
timer = setInterval(function () {
index++;
if (index >= 5) index = 0;
// lis.eq(index).mouseenter();
render(lis.eq(index));
}, 2000);
}
);
鼠标移入调用
// 3.鼠标进入激活样式
// 事件委托 动态生成的未来的元素 使用普通的也可以
$(".province .sup").on("mouseenter", "li", function () {
$(this).addClass("active").siblings().removeClass("active");
index = $(this).index();
render($(this));
}
23-Echarts-社区介绍
24-Echarts-map使用(扩展)
参考社区的例子:https://www.makeapie.com/editor.html?c=xD4a1EBnvW (模拟飞机航线)
实现步骤:
- 第一需要下载china.js提供中国地图的js文件
- 第二个因为里面代码比较多,我们新建一个新的js文件 myMap.js 引入
- 使用社区提供的配置即可。
需要修改:
- 去掉图例组件和标题组件
- 去掉背景颜色
- 修改地图省份背景 #142957
- 地图放大通过 zoom 设置为1.2即可
geo: {
map: 'china',
zoom: 1.2,
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
},
emphasis: {
areaColor: '#0b1c2d'
}
}
},
总结:这例子是扩展案例,大家以后可以多看看社区里面的案例。
25-总结
总结:实现一个需求,需要去推导,具备推导的能力需要练习,时间问题。
重点模块
监控模块 , 销售模块 , 排行模块
