系列文章目录
第一章:数据可视化项目基础配置
第二章:数据可视化项目Echarts图表模块
第三章:数据可视化项目数据切换效果模块
Echarts
介绍:
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表,且可定制。
- 折线图、柱状图、散点图、饼图、K线图
Echarts-基础配置
需要了解的主要配置:
series
xAxis
yAxis
grid
tooltip
title
legend
color
-
series
- 系列列表。每个系列通过
type
决定自己的图表类型 - 大白话:图标数据,指定什么类型的图标,可以多个图表重叠。
- 系列列表。每个系列通过
-
xAxis:直角坐标系 grid 中的 x 轴
- boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。
-
yAxis:直角坐标系 grid 中的 y 轴
-
grid:直角坐标系内绘图网格。
-
title:标题组件
-
tooltip:提示框组件
-
legend:图例组件
-
color:调色盘颜色列表
数据堆叠,同个类目轴上系列配置相同的
stack
值后 后一个系列的值会在前一个系列的值上相加。
项目例子展示
项目中的图表模块都差不多的做法,我这边就放两个给大家参考
点位区域(point)-饼图
图片展示:
代码分析:
// 点位分布统计模块
(function() {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".pie"));
// 2. 指定配置项和数据
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 注意颜色写的位置
color: [
"#006cff",
"#60cda0",
"#ed8884",
"#ff9f7f",
"#0096ff",
"#9fe6b8",
"#32c5e9",
"#1d9dff"
],
series: [
{
name: "点位统计",
type: "pie",
// 如果radius是百分比则必须加引号
radius: ["10%", "70%"],
center: ["50%", "50%"],
roseType: "radius",
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: 10
},
// 修饰引导线样式
labelLine: {
// 连接到图形的线长度
length: 6,
// 连接到文字的线长度
length2: 8
}
}
]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
})();
地图区域 (map)
图片展示:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/34fbf5be92d2069318ef6e6f13ae2468.png#pic_center)
代码展示:
地图的绘制是很复杂的,我们这边直接去官网引入就好。
用户统计 (users)
图片展示:![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/567f2b70a6fabb073141083126329843.png#pic_center)
代码展示:
//用户模块
(function() {
// 中间省略的数据 准备三项
var item = {
name: '',
value: 1200,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
},
}
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".bar"));
// 2. 指定配置和数据
option = {
tooltip: {
trigger: 'item'
// axisPointer: {
// type: 'shadow'
// }
},
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0,
0,
0,
1, [
{ offset: 0, color: '#00fffb' }, // 0 起始颜色
{ offset: 1, color: '#0061ce' } // 1 结束颜色
]
),
grid: {
left: '0%',
right: '3%',
bottom: '3%',
top: '3%',
containLabel: true,
show: true,
borderColor: 'rgba(0,240,255,0.3)'
},
xAxis: [{
type: 'category',
data: [
'上海',
'广州',
'北京',
'深圳',
'合肥',
'',
'......',
'',
'杭州',
'厦门',
'济南',
'成都',
'重庆'
],
axisTick: {
alignWithLabel: false,
show: false
},
axisLabel: {
color: '#ac9bfd'
},
axisLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
// width:8, x轴线的粗细
// opcity: 0, 如果不想显示x轴线 则改为 0
}
}
}],
yAxis: [{
type: 'value',
data: [
0,
500,
1000,
1500,
2000,
2500
],
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)'
}
}
}
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [
2100,
1900,
1700,
1560,
1400,
item,
item,
item,
900,
750,
600,
480,
240
],
}]
};
// 3. 把配置给实例对象
myChart.setOption(option);
// 4. 当我们浏览器缩放的时候,图表也等比例缩放
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
})();
总结
步骤:
- 下载echarts
- List item
- 引入echarts
- 初始化echarts实例对象
- 指定配置项和数据(option)
- 将配置项设置给echarts实例对象