9.26 数据可视化 - 教程
数据可视化可以把数据从冰冷的数字转换成图形，揭示蕴含在数据中的规律。
常见的数据可视化库
Echarts
Echarts是百度前端团队做的基于html5-canvas的开源图表绘制组件
ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。 ECharts 遵循 Apache-2.0 开源协议，免费商用。
ECharts 兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等）及兼容多种设备，可随时随地任性展示。 Echarts又被称为可视化图表，其实就是一个做图表的插件 获取数据：https://datav.aliyun.com/portal/school/atlas/area_selector
这一类的插件比较多，比如：
D3.js 目前web端评价最高的Javascript可视化工具库（入手难）
Echarts.js 百度出品的一个开源Javascript数据可视化库
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
ichartjs是一款优秀的国产开源插件，作者是王鹤，使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。
五分钟上手Echarts
官网 - 下载 - 五分钟上手Echarts
步骤：
下载并引入echarts.js文件
准备一个具备大小的DOM容器
初始化echarts实力对象
制定配置项和数据（option）
将配置项设置给echarts实例对象
Echarts基础配置
了解配置中每个模块的主要作用即可
| 需要了解的主要配置：series，xAxis，yAxis，grid，tooltip，title，legend，color |
title：设置图表的标题
tooltip：图表的提示框组件
- trigger：触发方式
legend：图例组件
grid：网格配置，grid可以控制线型图，柱状图，图表大小
- containLabel：是否显示刻度标签，如果为true就是现实，否则反之
toolbox：工具箱组件，可以另存为图片等功能
xAxis：设置x轴的相关配置
- boundarGap：是否让我们的线条和坐标轴有缝隙
yAxis：设置y轴的相关配置
series：系列图表配置，他决定着现实哪种类型的图表
color：调色盘颜色列表
经常使用的效果
柱状图 - bar
![[1280X1280 (19).PNG]]
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 标题
title: {
text: 'ECharts 入门示例',
show: false,
left: 'left',
top: 'bottom',
textStyle: {
color: '#f00',
fontSize: 18
},
subtext: '副标题'
},
// 工具箱
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
title: 'save as image'
}
}
},
// 图例
legend: {
//图例的文字要和series中数据的name相同
data: ['销量']
},
// x轴
xAxis: {
//类目(category)
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
// 数据
series: [{
name: '销量',
//柱状图
type: 'bar',
//数据
data: [5, 20, 36, 100, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>折线图 - line
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 图表的标题
title: {
text: 'ECharts 入门示例'
},
// 图标的工具：保存为图片，还原，数据视图，区域绽放，图表形式的切换
toolbox: {
show: true,
feature: {
// 保存为图片
saveAsImage: {
show: true
},
restore: {
show: true
},
dataView: {
show: true
},
dataZoom: {
show: true
},
magicType: {
type: ['line', 'bar', 'stack', 'tiled']
}
}
},
// 图示
legend: {
data: [{
name: '销量',
icon: 'arrow'
}, '产量']
},
// x轴
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "马来", 'pen', 'qun']
},
// y轴
yAxis: {},
series: [{
//对应销量这个类目的数据，
name: '销量',
type: 'bar', //柱状图
data: [5, 20, 36, 10, 10, 20, 30, 20, 30]
}, {
//对应产量这个类目的数据，
name: '产量',
type: 'line', //折线图
data: [7, 30, 50, 11, 40, 180, 40, 50, 60]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>饼形图-pie
![[2f5cce18-fc61-48e1-bf13-0a6896c07dec (1).png]]
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
// 标题的位置
x: 'center'
},
tooltip: {
trigger: 'item',
// 参考课件
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
// 垂直放置
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [{
name: '访问来源',
type: 'pie',
// 相对于dom的半径
radius: '70%',
//相对于dom水平和垂直的位置
center: ['50%', '60%'],
data: [{
value: 335,
name: '直接访问'
}, {
value: 310,
name: '邮件营销'
}, {
value: 234,
name: '联盟广告'
}, {
value: 135,
name: '视频广告'
}, {
value: 1548,
name: '搜索引擎'
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>雷达图 - radar
![[1ae78214-ad10-4aca-8611-144093f82b07.png]]
<script type="text/javascript">
// 基于准备好的容器(这里的容器是id为chart1的div)，初始化echarts实例
var chart1 = echarts.init(document.getElementById("chart1"));
// 指定图表的配置项和数据
var option = {
title: {
text: '您跑赢了32%资产相近的客户',
top: '90%',
left: '23%',
textStyle: {
color: '#666',
fontSize: 14,
}
},
radar: [{
radius: 70,
name: { // (圆外的标签)雷达图每个指示器名称的配置项。
formatter: '{value}',
textStyle: {
fontSize: 12,
color: '#A2A5A9'
}
},
nameGap: 15, // 指示器名称和指示器轴的距离。[ default: 15 ]
splitNumber: 4, // (这里是圆的环数)指示器轴的分割段数。[ default: 5 ]
shape: 'polygon', // 雷达图绘制类型，支持 'polygon'(多边形) 和 'circle'(圆)。[ default: 'polygon' ]
axisLine: { // (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: '#fff', // 坐标轴线线的颜色。
width: 0, // 坐标轴线线宽。
type: 'solid', // 坐标轴线线的类型。
}
},
splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: '#313339', // 分隔线颜色
width: 2, // 分隔线线宽
}
},
splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: { // 分隔区域的样式设置。
color: ['rgba(250,250,250,0.9)','rgba(200,200,200,0.3)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
}
},
indicator: [{text : '收益能力',max:100},
{text : '风险控制',max:100},
{text : '盘面感知',max:100},
{text : '仓位控制',max:100},
{text : '选股能力',max:100}]
}],
series: [{
name: '雷达图', // 系列名称,用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
type: 'radar', // 系列类型: 雷达图
itemStyle: { // 折线拐点标志的样式。
normal: { // 普通状态时的样式
lineStyle: {
width: 0
},
opacity: 0
},
emphasis: { // 高亮时的样式
lineStyle: {
width: 0
},
opacity: 1
}
},
data: [{ // 雷达图的数据是多变量（维度）的
name: '女', // 数据项名称
value: [85, 63, 37, 20, 84], // 其中的value项数组是具体的数据，每个值跟 radar.indicator 一一对应。
symbol: 'circle', // 单个数据标记的图形。
symbolSize: 5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
label: { // 单个拐点文本的样式设置
normal: {
show: true , // 单个拐点文本的样式设置。[ default: false ]
position: 'top', // 标签的位置。[ default: top ]
distance: 3, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
color: '#A2A5A9', // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
fontSize: 14, // 文字的字体大小
formatter:function(params) {
return params.value;
}
}
},
itemStyle: { // 单个拐点标志的样式设置。
normal: {
borderColor: '#285DAD', // 拐点的描边颜色。[ default: '#000' ]
borderWidth: 8, // 拐点的描边宽度，默认不描边。[ default: 0 ]
}
},
lineStyle: { // 单项线条样式。
normal: {
opacity: 0.5 // 图形透明度
}
},
areaStyle: { // 单项区域填充样式
normal: {
color: '#285DAD' // 填充的颜色。[ default: "#000" ]
}
}
}
]
}, ]
};
// 使用刚指定的配置项和数据显示图表
chart1.setOption(option)
</script>散点图 - scatter
![[239fe49a-ca21-4daf-bea2-138890a8cf94.png]]
<script>
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// app.title = '气泡图';
var data = [
[[28604,77,17096869,'Australia',1990],[31163,77.4,27662440,'Canada',1990],[1516,68,1154605773,'China',1990],[13670,74.7,10582082,'Cuba',1990],[28599,75,4986705,'Finland',1990],[29476,77.1,56943299,'France',1990],[31476,75.4,78958237,'Germany',1990],[28666,78.1,254830,'Iceland',1990],[1777,57.7,870601776,'India',1990],[29550,79.1,122249285,'Japan',1990],[2076,67.9,20194354,'North Korea',1990],[12087,72,42972254,'South Korea',1990],[24021,75.4,3397534,'New Zealand',1990],[43296,76.8,4240375,'Norway',1990],[10088,70.8,38195258,'Poland',1990],[19349,69.6,147568552,'Russia',1990],[10670,67.3,53994605,'Turkey',1990],[26424,75.7,57110117,'United Kingdom',1990],[37062,75.4,252847810,'United States',1990]],
[[44056,81.8,23968973,'Australia',2015],[43294,81.7,35939927,'Canada',2015],[13334,76.9,1376048943,'China',2015],[21291,78.5,11389562,'Cuba',2015],[38923,80.8,5503457,'Finland',2015],[37599,81.9,64395345,'France',2015],[44053,81.1,80688545,'Germany',2015],[42182,82.8,329425,'Iceland',2015],[5903,66.8,1311050527,'India',2015],[36162,83.5,126573481,'Japan',2015],[1390,71.4,25155317,'North Korea',2015],[34644,80.7,50293439,'South Korea',2015],[34186,80.6,4528526,'New Zealand',2015],[64304,81.6,5210967,'Norway',2015],[24787,77.3,38611794,'Poland',2015],[23038,73.13,143456918,'Russia',2015],[19360,76.5,78665830,'Turkey',2015],[38225,81.4,64715810,'United Kingdom',2015],[53354,79.1,321773631,'United States',2015]]
];
//依次为横坐标、纵坐标(-10到10之间)、圆形面积，第三个参数为圆形半径，约定最小为5px,最大值为20
var data_buy11= [[-6,4,15],[-8,-2,25],[-4,4,35]]; //[[-6,4,20],[-8,-2,15],[-4,4,20]]; //买入上涨区
var data_buy12= [[2,-4,20]]; //[[2,-4,5]]; //买入下跌区
var data_sell11= [[-6,4,20],[-8,-2,15]]; //[[-6,4,20],[-8,-2,15] ]; //卖出上涨区
var data_sell12= [[2,-4,18]]; //[[2,-4,5]]; //卖出下跌区
var colorList_buy = ['#FB4B4B','#4BB036'];
var option_pm_sell= {
splitLine:false,
grid: {
borderWidth:0,
x:40,
y: 5
},
tooltip : {
trigger: 'axis',
showDelay : 0,
axisPointer:{
type : 'none'
}
},
xAxis : [
{
min:-10,
max:10,
axisLine:{
show:false
} ,
splitNumber:10,
type : 'value',
axisLabel : {
formatter: '{value} '
}
}
],
yAxis : [
{
type : 'value',
min:-10,
max:10,
axisLine:{
show:false
} ,
splitNumber:10,
axisLabel : {
formatter: '{value} '
}
}
],
series : [
{
name:'scatter1',
type:'scatter',
data: data_sell11, //依次为横坐标、纵坐标、圆形面积，面积最大值约定为20
symbol:"circle",
// itemStyle:itemStyle_sell,
symbolSize: function (value){
return value[2];
}
},
{
name:'scatter2',
type:'scatter',
data: data_sell12,
symbol:"circle",
// itemStyle:itemStyle_sell,
symbolSize: function (value){
return value[2];
}
}
]
};
myChart.setOption(option_pm_sell);仪表盘 - gauge
![[8520b339-ddd7-49a5-8584-cc8810f8bb39.png]]
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
toolbox: {
feature: {
// restore: {},
saveAsImage: {}
}
},
series: [{
name: '业务指标',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: [{
value: 32,
name: '完成率'
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
setInterval(function() {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; //34.56
myChart.setOption(option, true);
}, 2000);
</script>总结Echarts的使用
- 引入echarts
<script src="./js/echarts.js"></script>- 创建div容器
设置css样式
使用echarts - 初始化echarts，告诉echarts显示的位置
var myChat = echarts.init(document.querySelector('#box'));- 使用echarts - 配置option的数据
// 不需要自己写，直接复制就可以
从实例的代码中直接复制option的代码- 使用echarts - 将option的数据设置给echarts
option && myChat.setOption(option);| 备注：暂时不能使用完整代码下的echarts.js的引入方式，因为我们的js文件不是一个“包”[文件夹] |
词云图
词云图生成器：https://tendcode.com/tool/word-cloud/
词云图插件：https://blog.csdn.net/a736755244/article/details/103596818
![[2046f8c3-ea64-44c0-8fb0-8884db19b049.png]]
水球图
下载：echarts-liquidfill.min.js
链接：https://pan.baidu.com/s/16MaPOXRNHuiEbKyo8h88MA?pwd=2xvc
提取码：2xvc
![[b0eda4c2-cf18-437a-9ca5-8eb590cd26bc.png]]
常用属性
点击图片可查看完整电子表格
1)HTML中引入水球图
<script src='echarts.js'></script>
<script src='echarts-liquidfill.js'></script>- 其中这两个文件都可以在官方github项目中dist目录下获取到，echarts、echarts-liquidfill。 通过npm引入:
npm install echarts
npm install echarts-liquidfill**注意:**echarts-liquidfill@3 版本匹配 echarts@5 版本，echarts-liquidfill@2 版本匹配 echarts@4 版本
3)使用
const option = {
series: [{
type: 'liquidFill',
data: [0.6]
}]
};![[f0b5026a-9002-49bc-a661-d3881ea9d47a.png]]
4)多个波浪效果
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3]
}]
};
5)静止的波浪
const option = {
series: [{
type: 'liquidFill',
waveAnimation: false, // 波浪效果
animationDuration: 0, // 静止得波浪
animationDurationUpdate: 0,
data: [0.6, 0.5, 0.4, 0.3]
}]
};通过设置 waveAnimation 属性为 false，可以实现静止的波浪效果，另外，通过设置 animationDuration 和 animationDurationUpdate 属性的值，可以调整波浪的动画，同样可以实现静止的效果。
![[d78afa54-1797-4cfa-83a9-53f0a19a9d25.png]]
6)静止水面效果
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
amplitude: 0,
waveAnimation: 0
}]
};![[6c9151f8-7de3-49e8-a0aa-b79474b963bd.png]]
7)其他形状的水球图
水球图不仅能被设定为圆形，也可以被设置为其他形状，如矩形、钻石菱形、箭头型等，也可以设置为包含其容器的形状，甚至可以通过SVG来设定
const options = [{
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
shape: 'diamond' // 钻石形状
}]
}];![[8e3ba2e5-19e5-4ddf-a30a-5521db04fbb8.png]]
const option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.55, 0.4, 0.25],
radius: '60%',
outline: {
show: false
},
backgroundStyle: {
borderColor: '#156ACF',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.4)',
shadowBlur: 20
},
shape: 'path://M367.855,428.202c-3.674-1.385-7.452-1.966-11.146-1.794c0.659-2.922,0.844-5.85,0.58-8.719 c-0.937-10.407-7.663-19.864-18.063-23.834c-10.697-4.043-22.298-1.168-29.902,6.403c3.015,0.026,6.074,0.594,9.035,1.728 c13.626,5.151,20.465,20.379,15.32,34.004c-1.905,5.02-5.177,9.115-9.22,12.05c-6.951,4.992-16.19,6.536-24.777,3.271 c-13.625-5.137-20.471-20.371-15.32-34.004c0.673-1.768,1.523-3.423,2.526-4.992h-0.014c0,0,0,0,0,0.014 c4.386-6.853,8.145-14.279,11.146-22.187c23.294-61.505-7.689-130.278-69.215-153.579c-61.532-23.293-130.279,7.69-153.579,69.202 c-6.371,16.785-8.679,34.097-7.426,50.901c0.026,0.554,0.079,1.121,0.132,1.688c4.973,57.107,41.767,109.148,98.945,130.793 c58.162,22.008,121.303,6.529,162.839-34.465c7.103-6.893,17.826-9.444,27.679-5.719c11.858,4.491,18.565,16.6,16.719,28.643 c4.438-3.126,8.033-7.564,10.117-13.045C389.751,449.992,382.411,433.709,367.855,428.202z',
label: {
position: ['38%', '40%'],
formatter: function() {
return 'ECharts\nLiquid Fill';
},
fontSize: 40,
color: '#D94854'
}
}]
};![[5104cccb-4180-45b3-8b97-2bd57044d32a.png]]
绘制中国地图
注意:需要在服务器环境下预览
获取地图坐标：https://datav.aliyun.com/portal/school/atlas/area_selector
获取飞行信息：https://echarts.apache.org/examples/zh/editor.html?c=geo-lines
效果
![[3952239d-f793-44f8-a906-00767f07cae3.png]]
得到所有城市信息
![[65d15218-5d6e-43ac-98bf-175cd3cfc349.png]]
<script src="./js/echarts.js"></script>
<script src="./js/jquery-1.8.2.js"></script>
<script>
var myChar = echarts.init(document.querySelector('#box'));
// 3. 发送ajax请求请求地图数据：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
$.ajax({
type:'get',
url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
dataType:'json',
success:function(res){
// 4. 数据请求成功之后，注册数据
echarts.registerMap('map', res);
// 设置option的数据
var option = {
geo: [{
map: 'map'
}]
}
// 使用option数据
option && myChar.setOption(option);
},
error:function(err){
console.log(err);
}
})
</script>大屏展示效果都适用echarts做的
![[dd180a5a-d043-4c8a-be50-f40eda317900.png]]
案例
模拟antd效果
案例效果地址：https://preview.pro.ant.design/dashboard/analysis 实现柱状图效果
![[6f8a6ad5-565a-41d1-98ae-854a1c12f5dd.png]]
<!--引入echarts.js文件-->
<script src="./js/echarts5.3.3.js"></script>
<body>
<!-- 自定义盒子的宽高 -->
<div id="box" style="height:600px"></div>
</body>
<script>
// 1. 初始化echarts对象
var myChart = echarts.init(document.querySelector('#box'));
// 2. 配置内容
var option = {
// 表头
tooltip: {
show:true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 图表网格间距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true // grid 区域是否包含坐标轴的刻度标签；默认值为false，不包含刻度
},
xAxis: [ // x轴相关的设置
{
type: 'category', // x坐标轴类型，value 适合连续形数据；category 类目轴； time 时间轴
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: { // 坐标轴刻度相关设置
alignWithLabel: true, // 刻度线和标签对齐
lineStyle:{ // 刻度风格
color:'#8c8c8c' // 刻度风格
}
},
axisLine:{ // 坐标轴轴线相关设置
lineStyle:{
color:'#8c8c8c' // 坐标轴颜色
}
}
}
],
yAxis: [ // y轴相关的设置
{
type: 'value'
}
],
series: [ // 表中内容相关的设置
{
// showBackground:true, // 是否显示 柱状图的背景颜色；默认为false，不显示
backgroundStyle:{ // 坐标轴背景颜色
color:"#ccc"
},
itemStyle:{
color:'#6395f9' // 柱状图柱子的颜色
},
name: '销量', // 坐标轴名称
type: 'bar', // 图表类型：line折线图，bar柱状图，pie饼形图
barWidth: '60%', // 坐标轴的宽度，默认为自适应
data: [1063, 373, 698, 585, 1117, 570, 314,1178,671,453,388,304] // 数据内容数组
}
]
};
// 3. 使用配置项
option && myChart.setOption(option);
</script>拖拽窗口控制屏幕改变图像大小
触发拖拽事件：官方文档 - API - echartsInstance - resize
![[0c84df99-9607-402b-8921-2d8c9bcdaeeb.png]]
| JavaScript window.onresize = function () { myChart.resize(); // 重要的代码 } |
缩放屏幕时，图像跟着改变
<script src="./js/echarts5.3.3.js"></script>
<body>
<div id="box" style="height:600px"></div>
</body>
<script>
// 1. 初始化echarts对象
var myChart = echarts.init(document.querySelector('#box'));
// 2. 配置内容
var option = {
// 表头
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 表间距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [ // x轴相关的设置
{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#8c8c8c' // #8c8c8c
}
},
axisTick: {
lineStyle: {
color: '#8c8c8c'
}
}
}
],
yAxis: [ // y轴相关的设置
{
type: 'value'
}
],
series: [ // 表中内容相关的设置
{
// showBackground:true, //柱状图的背景颜色
backgroundStyle: {
color: "#ccc"
},
itemStyle: {
color: '#6395f9'
},
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: [1063, 373, 698, 585, 1117, 570, 314, 1178, 671, 453, 388, 304]
}
]
};
// 3. 使用配置项
option && myChart.setOption(option);
// 4. 拖拽的事件 【重点代码】
window.onresize = function () {
myChart.resize(); // 重要的代码
}
</script>给图表添加点击事件，显示新的图表
<script src="./js/echarts5.3.3.js"></script>
</head>
<body>
<div id="box" style="height:600px"></div>
</body>
<script>
var month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
var data = [1063, 373, 698, 585, 1117, 570, 314, 1178, 671, 453, 388, 304];
// 1. 初始化echarts对象
var myChart = echarts.init(document.querySelector('#box'));
// 2. 配置内容
function show(month, data) {
option = {
// 表头
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// 表间距
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [ // x轴相关的设置
{
type: 'category',
data: month,
axisTick: {
alignWithLabel: true
},
axisLine: {
lineStyle: {
color: '#8c8c8c' // #8c8c8c
}
},
axisTick: {
lineStyle: {
color: '#8c8c8c'
}
}
}
],
yAxis: [ // y轴相关的设置
{
type: 'value'
}
],
series: [ // 表中内容相关的设置
{
// showBackground:true, //柱状图的背景颜色
backgroundStyle: {
color: "#ccc"
},
itemStyle: {
color: '#6395f9'
},
name: 'Direct',
type: 'bar',
barWidth: '60%',
data: data
}
]
};
return option;
}
// 3. 使用配置项
myChart.setOption(show(month,data));
// 4. 拖拽的事件
window.onresize = function () {
myChart.resize(); // 重要的代码
}
var title = ['上旬', '中旬', '下旬'];
var salse = [
[300, 200, 600],
[120, 80, 50],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
[300, 200, 600],
];
// 5. 给图表添加事件【重点代码】
myChart.on('click', function (params) {
// 调用新的数据
myChart.setOption(show(title,salse[params.dataIndex]));
});
</script>尝试使用其他可视化图表【g2】
官网地址：https://antv.vision/zh 现在大多数的框架都在建立自己的生态圈
比如：react框架；react起源于Facebook的内部项目，而他下面有一个后台框架，ant-design【简称antd】
Ant Design 是一个 UI 设计语言，是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
Ant Design 源自蚂蚁金服体验技术部的后台产品开发，是一套企业级的交互视觉规范，统一后台项目的前端 UI 设计，屏蔽各种不必要的设计差异和前端实现成本，解放设计和前端开发资源。
在antd中不仅有后端框架，还有可视化图表，移动端UI组件库，图形化解决方案，图标集等等，antd在正在逐步建立自己的技术生态圈 其中g2【属于antv】就是其中实现可视化图表的库，antv是一套集合了各种各样图表的库，可以在使用的时候引入自己需要的图表库，相比于Echarts，Echarts是直接引入所有的图像，文件相对来说比较大 使用步骤
- 下载antv
官网给的链接是暂时没办法使用，可以使用npm进行安装，然后找到对应的g2.js文件
| Perl npm install @antv/g2 --save |
创建容器，放置g2
<div id="c1"></div>使用
<script src="./g2.js"></script> <script> const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 } ]; // Step 1: 创建 Chart 对象 const chart = new Chart({ container: 'c1', // 指定图表容器 ID width: 600, // 指定图表宽度 height: 300, // 指定图表高度 }); // Step 2: 载入数据源 chart.data(data); // Step 3: 创建图形语法，绘制柱状图 chart.interval().position('genre*sold'); // Step 4: 渲染图表 chart.render(); </script>注意：这样引入完之后，会报错，找不到Chart 需要在Chart的前面添加上g2
const chart = new G2.Chart({
container: 'container', // 指定图表容器 ID
width: 600, // 指定图表宽度
height: 300,// 指定图表高度
});地图操作
实现地图操作步骤： 有对应的地图数据 用地图数据注册地图 在geo中应用地图
在echarts中专门提供了操作地图的地图坐标组件
![[773b7510-6363-4a74-bfb0-d1c4c5bff0b6 (1).png]]
echarts提供了如何操作地图的案例
![[d051ac7e-a5ae-40db-99d8-35f30a6116f4.png]]
参考阿里云工具，获取全国坐标位置
<script src="./js/echarts5.3.3.js"></script>
<script src="./js/jquery1.9.1.js"></script>
<script>
var chart = echarts.init(document.querySelector('#box'));
$(function(){
$.ajax({ // 请求坐标数据
type:'get',
url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
dataType:'json',
success:function(res){
// 注册地图
echarts.registerMap('china',res); // 注册地图
// 使用地图
chart.setOption({
geo:{
map:'china' // 使用地图
}
});
}
})
})绘制飞行路线效果
参考地址：https://echarts.apache.org/examples/zh/editor.html?c=geo-lines
<script src="./js/echarts5.3.3.js"></script>
<script src="./js/jquery1.9.1.js"></script>
<script>
var geoCoordMap = {
上海: [121.4648, 31.2891],
东莞: [113.8953, 22.901],
东营: [118.7073, 37.5513],
中山: [113.4229, 22.478],
临汾: [111.4783, 36.1615],
临沂: [118.3118, 35.2936],
丹东: [124.541, 40.4242],
丽水: [119.5642, 28.1854],
乌鲁木齐: [87.9236, 43.5883],
佛山: [112.8955, 23.1097],
保定: [115.0488, 39.0948],
兰州: [103.5901, 36.3043],
包头: [110.3467, 41.4899],
北京: [116.4551, 40.2539],
北海: [109.314, 21.6211],
南京: [118.8062, 31.9208],
南宁: [108.479, 23.1152],
南昌: [116.0046, 28.6633],
南通: [121.1023, 32.1625],
厦门: [118.1689, 24.6478],
台州: [121.1353, 28.6688],
合肥: [117.29, 32.0581],
呼和浩特: [111.4124, 40.4901],
咸阳: [108.4131, 34.8706],
哈尔滨: [127.9688, 45.368],
唐山: [118.4766, 39.6826],
嘉兴: [120.9155, 30.6354],
大同: [113.7854, 39.8035],
大连: [122.2229, 39.4409],
天津: [117.4219, 39.4189],
太原: [112.3352, 37.9413],
威海: [121.9482, 37.1393],
宁波: [121.5967, 29.6466],
宝鸡: [107.1826, 34.3433],
宿迁: [118.5535, 33.7775],
常州: [119.4543, 31.5582],
广州: [113.5107, 23.2196],
廊坊: [116.521, 39.0509],
延安: [109.1052, 36.4252],
张家口: [115.1477, 40.8527],
徐州: [117.5208, 34.3268],
德州: [116.6858, 37.2107],
惠州: [114.6204, 23.1647],
成都: [103.9526, 30.7617],
扬州: [119.4653, 32.8162],
承德: [117.5757, 41.4075],
拉萨: [91.1865, 30.1465],
无锡: [120.3442, 31.5527],
日照: [119.2786, 35.5023],
昆明: [102.9199, 25.4663],
杭州: [119.5313, 29.8773],
枣庄: [117.323, 34.8926],
柳州: [109.3799, 24.9774],
株洲: [113.5327, 27.0319],
武汉: [114.3896, 30.6628],
汕头: [117.1692, 23.3405],
江门: [112.6318, 22.1484],
沈阳: [123.1238, 42.1216],
沧州: [116.8286, 38.2104],
河源: [114.917, 23.9722],
泉州: [118.3228, 25.1147],
泰安: [117.0264, 36.0516],
泰州: [120.0586, 32.5525],
济南: [117.1582, 36.8701],
济宁: [116.8286, 35.3375],
海口: [110.3893, 19.8516],
淄博: [118.0371, 36.6064],
淮安: [118.927, 33.4039],
深圳: [114.5435, 22.5439],
清远: [112.9175, 24.3292],
温州: [120.498, 27.8119],
渭南: [109.7864, 35.0299],
湖州: [119.8608, 30.7782],
湘潭: [112.5439, 27.7075],
滨州: [117.8174, 37.4963],
潍坊: [119.0918, 36.524],
烟台: [120.7397, 37.5128],
玉溪: [101.9312, 23.8898],
珠海: [113.7305, 22.1155],
盐城: [120.2234, 33.5577],
盘锦: [121.9482, 41.0449],
石家庄: [114.4995, 38.1006],
福州: [119.4543, 25.9222],
秦皇岛: [119.2126, 40.0232],
绍兴: [120.564, 29.7565],
聊城: [115.9167, 36.4032],
肇庆: [112.1265, 23.5822],
舟山: [122.2559, 30.2234],
苏州: [120.6519, 31.3989],
莱芜: [117.6526, 36.2714],
菏泽: [115.6201, 35.2057],
营口: [122.4316, 40.4297],
葫芦岛: [120.1575, 40.578],
衡水: [115.8838, 37.7161],
衢州: [118.6853, 28.8666],
西宁: [101.4038, 36.8207],
西安: [109.1162, 34.2004],
贵阳: [106.6992, 26.7682],
连云港: [119.1248, 34.552],
邢台: [114.8071, 37.2821],
邯郸: [114.4775, 36.535],
郑州: [113.4668, 34.6234],
鄂尔多斯: [108.9734, 39.2487],
重庆: [107.7539, 30.1904],
金华: [120.0037, 29.1028],
铜川: [109.0393, 35.1947],
银川: [106.3586, 38.1775],
镇江: [119.4763, 31.9702],
长春: [125.8154, 44.2584],
长沙: [113.0823, 28.2568],
长治: [112.8625, 36.4746],
阳泉: [113.4778, 38.0951],
青岛: [120.4651, 36.3373],
韶关: [113.7964, 24.7028]
};
var BJData = [
[{ name: '北京' }, { name: '上海', value: 95 }],
[{ name: '北京' }, { name: '广州', value: 90 }],
[{ name: '北京' }, { name: '大连', value: 80 }],
[{ name: '北京' }, { name: '南宁', value: 70 }],
[{ name: '北京' }, { name: '南昌', value: 60 }],
[{ name: '北京' }, { name: '拉萨', value: 50 }],
[{ name: '北京' }, { name: '长春', value: 40 }],
[{ name: '北京' }, { name: '包头', value: 30 }],
[{ name: '北京' }, { name: '重庆', value: 20 }],
[{ name: '北京' }, { name: '常州', value: 10 }]
];
var SHData = [
[{ name: '上海' }, { name: '包头', value: 95 }],
[{ name: '上海' }, { name: '昆明', value: 90 }],
[{ name: '上海' }, { name: '广州', value: 80 }],
[{ name: '上海' }, { name: '郑州', value: 70 }],
[{ name: '上海' }, { name: '长春', value: 60 }],
[{ name: '上海' }, { name: '重庆', value: 50 }],
[{ name: '上海' }, { name: '长沙', value: 40 }],
[{ name: '上海' }, { name: '北京', value: 30 }],
[{ name: '上海' }, { name: '丹东', value: 20 }],
[{ name: '上海' }, { name: '大连', value: 10 }]
];
var GZData = [
[{ name: '广州' }, { name: '福州', value: 95 }],
[{ name: '广州' }, { name: '太原', value: 90 }],
[{ name: '广州' }, { name: '长春', value: 80 }],
[{ name: '广州' }, { name: '重庆', value: 70 }],
[{ name: '广州' }, { name: '西安', value: 60 }],
[{ name: '广州' }, { name: '成都', value: 50 }],
[{ name: '广州' }, { name: '常州', value: 40 }],
[{ name: '广州' }, { name: '北京', value: 30 }],
[{ name: '广州' }, { name: '北海', value: 20 }],
[{ name: '广州' }, { name: '海口', value: 10 }]
];
// 获取目的地坐标方法
function getCity(city) {
var cityArr = [];
for (var i = 0; i < city.length; i++) {
cityArr.push({
name: city[i][1].name,
value: geoCoordMap[city[i][1].name],
big: city[i][1].value
})
}
return cityArr
}
// 获取飞行航线
function getFrom(city) {
var getArr = [];
for (var i = 0; i < city.length; i++) {
getArr.push({
fromName: city[i][0].name,
toName: city[i][1].name,
coords: [geoCoordMap[city[i][0].name], geoCoordMap[city[i][1].name]]
});
}
return getArr;
}
// 飞机的图像
var path = 'path://M864 736c0-111.6-65.4-208-160-252.9V317.3c0-15.1-5.3-29.7-15.1-41.2L536.5 95.4C530.1 87.8 521 84 512 84s-18.1 3.8-24.5 11.4L335.1 276.1c-9.7 11.5-15.1 26.1-15.1 41.2v165.8C225.4 528 160 624.4 160 736h156.5c-2.3 7.2-3.5 15-3.5 23.8 0 22.1 7.6 43.7 21.4 60.8 11.3 14 26.2 24.6 43.1 30.6 23.1 54 75.6 88.8 134.5 88.8 29.1 0 57.3-8.6 81.4-24.8 23.6-15.8 41.9-37.9 53-64 16.9-6 31.8-16.5 43.1-30.5 13.8-17.2 21.4-38.8 21.4-60.8 0-8.4-1.1-16.4-3.1-23.8L864 736zM512 352c26.5 0 48 21.5 48 48s-21.5 48-48 48-48-21.5-48-48 21.5-48 48-48z m116.1 432.2c-5.2 3-11.2 4.2-17.1 3.4l-19.5-2.4-2.8 19.4c-5.4 37.9-38.4 66.5-76.7 66.5s-71.3-28.6-76.7-66.5l-2.8-19.5-19.5 2.5c-1 0.1-2.1 0.2-3.3 0.2-4.9 0-9.6-1.3-13.8-3.7-8.7-5-14.1-14.3-14.1-24.4 0-10.6 5.9-19.4 14.6-23.8h231.3c8.8 4.5 14.6 13.3 14.6 23.8-0.1 10.2-5.5 19.6-14.2 24.5z';
// option单独设置
var option = {
// 整个地图盒子的背景
backgroundColor: '#404a59',
// 1. 地图
geo: [{
map: 'zhongguo',
label:{
// show:true,
emphasis: {
show: true, //开启悬浮事件
color: '#404a59',//字体颜色
}
},
itemStyle: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
itemStyle: {
areaColor: '#fff',// 区域地图颜色
}
}
}],
series: [
// 4. 飞机效果
{
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'], // 飞行之前的小三角
// 线特效的配置
effect: {
show: true,
period: 6,
color: '#fff',
trailLength: 0.7,
symbolSize: 15, // 拖尾的粗细
symbol: path
},
lineStyle: {
color: '#fff',
width: 0.5,
curveness: 0.2
},
data: getFrom(GZData)
},
// 3. 涟漪效果
{
type: "effectScatter", // 涟漪图效果
coordinateSystem: "geo", // 使用地图方式添加坐标
symbolSize: function (val, pam) { // 使用回调函数获取涟漪大小
return pam.data.big / 8;
},
rippleEffect: {
brushType: 'stroke' // 涟漪效果是描边还是填充
},
label: {
show: true, // 是否显示文字提示
formatter: '{b}', // 显示的内容进行格式化，默认为哦纬度
position: 'right' // 文字显示的位置
},
itemStyle: {
color: '#fff' // 涟漪颜色
},
data: getCity(GZData) // 获取坐标数据
}
]
}
// 0. 请求地图数据
$(function () {
$.ajax({
type: 'get',
url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
dataType: 'json',
success: function (res) {
// 1. 注册地图
echarts.registerMap("zhongguo", res);
// 2. 初始化对象
var myChart = echarts.init(document.querySelector('#show'));
// 3. 绘制图
myChart.setOption(option);
},
error: function (err) {
console.log(err);
}
})
})
</script>参考网站：
bootcdn地址：https://www.bootcdn.cn/
echarts案例网站：https://www.isqqw.com/
获取地图数据网站：http://datav.aliyun.com/portal/school/atlas/area_selector
![[812d2bfa-deb2-40bb-9870-48dfa7f86ac0.png]]
作业
实现使用echarts编写车辆管理可视化页面网址:https://www.jq22.com/demo/jqueryechartsclgl202004230915/
使用echarts编写水质检测页面链接：https://www.jq22.com/demo/echartsSzjc202012202211/
浙公网安备 33010602011771号