20、销售统计-布局
html结构：
<!-- 销售额 --><div class="sales panel"><div class="inner"><div class="caption"><h3>销售额统计</h3><a href="javascript:;" class="active" data-type="year">年</a><a href="javascript:;" data-type="quarter">季</a><a href="javascript:;" data-type="month">月</a><a href="javascript:;" data-type="week">周</a></div><div class="chart"><div class="label">单位:万</div><div class="line"></div></div></div></div>
css样式：
/* 销售区域 */
.sales {height: 10.333rem;
}
.sales .caption {display: flex;line-height: 1;
}
.sales h3 {height: 0.75rem;padding-right: 0.75rem;border-right: 0.083rem solid #00f2f1;
}
.sales a {padding: 0.167rem;font-size: 0.667rem;margin: -0.125rem 0 0 0.875rem;border-radius: 0.125rem;color: #0bace6;
}
.sales a.active {background-color: #4c9bfd;color: #fff;
}
.sales .inner {display: flex;flex-direction: column;
}
.sales .chart {flex: 1;padding-top: 0.6rem;position: relative;
}
.sales .label {position: absolute;left: 1.75rem;top: 0.75rem;color: #4996f5;font-size: 0.583rem;
}
.sales .line {width: 100%;height: 100%;
}21、销售统计-线形图
实现步骤：
- 寻找官方的类似示例，给予分析。
- 在项目中使用起来。
- 按照需求来定制它。
**第一步：**寻找官方的类似示例，给予分析。
官方参考示例：https://www.echartsjs.com/examples/zh/editor.html?c=line-smooth
var option = {xAxis: {// 类目类型 type: 'category',// x轴刻度文字 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {// 数据作为刻度文字 type: 'value'},series: [{// 数据 data: [820, 932, 901, 934, 1290, 1330, 1320],// 图表类型 type: 'line',// 圆滑连接 smooth: true}]
};
**第二步：**在项目中使用起来。
(function () {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',smooth: true}]};var myChart = echarts.init($('.line')[0])myChart.setOption(option)
})();
**第三步：**按照需求来定制它。
定制需求：
- 设置自己的图表大小，显示边框设置颜色：#012f4a，包含刻度文字在内。
// 设置网格样式grid: {show: true,// 显示边框top: '20%',left: '3%',right: '4%',bottom: '3%',borderColor: '#012f4a',// 边框颜色containLabel: true // 包含刻度文字在内},
- x轴的刻度去除，字体颜色：#4c9bfd，剔除坐标轴线（将来使用Y轴分割线）, 轴两端是不需要内间距。
xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisTick: {
+ show: false // 去除刻度线
+ },
+ axisLabel: {
+ color: '#4c9bfd' // 文本颜色
+ },
+ axisLine: {
+ show: false // 去除轴线
+ },
+ boundaryGap: false // 去除轴内间距},
- y轴的刻度去除，字体颜色：#4c9bfd，分割线颜色：#012f4a
yAxis: {type: 'value',
+ axisTick: {
+ show: false // 去除刻度
+ },
+ axisLabel: {
+ color: '#4c9bfd' // 文字颜色
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#012f4a' // 分割线颜色
+ }
+ }},
- 显示图例组件（对图表的说明）, series数据必须有名称。
// 图例组件legend: {textStyle: {color: '#4c9bfd' // 图例文字颜色// fontSize},right: '10%' // 距离右边10%},
series: [{
+ name:'预期销售额',
- 鼠标经过需要工具提示
// 工具提示tooltip:{trigger: 'axis'},
- 两条线形图颜色分别：#00f2f1 #ed3f35
series: [{name:'预期销售额',data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true,itemStyle: {color: '#00f2f1' // 线颜色}},{name:'实际销售额',data: [100, 331, 200, 123, 233, 543, 400],type: 'line',smooth: true,itemStyle: {color: '#ed3f35' // 线颜色}}]
- 套入数据
// x轴的文字
xAxis: {type: 'category',
- data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
// 图标数据series: [{name:'预期销售额',
- data: [820, 932, 901, 934, 1290, 1330, 1320],
+ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]type: 'line',smooth: true,itemStyle: {color: '#00f2f1' // 线颜色}},{name:'实际销售额',
- data: [100, 331, 200, 123, 233, 543, 400],
+ [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]type: 'line',smooth: true,itemStyle: {color: '#ed3f35' // 线颜色}}]
总结：现在给的是年份数据，还需要切换效果。
22 、销售统计-切换效果
实现步骤：
- 准备切换需要依赖的数据
- 绑定点击事件
- 切换激活 tab 的样式
- 切换图表依赖的数据
- 开启定时器，进行切换。
第一步：准备数据，使用数据
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: [{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中的属性 var currData = data[this.dataset.type]// 修改图表1的数据option.series[0].data = currData[0]// 修改图表2的数据 option.series[1].data = currData[1]// 重新设置数据 让图标重新渲染 myChart.setOption(option)})
第三步：自动切换
// tab索引var index = 0;// 所有tabvar allTab = $('.sales .caption a')setInterval(function () {index++// 大于等于4索引切换到0索引if (index >= 4) index = 0// 选中对应tab触发点击allTab.eq(index).click()}, 1000)
23、渠道区域&销售进度-布局
html结构：
<!-- 渠道 季度 --><div class="wrap"><div class="channel panel"><div class="inner"><h3>渠道分布</h3><div class="data"><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>28 <small>%</small></h4><span><i class="icon-bag"></i>商场</span></div></div><div class="data"><div class="item"><h4>20 <small>%</small></h4><span><i class="icon-train"></i>地铁</span></div><div class="item"><h4>13 <small>%</small></h4><span><i class="icon-bus"></i>火车站</span></div></div></div></div><div class="quarter panel"><div class="inner"><h3>一季度销售进度</h3><div class="chart"><div class="box"><div class="gauge"></div><div class="label">75<small> %</small></div></div><div class="data"><div class="item"><h4>1,321</h4><span><i class="icon-dot" style="color: #6acca3"></i>销售额(万元)</span></div><div class="item"><h4>150%</h4><span><i class="icon-dot" style="color: #ed3f35"></i>同比增长</span></div></div></div></div></div></div>
css样式：
/* 渠道区块 */
.wrap {display: flex;
}
.channel,
.quarter {flex: 1;height: 9.667rem;
}
.channel {margin-right: 0.833rem;
}
.channel .data {overflow: hidden;
}
.channel .item {margin-top: 0.85rem;
}
.channel .item:first-child {float: left;
}
.channel .item:last-child {float: right;
}
.channel h4 {color: #fff;font-size: 1.333rem;margin-bottom: 0.2rem;
}
.channel small {font-size: 50%;
}
.channel span {display: block;color: #4c9bfd;font-size: 0.583rem;
}
/* 季度区块 */
.quarter .inner {display: flex;flex-direction: column;margin: 0 -0.25rem;
}
.quarter .chart {flex: 1;padding-top: 0.75rem;
}
.quarter .box {position: relative;
}
.quarter .label {transform: translate(-50%, -30%);color: #fff;font-size: 1.25rem;position: absolute;left: 50%;top: 50%;
}
.quarter .label small {font-size: 50%;
}
.quarter .gauge {height: 3.5rem;
}
.quarter .data {display: flex;justify-content: space-between;
}
.quarter .item {width: 50%;
}
.quarter h4 {color: #fff;font-size: 1rem;margin-bottom: 0.4rem;
}
.quarter span {display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #4c9bfd;font-size: 0.583rem;
}
24、销售进度-饼状图
实现步骤：
- 寻找官方的类似示例，给予分析。
- 在项目中使用起来。
- 按照需求来定制它。
第一步：参考官方示例：https://www.echartsjs.com/examples/zh/editor.html?c=pie-doughnut
var option = {series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],label: {show: false,},data:[{value:100, name:'直接访问'},{value:100, name:'邮件营销'},{value:200, name:'联盟广告'}]}]
};
第二步：使用起来
// 销量进度-饼状图
(function () {var option = {series: [{type: 'pie',radius: ['50%', '70%'],label: {show: false,},data: [{ value: 100, name: '直接访问' },{ value: 100, name: '邮件营销' },{ value: 200, name: '联盟广告' }]}]}var myChart = echarts.init($('.gauge')[0])myChart.setOption(option)
})();
第三步：进行定制
需求：改成半圆，大一些，让75%文字在中心。
var option = {series: [{type: 'pie',
- radius: ['50%', '70%'],
+ radius: ['130%', '150%'], // 放大图形
+ center: ['48%', '80%'], // 往下移动 套住75%文字label: {show: false,},startAngle: 180,data: [
- { value: 100, name: '直接访问' },
- { value: 100, name: '邮件营销' },
- { value: 200, name: '联盟广告' }
+ { value: 100 }, // 不需要名称
+ { value: 100,}, // 不需要名称
+ { value: 200, itemStyle: { color: 'transparent' } } // 透明隐藏第三块区域]}]}
需求：鼠标经过无需变大，第一段颜色渐变#00c9e0->#005fc1，第二段颜色#12274d。
+ hoverOffset: 0, // 鼠标经过不变大data: [{value: 100,
+ itemStyle: { // 颜色渐变#00c9e0->#005fc1
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ { offset: 0, color: '#00c9e0' },
+ { offset: 1, color: '#005fc1' }
+ ]
+ }
+ }
+ },
+ { value: 100, itemStyle: { color: '#12274d' } }, // 颜色#12274d
总结：实现一个需求，需要去推导，具备推导的能力需要练习，时间问题。
25、热销排行-布局
html结构：
<!-- 排行榜 --><div class="top panel"><div class="inner"><div class="all"><h3>全国热榜</h3><ul><li><i class="icon-cup1" style="color: #d93f36;"></i>可爱多</li><li><i class="icon-cup2" style="color: #68d8fe;"></i>娃哈啥</li><li><i class="icon-cup3" style="color: #4c9bfd;"></i>喜之郎</li></ul></div><div class="province"><h3>各省热销 <i class="date">// 近30日 //</i></h3><div class="data"><ul class="sup"><li><span>北京</span><span>25,179 <s class="icon-up"></s></span></li><li><span>河北</span><span>23,252 <s class="icon-down"></s></span></li><li><span>上海</span><span>20,760 <s class="icon-up"></s></span></li><li><span>江苏</span><span>23,252 <s class="icon-down"></s></span></li><li><span>山东</span><span>20,760 <s class="icon-up"></s></span></li></ul><ul class="sub"><!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> --></ul></div></div></div></div>
css样式：
/* 排行榜 */
.top {height: 11.8rem;
}
.top .inner {display: flex;
}
.top .all {display: flex;flex-direction: column;width: 7rem;color: #4c9bfd;font-size: 0.6rem;vertical-align: middle;
}
.top .all ul {padding-left: 0.5rem;margin-top: 0.5rem;flex: 1;display: flex;flex-direction: column;justify-content: space-around;
}
.top .all li {overflow: hidden;
}
.top .all [class^="icon-"] {font-size: 1.5rem;vertical-align: middle;margin-right: 0.5rem;
}
.top .province {flex: 1;display: flex;flex-direction: column;color: #fff;
}
.top .province i {padding: 0 0.5rem;margin-top: 0.208rem;float: right;font-style: normal;font-size: 0.583rem;color: #0bace6;
}
.top .province s {display: inline-block;transform: scale(0.8);text-decoration: none;
}
.top .province .icon-up {color: #dc3c33;
}
.top .province .icon-down {color: #36be90;
}
.top .province .data {flex: 1;display: flex;margin-top: 0.6rem;
}
.top .province ul {flex: 1;line-height: 1;margin-bottom: 0.25rem;
}
.top .province ul li {display: flex;justify-content: space-between;
}
.top .province ul span {display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.top .province ul.sup {font-size: 0.583rem;
}
.top .province ul.sup li {color: #4995f4;padding: 0.5rem;
}
.top .province ul.sup li.active {color: #a3c6f2;background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub {display: flex;flex-direction: column;justify-content: space-around;font-size: 0.5rem;background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {color: #52ffff;padding: 0.417rem 0.6rem;
}
.clock {position: absolute;top: -1.5rem;right: 1.667rem;font-size: 0.833rem;color: #0bace6;
}
.clock i {margin-right: 5px;font-size: 0.833rem;
}
@media screen and (max-width: 1600px) {.top span {transform: scale(0.9);}.top .province ul.sup li {padding: 0.4rem 0.5rem;}.top .province ul.sub li {padding: 0.23rem 0.5rem;}.quarter span {transform: scale(0.9);}
}
26、热销排行-效果
实现思路：
- 准备假数据，只有一组
- 当数据进入 tab 的时候
- 激活当前的tab样式，删除其他tab的样式
- 随机打乱事先准备好的一组数据
- 根据新数据拼接html格式字符串，进行渲染
- 默认激活第一个tab的效果
- 开启定时器，按顺便切换
预备知识：
- 扩展知识1：排序sort函数
- 扩展知识2：ES6模版字符
// 数据
var data = [1,5,12,10]
// 从小到大排序
data.sort(function(a,b){return a-b})
// 从大到小排序
data.sort(function(a,b){return b-a})
// 每次取出两个值进行比较 a 是第二个 b 是第一个
// 如果回调函数返回值 大于0 a排b后
// 如果回调函数返回值 等于0 不排
// 如果回调函数返回值 小于0 b排a后
// 随机排序
data.sort(function(a,b){return 0.5-Math.random()})
// 模版字符
var data = {name:'tom'}
var str = `你的名字是：${data.name}`
// 用户拼接字符串，可以换行，在拼接html的时候常用。
开始实现：
第一步：模拟数据
var data = [{ name: '可爱多', num: '9,086' },{ name: '娃哈哈', num: '8,341' },{ name: '喜之郎', num: '7,407' },{ name: '八喜', num: '6,080' },{ name: '小洋人', num: '6,724' },{ name: '好多鱼', num: '2,170' },]
第二步：绑定鼠标经过事件，激活样式，根据随机数据渲染内容。
$('.province').on('mouseenter','.sup li',function(){// 样式$(this).addClass('active').siblings().removeClass('active')// 打乱数据var randomData = data.sort(function(a,b){return 0.5 - Math.random()})// 拼接字符串var html = ''randomData.forEach(function(item){html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`})// 渲染$('.sub').html(html)})
第三步：默认激活第一个tab
// 所有的LIvar $lis = $('.province .sup li')// 第一个默认激活$lis.eq(0).mouseenter()
第四步：开启定时切换
// 开启定时器 切换var index = 0setInterval(function () {index++// 大于等于5索引切换到0索引if (index >= 5) index = 0// 选中对应tab触发点击$lis.eq(index).mouseenter()}, 1000)
27、Echarts-社区介绍
社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。
- 在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。
28、Echarts-map使用（扩展）
参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x2Ei_JbHZb
实现步骤：
- 第一需要下载china.js提供中国地图的js文件
- 导入后，使用社区提供的配置即可。
(function () {// 使用配置即可...var myecharts = echarts.init($('.map .geo')[0])myecharts.setOption(option)
})()
需要修改：
geo: {map: 'china',
+ zoom: 1.2,label: {emphasis: {show: false}},roam: false,itemStyle: {normal: {
+ areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},
总结：这例子是扩展案例，大家以后可以多看看社区里面的案例。
常量与变量)
数据类型)
元组与可选类型)
基本运算符 o_O！???)
 字符串和字符)
