Echarts的出现是由于市场上的需求,应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。
Echarts的可视化效果就是引入了各类图表的绘制,以及高级的地图数据可视化案例。主要功能有:饼状图、柱状图、线形图、地图 …所以这一章节主要是从实际开发过的项目来进行学习。
先来展示一下对于这个知识的**“立可得”智能看板应用案例**:
其实这个案例的制作整体不是太难,主要是让我们掌握如何应用Echarts来将数据可视化。
这个案例里面引入了5中图表和1张地图的,我就从这些图表的基础配置来介绍Echarts的应用方法
Echarts使用步骤
===========
-
下载echarts GitHub - apache/echarts at 4.5.0
-
引入echarts “
dist/echarts.min.js”
-
准备一个具备大小的DOM容器(盒子)来存放图表
-
初始化echarts实例对象
- 指定配置项和数据(option)
var myChart = echarts.init(document.getElementById(‘box’));
- 将配置项设置给echarts实例对象
myChart.setOption(option);
- 如果想让图表能跟着页面的大小而改变自适应可以写:
window.addEventListener(“resize”, function() {
myChart.resize();
});
使用步骤知道后,我们再来学习里面的基础配置!
点位图
===
插入本案例中的代码如下:
// (function(){})();立即执行函数
(function() {
// 1.实例化对象
var myChart = echarts.init(document.querySelector(“.pie”));
// 2.指定配置项和数据
var option = {
tooltip: {
trigger: ‘item’,
formatter: ‘{a}
{b} : {c} ({d}%)’
},
color: [‘#006cff’, ‘#60cda0’, ‘#ed8884’, ‘#ff9f7f’, ‘#0096ff’, ‘#9fe6b8’, ‘#32c5e9’, ‘#1d9dff’],
series: [
{
name: ‘Area Mode’,
type: ‘pie’,
radius: [‘10%’, ‘70%’],
// radius为百分比就是针对这个容器pie而言
center: [‘50%’, ‘50%’],
roseType: ‘radius’,
itemStyle: {
borderRadius: 5
},
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: ‘湖北’ }
],
// label对象用于修饰图表中的字体
label: {
fontSize: 12,
},
// labelLine中注释的线
labelLine: {
length: 6,
length2: 8
}
}
],
};
// 3.配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4.图标也可以自适应我们的屏幕
window.addEventListener(“resize”, function() {
myChart.resize();
});
})();
里面有些参数我来解释一下:
tooltip:
tooltip: { //tooltip提示框组件
trigger: ‘item’, //trigger触发类型:item——数据项图形触发主要在散点图、饼图等
//axis坐标轴触发主要在柱状图,折线图等 //none 什么都不触发
formatter: ‘{a}
{b} : {c} ({d}%)’
},
series系列:
series: [
{
name: ‘Area Mode’,
type: ‘pie’,
radius: [‘10%’, ‘70%’],// radius为百分比就是针对这个容器pie而言
center: [‘50%’, ‘50%’],
roseType: ‘radius’,
itemStyle: {
borderRadius: 5
},
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: ‘湖北’ }
],
label: { // label对象用于修饰图表中的字体
fontSize: 12,
},
labelLine: { // labelLine中注释的线
length: 6,
length2: 8 //其实饼状图上默认有两条注释线引申出来控制线的长短
}
}
],
yAxis为y轴;xAxis为x轴
grid绘图网格
legend图例组件
如下图所示:
柱状图
===
插入本案例中的代码如下:
// 柱状图
(function() {
// 把柱形图中的效果放在一个变量中使用时引用
var item = {
value: 1200,
// itemStyle是对柱子样式进行修改
itemStyle: {
color: ‘#254065’
},
// 当鼠标在柱子上没有高光效果
emphasis: {
itemStyle: {
color: ‘#254065’
}
},
// 当鼠标经过提示框中没有提示效果
tooltip: {
extraCssText: ‘opacity:0’
}
};
var myChart = echarts.init(document.querySelector(“.bar”));
var option = {
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1, [
{ offset: 0, color: ‘#00fffb’ }, // 0 起始颜色
{ offset: 1, color: ‘#0061ce’ } // 1 结束颜色
]
),
tooltip: {
trigger: ‘item’,
},
grid: {
top: “3%”,
left: ‘0%’,
right: ‘3%’,
bottom: ‘3%’,
containLabel: true,
//
show: true,
borderColor: ‘rgba(0, 240, 255, 0.3)’
},
xAxis: [{
type: ‘category’,
data: [‘上海’, ‘广州’, ‘北京’, ‘深圳’, ‘合肥’, ‘’, ‘…’, ‘’, ‘杭州’, ‘厦门’, ‘济南’, ‘成都’, ‘重庆’],
// 刻度设置
axisTick: {
// true 图形在刻度中间
alignWithLabel: false,
show: false // 不出现刻度
},
axisLabel: {
color: “#4c9bfd”
},
// x坐标轴颜色设置
axisLine: {
lineStyle: {
color: ‘rgba(0, 240, 255, 0.3)’,
}
}
}],
yAxis: [{
type: ‘value’,
// 刻度设置
axisTick: {
// true 图形在刻度中间
alignWithLabel: false,
show: false // 不出现刻度
},
axisLabel: {
color: “#4c9bfd”
},
// x坐标轴颜色设置
axisLine: {
lineStyle: {
color: ‘rgba(0, 240, 255, 0.3)’,
}
}
}],
series: [{
name: ‘Direct’,
type: ‘bar’,
barWidth: ‘60%’,
data: [2100, 1900, 1700, 1560, 1400, item,
item,
item,
900, 750, 600, 480, 240
]
}]
};
myChart.setOption(option);
// 4.图标也可以自适应我们的屏幕
window.addEventListener(“resize”, function() {
myChart.resize();
});
})();
itemStyle:
itemStyle: { // itemStyle是对柱子样式进行修改
color: ‘#254065’
},
emphasis:
emphasis: { // 当鼠标在柱子上没有高光效果
itemStyle: {
color: ‘#254065’
}
},
柱状图中的渐变效果:
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [ // (x1,y2) 点到点 (x2,y2) 之间进行渐变
{ offset: 0, color: ‘#00fffb’ }, // 0 起始颜色
{ offset: 1, color: ‘#0061ce’ } // 1 结束颜色
]
)
grid系列之刻度线:
grid: {
top: “3%”,
left: ‘0%’,
right: ‘3%’,
bottom: ‘3%’,
containLabel: true, // 刻度线出现
show: true, //边框x轴y轴的出现
borderColor: ‘rgba(0, 240, 255, 0.3)’ //边框x轴y轴的颜色
}
xAxis系列参数:
xAxis: [{
type: ‘category’,
data: [‘上海’, ‘广州’, ‘北京’, ‘深圳’, ‘合肥’, ‘’, ‘…’, ‘’, ‘杭州’, ‘厦门’, ‘济南’, ‘成都’, ‘重庆’],
axisTick: {// 刻度设置
alignWithLabel: false, // true 图形在刻度中间
show: false // 不出现刻度
},
axisLabel: { //x轴的颜色
color: “#4c9bfd”
},
axisLine: { // x坐标轴颜色设置
lineStyle: {
color: ‘rgba(0, 240, 255, 0.3)’,
}
}
}]
折线图
===
插入本案例中的代码如下:
// 折线图
(function() {
// 准备数据
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]
]
}
var myChart = echarts.init(document.querySelector(“.line”));
var option = {
tooltip: {
trigger: ‘axis’
},
legend: {
textStyle: {
color: ‘#4c9bfd’ // 图例文字颜色
},
right: ‘10%’, // 距离右边10%
// 如果series 里面设置了name,那么此时图里组件的data可以省略!!!
// data: [‘Email’, ‘Union Ads’]
},
grid: {
top: “20%”,
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
show: true, //显示边框
borderColor: ‘#012f4a’, // 边框颜色
containLabel: true
},
xAxis: {
type: ‘category’,
boundaryGap: false, // 去除轴内间距
axisTick: {
show: false // 去除刻度线
},
axisLabel: {
color: ‘#4c9bfd’ // 文本颜色
},
axisLine: {
show: false // 去除轴线
},
data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ‘10月’, ‘11月’, ‘12月’]
},
yAxis: {
type: ‘value’,
axisTick: {
show: false // 去除刻度
},
axisLabel: {
color: ‘#4c9bfd’ // 文字颜色
},
splitLine: {
lineStyle: {
color: ‘#012f4a’ // 分割线颜色
}
}
},
color: [‘#00f2f1’, ‘#ed3f35’], //两条曲线改变颜色
series: [{
name: ‘预期销售额’,
type: ‘line’,
smooth: true,
stack: “总量”,
data: data.year[0]
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img-M9gX97ED-1712718277242)]
学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
[外链图片转存中…(img-qqcBMRsG-1712718277243)]
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
[外链图片转存中…(img-LVmBAPjq-1712718277243)]
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
[外链图片转存中…(img-OmiBgaL3-1712718277243)]
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-5OWGX2X3-1712718277244)]