该博客围绕Echarts展开，介绍了饼形图、柱状图等图表的样式修饰与配置修改，如修改柱子颜色、调整坐标轴等。还涉及地图区域、用户统计等模块的HTML和CSS布局，以及热销排行的实现思路和数据渲染。此外，介绍了Echarts社区和map使用方法，提及前端发展趋势。
// 修饰饼形图文字相关的样式 label对象
label: {
fontSize: 10
},
// 修饰引导线样式
labelLine: {
// 连接到图形的线长度
length: 6,
// 连接到文字的线长度
length2: 8
}
}
]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候，图表也等比例缩放
window.addEventListener(“resize”, function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
})();
=====================================================================================
代码示例：
设备数据统计
代码示例：
/* 地图 */
.map {
height: 7.225rem;
margin-bottom: 0.25rem;
display: flex;
flex-direction: column;
}
.map h3 {
line-height: 1;
padding: 0.2rem 0;
margin: 0;
font-size: 0.25rem;
color: #fff;
font-weight: 400;
}
.map .icon-cube {
color: #68d8fe;
}
.map .chart {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
width: 100%;
height: 100%;
}
注意第二列（column) 有个外边距（上面 32px 左右 20px 下是 0）
.viewport .column:nth-child(2) {
flex: 4;
margin: .4rem .25rem 0;
}
📣注意：小伙伴们时间充裕的话一定要手动敲出html和css样式哦！❗❗❗
=====================================================================================
全国用户总量统计
120,899
用户总量
248
本月新增
/* 用户模块 */
.users {
height: 4.25rem;
display: flex;
}
.users .chart {
display: flex;
margin-top: .3rem;
}
.users .bar {
width: 7.35rem;
height: 3rem;
}
.users .data {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 2.1rem;
padding: .45rem .375rem;
box-sizing: border-box;
background-image: url(…/images/rect.png);
background-size: cover;
}
.users h4 {
margin-bottom: .15rem;
font-size: .35rem;
color: #fff;
}
.users span {
display: block;
color: #4c9bfd;
font-size: 0.2rem;
}
📣注意：小伙伴们时间充裕的话一定要手动敲出html和css样式哦！❗❗❗
======================================================================================
-
从官方示例中找到最接近项目需求的例子，适当修改, 引入到HTML页面中
-
按照产品需求，来定制图表。
🏅 17.1.1 参考官方案例 + 分析
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(“.bar”));
// 2. 指定配置和数据
var option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: ‘axis’,
// 轴触发提示才有效
axisPointer: {
// 默认为直线，可选为：‘line’ 线效果 | ‘shadow’ 阴影效果
type: ‘shadow’
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
// 是否包含文本
containLabel: true
},
// 控制x轴
xAxis: [
{
// 使用类目，必须有data属性
type: ‘category’,
// 使用 data 中的数据设为刻度文字
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],
// 刻度设置
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: true
}
}
],
// 控制y轴
yAxis: [
{
// 使用数据的值设为刻度文字
type: ‘value’
}
],
// 控制x轴
series: [
{
// 图表数据名称
name: ‘用户统计’,
// 图表类型
type: ‘bar’,
// 柱子宽度
barWidth: ‘60%’,
// 数据
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
// 3. 把配置给实例对象
myChart.setOption(option);
})();
🏅 17.1.2 按照需求修改
- 需求1： 修改柱子的颜色
// 修改线性渐变色方式 1
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (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’,
// axisPointer: { // 坐标轴指示器，坐标轴触发有效 这个模块我们此时不需要删掉即可
// type: ‘shadow’ // 默认为直线，可选为：‘line’ | ‘shadow’
// }
},
-
需求3： 修改柱形图表大小， 以及相关网格。
-
饼形图修改图表大小是通过 series 对象里面的 radius
-
柱形图修改图标大小是通过 series 对象里面的 grid 对象 left right 等
-
显示网格 show: true，网格颜色是 borderColor
// 直角坐标系内绘图网格（区域）
grid: {
top: ‘3%’,
right: ‘3%’,
bottom: ‘3%’,
left: ‘0%’,
// 图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
containLabel: true,
// 是否显示直角坐标系网格
show: true,
//grid 四条边框的颜色
borderColor: ‘rgba(0, 240, 255, 0.3)’
},
-
需求4： X 轴调整
-
柱子在刻度之间
-
剔除刻度不显示
-
刻度标签文字颜色 #4c9bfd 通过 axisLabel 对象设置
-
修改x轴线的颜色 axisLine 里面的 lineStyle
// 控制x轴
xAxis: [
{
// 使用类目，必须有data属性
type: ‘category’,
// 使用 data 中的数据设为刻度文字
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],
// 刻度设置
axisTick: {
// true意思：图形和刻度居中中间
// false意思：图形在刻度之间
alignWithLabel: false,
// 不显示刻度
show: false
},
// x坐标轴文字标签样式设置
axisLabel: {
color: ‘#4c9bfd’
},
// 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 对象设置
// 控制y轴
yAxis: [
{
// 使用类目，必须有data属性
type: ‘category’,
// 使用 data 中的数据设为刻度文字
data: [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’],
// 刻度设置
axisTick: {
// 不显示刻度
show: false
},
// y坐标轴文字标签样式设置
axisLabel: {
color: ‘#4c9bfd’
},
// y坐标轴颜色设置
axisLine:{
lineStyle:{
color:‘rgba(0, 240, 255, 0.3)’,
// width:8, x轴线的粗细
// opcity: 0, 如果不想显示x轴线 则改为 0
}
},
// y轴 分割线的样式
splitLine: {
lineStyle: {
color: ‘rgba(0, 240, 255, 0.3)’
}
}
],
- 需求6：调整数据，与省略图形定制
// series
data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240]
// xAxis
data: [‘上海’, ‘广州’, ‘北京’, ‘深圳’, ‘合肥’, ‘’, ‘…’, ‘’, ‘杭州’, ‘厦门’, ‘济南’, ‘成都’, ‘重庆’]
-
省略图形
-
经过图形才显示提示，且省略的柱子不需要提示
-
图形单独设置颜色
// 中间省略的数据 准备三项
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();
});
📣注意：监听windows窗口变化的事件resize和调用resize() 方法实现图标根据浏览器等比例缩放效果很重要哦，请牢记；❗❗❗
===================================================================================
代码示例：
90天
30天
24小时
20,301,987
订单量
99834
销售额(万元)
代码示例：
/* 订单 */
.order {
height: 1.875rem;
}
.order .filter {
display: flex;
}
.order .filter a {
display: block;
height: 0.225rem;
line-height: 1;
padding: 0 0.225rem;
color: #1950c4;
font-size: 0.225rem;
border-right: 0.025rem solid #00f2f1;
}
.order .filter a:first-child {
padding-left: 0;
}
.order .filter a:last-child {
border-right: none;
}
.order .filter a.active {
color: #fff;
font-size: 0.25rem;
}
.order .data {
display: flex;
margin-top: 0.25rem;
}
.order .item {
width: 50%;
}
.order h4 {
font-size: 0.35rem;
color: #fff;
margin-bottom: 0.125rem;
}
.order span {
display: block;
color: #4c9bfd;
font-size: 0.2rem;
}
📣注意：小伙伴们时间充裕的话一定要手动敲出html和css样式哦！
===================================================================================
代码示例：
// 订单功能
(function(){
// 1. 准备数据
var data = {
day365: { orders: ‘20,301,987’, amount: ‘99834’ },
day90: { orders: ‘301,987’, amount: ‘9834’ },
day30: { orders: ‘1,987’, amount: ‘3834’ },
day1: { orders: ‘987’, amount: ‘834’ }
}
// 获取显示 订单数量 容器
var $h4Orders = $(‘.order h4:eq(0)’)
// 获取显示 金额数量 容器
var $h4Amount = $(‘.order h4:eq(1)’)
$(‘.order’).on(‘click’,‘.filter a’,function(){
// 2. 点击切换激活样式
$(this).addClass(‘active’).siblings().removeClass(‘active’)
// 3. 点击切换数据
var currdata = data[this.dataset.key]
$h4Orders.html(currdata.orders)
$h4Amount.html(currdata.amount)
})
// 4. 开启定时器切换数据
var index = 0
var $allTab = $(‘.order .filter a’)
setInterval(function(){
index ++
if (index >= 4) index = 0
$allTab.eq(index).click()
},5000)
})();
=====================================================================================
代码示例：
销售额统计
季
月
周
代码示例：
/* 销售区域 */
.sales {
height: 3.1rem;
}
.sales .caption {
display: flex;
line-height: 1;
}
.sales h3 {
height: 0.225rem;
padding-right: 0.225rem;
border-right: 0.025rem solid #00f2f1;
}
.sales a {
padding: 0.05rem;
font-size: 0.2rem;
margin: -0.0375rem 0 0 0.2625rem;
border-radius: 0.0375rem;
color: #0bace6;
}
.sales a.active {
background-color: #4c9bfd;
color: #fff;
}
.sales .inner {
display: flex;
flex-direction: column;
}
.sales .chart {
flex: 1;
padding-top: 0.1875rem;
position: relative;
}
.sales .label {
position: absolute;
left: 0.525rem;
top: 0.225rem;
color: #4996f5;
font-size: 0.175rem;
}
.sales .line {
width: 100%;
height: 100%;
}
📣注意：小伙伴们时间充裕的话一定要手动敲出html和css样式哦！
=======================================================================================
实现步骤：
-
寻找官方的类似示例，给予分析, 引入到HTML页面中
-
按照需求来定制它。
代码示例：
// 销售统计模块
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(“.line”));
// 2. 指定配置和数据
var option = {
tooltip: {
trigger: “axis”
},
legend: {
data: [“邮件营销”, “联盟广告”]
},
grid: {
left: “3%”,
right: “4%”,
bottom: “3%”,
containLabel: true
},
xAxis: {
type: “category”,
boundaryGap: false,
data: [“周一”, “周二”]
},
yAxis: {
type: “value”
},
series: [
{
name: “邮件营销”,
type: “line”,
stack: “总量”,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: “联盟广告”,
type: “line”,
stack: “总量”,
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
// 3. 把配置和数据给实例对象
myChart.setOption(option);
})();
根据需求定制图表，需求如下：
- 需求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
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
}
}]
📣注意：现在给的是年份数据，还需要切换效果，切换效果请阅读二十二章。
========================================================================================
实现步骤：
-
- 准备切换需要依赖的数据 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: [{
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)
})
-
开启定时器每隔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();
});
==================================================================================
代码示例：
渠道分布
一季度销售进度
1,321
销售额(万元)
150%
同比增长
代码示例：
/* 渠道区块 */
.wrap {
display: flex;
}
.channel,
.quarter {
flex: 1;
height: 2.9rem;
}
.channel {
margin-right: 0.25rem;
}
.channel .data {
overflow: hidden;
}
.channel .data .radar {
height: 2.1rem;
width: 100%;
background-color: pink;
}
.channel h4 {
color: #fff;
font-size: 0.4rem;
margin-bottom: 0.0625rem;
}
.channel small {
font-size: 50%;
}
.channel span {
display: block;
color: #4c9bfd;
font-size: 0.175rem;
}
/* 季度区块 */
.quarter .inner {
display: flex;
flex-direction: column;
margin: 0 -0.075rem;
}
.quarter .chart {
flex: 1;
padding-top: 0.225rem;
}
.quarter .box {
position: relative;
}
.quarter .label {
transform: translate(-50%, -30%);
color: #fff;
font-size: 0.375rem;
position: absolute;
left: 50%;
top: 50%;
}
.quarter .label small {
font-size: 50%;
}
.quarter .gauge {
height: 1.05rem;
}
.quarter .data {
display: flex;
justify-content: space-between;
}
.quarter .item {
width: 50%;
}
.quarter h4 {
color: #fff;
font-size: 0.3rem;
margin-bottom: 0.125rem;
}
.quarter span {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #4c9bfd;
font-size: 0.175rem;
}
📣注意：小伙伴们时间充裕的话一定要手动敲出html和css样式哦！
=======================================================================================
实现步骤：
-
寻找官方的类似示例，给予分析，并引入到HTML页面中
-
按照需求来定制它
代码示例：
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(“.radar”));
// 2.指定配置
var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
var lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
var option = {
backgroundColor: “#161627”,
radar: {
indicator: [
{ name: “AQI”, max: 300 },
{ name: “PM2.5”, max: 250 },
{ name: “PM10”, max: 300 },
{ name: “CO”, max: 5 },
{ name: “NO2”, max: 200 },
{ name: “SO2”, max: 100 }
],
shape: “circle”,
splitNumber: 5,
name: {
textStyle: {
color: “rgb(238, 197, 102)”
}
},
splitLine: {
lineStyle: {
color: [
“rgba(238, 197, 102, 0.1)”,
“rgba(238, 197, 102, 0.2)”,
“rgba(238, 197, 102, 0.4)”,
“rgba(238, 197, 102, 0.6)”,
“rgba(238, 197, 102, 0.8)”,
“rgba(238, 197, 102, 1)”
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: “rgba(238, 197, 102, 0.5)”
}
}
},
series: [
{
name: “北京”,
type: “radar”,
lineStyle: lineStyle,
data: dataBJ,
symbol: “none”,
itemStyle: {
color: “#F9713C”
},
areaStyle: {
opacity: 0.1
}
}
]
};
// 3.把配置和数据给对象
myChart.setOption(option);
})();
按照需求来定制它：
- 需求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();
});
})();
📣注意：小伙伴们一定不要忘记写立即执行函数，避免多个函数里变量的冲突！，而且立即执行函数和立即执行函数之间一定要加分号哦❗❗❗
=========================================================================================
实现步骤：
-
寻找官方的类似示例，给予分析,引入到HTML页面中
-
按照需求来定制它。
代码示例：
// 销售模块 饼形图 半圆形 设置方式
(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%’],
// 移动下位置 套住50%文字
center: [‘48%’, ‘80%’],
label: {
normal: {
show: false
}
},
// 起始角度，支持范围[0, 360]
startAngle: 180,
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
📣注意：小伙伴们一定不要忘记写立即执行函数，避免多个函数里变量的冲突！，而且立即执行函数和立即执行函数之间一定要加分号哦❗❗❗
==================================================================================
代码示例：
全国热榜
可爱多
娃哈啥
喜之郎
各省热销 // 近30日 //
北京
25,179
河北
23,252
上海
20,760
江苏
23,252
山东
20,760
代码示例：
/* 排行榜 */
.top {
height: 3.5rem;
}
.top .inner {
display: flex;
}
.top .all {
display: flex;
flex-direction: column;
width: 2.1rem;
color: #4c9bfd;
font-size: 0.175rem;
vertical-align: middle;
}
.top .all ul {
padding-left: 0.15rem;
margin-top: 0.15rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.top .all li {
overflow: hidden;
}
.top .all [class^=“icon-”] {
font-size: 0.45rem;
vertical-align: middle;
margin-right: 0.15rem;
}
.top .province {
flex: 1;
display: flex;
flex-direction: column;
color: #fff;
}
.top .province i {
padding: 0 0.15rem;
margin-top: 0.0625rem;
float: right;
font-style: normal;
font-size: 0.175rem;
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.175rem;
}
.top .province ul {
flex: 1;
line-height: 1;
margin-bottom: 0.175rem;
}
.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.175rem;
}
.top .province ul.sup li {
color: #4995f4;
padding: 0.15rem;
}
.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.15rem;
background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {
color: #52ffff;
padding: 0.125rem 0.175rem;
}
.clock {
position: absolute;
top: -0.45rem;
right: 0.5rem;
font-size: 0.25rem;
color: #0bace6;
}
.clock i {
margin-right: 5px;
font-size: 0.25rem;
}
@media screen and (max-width: 1600px) {
.top span {
transform: scale(0.9);
}
.top .province ul.sup li {
padding: 0.125rem 0.15rem;
}
.top .province ul.sub li {
padding: 0.0625rem 0.15rem;
}
.quarter span {
transform: scale(0.9);
}
}
==================================================================================
实现思路：
-
准备后台返回的真实数据
-
利用数据渲染各省热销模块 sup 模块 (拼接html格式字符串，进行渲染)
-
当鼠标进入 tab 的时候
-
激活当前的tab样式，删除其他tab的样式
-
渲染各省热销 sub 模块 (拼接html格式字符串，进行渲染)
-
默认激活第一个tab的效果
-
开启定时器，按依次切换
预备知识：
- 扩展知识：ES6模版字符
代码示例：
// 模版字符
var star = {
name: “刘德华”,
age: 18
};
// 以前的写法 拼接的时候引号很容易出问题
console.log(“我的名字是” + star.name + “我的年龄是” + star.age);
// ES6 模板字符写法
console.log(
我的名字是${star.name}我的年龄是${star.age});console.log(
<span>${star.name}</span><span>${star.age}</span>);
第一步：得到后台数据（实际开发中，这个数据通过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 += `
-
- ${item.city} ${item.sales} <s class=
-
${item.flag ? “icon-up” : “icon-down”}>`;
});
$(“.sup”).html(supHTML);
第三步：当数据进入 tab 的时候
-
激活当前的tab样式，删除其他tab的样式
-
渲染各省热销 sub 模块
-
注意鼠标进入tab， 只遍历 当前索引号对应的 城市对象里面的 brands
-
拼接html格式字符串，进行渲染；
-
激活当前的tab样式，删除其他tab的样式；
-
渲染各省热销 sub 模块
-
注意鼠标进入tab， 只遍历 当前索引号对应的 城市对象里面的 ；brands
-
拼接html格式字符串，进行渲染；
// 所有的LI
var $lis = $(‘.province .sup li’)
// 第一个默认激活
$lis.eq(0).mouseenter()
定时器里面 mouseenter 冲突问题的解决方案；
定时器里面不加mousenter 事件，而是直接重新渲染数据就可以(执行鼠标经过事件里面的代码)
最好把渲染的代码封装到函数里面
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);
}
);
==================================================================================
社区就是一些，活跃的echart使用者，交流和贡献定制好的图表的地方。
在这里可以找到一些基于echart的高度定制好的图表，相当于基于jquery开发的插件，这里是基于echarts开发的第三方的图表。
=======================================================================================
参考社区的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模拟飞机航线)
实现步骤：
-
第一需要下载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’
}
}
},
紧跟潮流
大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。
这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
扫一扫
7429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
