Echarts5.3.2可视化案例-应用篇
Canvas案例
参考： https://github.com/sutianbinde/charts https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/chengduxiaoc/p/7664397.html 效果：
前端代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- <div id="canvas"> -->
<canvas id="barChart" height="400" width="600" style="margin:50px"></canvas>
</div>
<script>
function goBarChart(dataArr) {
// 声明所需变量
var canvas, ctx;
// 图表属性
var cWidth, cHeight, cMargin, cSpace;
var originX, originY;
// 柱状图属性
var bMargin, tobalBars, bWidth, maxValue;
var totalYNomber;
var gradient;
// 运动相关变量
var ctr, numctr, speed;
//鼠标移动
var mousePosition = {};
// 获得canvas上下文
canvas = document.getElementById("barChart");
if (canvas && canvas.getContext) {
ctx = canvas.getContext("2d");
}
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawBarAnimate(); // 绘制柱状图的动画
//检测鼠标移动
var mouseTimer = null;
canvas.addEventListener("mousemove", function (e) {
e = e || window.event;
if (e.layerX || e.layerX == 0) {
mousePosition.x = e.layerX;
mousePosition.y = e.layerY;
} else if (e.offsetX || e.offsetX == 0) {
mousePosition.x = e.offsetX;
mousePosition.y = e.offsetY;
}
//console.log(mousePosition);
clearTimeout(mouseTimer);
mouseTimer = setTimeout(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLineLabelMarkers();
drawBarAnimate(true);
}, 10);
});
//点击刷新图表
canvas.onclick = function () {
initChart(); // 图表初始化
drawLineLabelMarkers(); // 绘制图表轴、标签和标记
drawBarAnimate(); // 绘制折线图的动画
};
// 图表初始化
function initChart() {
// 图表信息
cMargin = 30;
cSpace = 60;
cHeight = canvas.height - cMargin * 2 - cSpace;
cWidth = canvas.width - cMargin * 2 - cSpace;
originX = cMargin cSpace;
originY = cMargin cHeight;
// 柱状图信息
bMargin = 15;
tobalBars = dataArr.length;
bWidth = parseInt(cWidth / tobalBars - bMargin);
maxValue = 0;
for (var i = 0; i < dataArr.length; i ) {
var barVal = parseInt(dataArr[i][1]);
if (barVal > maxValue) {
maxValue = barVal;
}
}
maxValue = 50;
totalYNomber = 10;
// 运动相关
ctr = 1;
numctr = 100;
speed = 10;
//柱状图渐变色
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'rgba(67,203,36,1)');
}
// 绘制图表轴、标签和标记
function drawLineLabelMarkers() {
ctx.translate(0.5, 0.5); // 当只绘制1像素的线的时候，坐标点需要偏移，这样才能画出1像素实线
ctx.font = "12px Arial";
ctx.lineWidth = 1;
ctx.fillStyle = "#000";
ctx.strokeStyle = "#000";
// y轴
drawLine(originX, originY, originX, cMargin);
// x轴
drawLine(originX, originY, originX cWidth, originY);
// 绘制标记
drawMarkers();
ctx.translate(-0.5, -0.5); // 还原位置
}
// 画线的方法
function drawLine(x, y, X, Y) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
}
// 绘制标记
function drawMarkers() {
ctx.strokeStyle = "#E0E0E0";
// 绘制 y
var oneVal = parseInt(maxValue / totalYNomber);
ctx.textAlign = "right";
for (var i = 0; i <= totalYNomber; i ) {
var markerVal = i * oneVal;
var xMarker = originX - 5;
var yMarker = parseInt(cHeight * (1 - markerVal / maxValue)) cMargin;
//console.log(xMarker, yMarker 3,markerVal/maxValue,originY);
ctx.fillText(markerVal, xMarker, yMarker 3, cSpace); // 文字
if (i > 0) {
drawLine(originX, yMarker, originX cWidth, yMarker);
}
}
// 绘制 x
ctx.textAlign = "center";
for (var i = 0; i < tobalBars; i ) {
var markerVal = dataArr[i][0];
var xMarker = parseInt(originX cWidth * (i / tobalBars) bMargin bWidth / 2);
var yMarker = originY 15;
ctx.fillText(markerVal, xMarker, yMarker, cSpace); // 文字
}
// 绘制标题 y
ctx.save();
ctx.rotate(-Math.PI / 2);
ctx.fillText("产 量", -canvas.height / 2, cSpace - 10);
ctx.restore();
// 绘制标题 x
ctx.fillText("年份", originX cWidth / 2, originY cSpace / 2 10);
};
//绘制柱形图
function drawBarAnimate(mouseMove) {
for (var i = 0; i < tobalBars; i ) {
var oneVal = parseInt(maxValue / totalYNomber);
var barVal = dataArr[i][1];
var barH = parseInt(cHeight * barVal / maxValue * ctr / numctr);
var y = originY - barH;
var x = originX (bWidth bMargin) * i bMargin;
drawRect(x, y, bWidth, barH, mouseMove); //高度减一避免盖住x轴
ctx.fillText(parseInt(barVal * ctr / numctr), x 15, y - 8); // 文字
}
if (ctr < numctr) {
ctr ;
setTimeout(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLineLabelMarkers();
drawBarAnimate();
}, speed);
}
}
//绘制方块
function drawRect(x, y, X, Y, mouseMove) {
ctx.beginPath();
ctx.rect(x, y, X, Y);
if (mouseMove && ctx.isPointInPath(mousePosition.x, mousePosition.y)) { //如果是鼠标移动的到柱状图上，重新绘制图表
ctx.fillStyle = "green";
} else {
ctx.fillStyle = gradient;
ctx.strokeStyle = gradient;
}
ctx.fill();
ctx.closePath();
}
}
goBarChart(
[[2007, 750], [2008, 425], [2009, 960], [2010, 700], [2011, 800], [2012, 975], [2013, 375], [2014, 775]]
)
</script>
</body>
</html>SVG案例
参考： 截图：
代码：
代码语言：javascript复制<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
</body>
</html>Zrender基本案例
参考：https://ecomfe.github.io/zrender-doc/public/api.html
效果：
流程： 引入 zrender 库 编写 div 容器 初始化 zrender 对象 初始化 zrender 绘图对象 调用 zrender add 方法绘图 代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
</head>
<body>
<div id="container" style="width: 800px;height: 800px;"></div>
<script>
var zr = zrender.init(document.getElementById('container'));
var rect = new zrender.Rect({
shape: {
x: 0,
y: 0,
width: 50,
height: 50
},
style: {
fill: 'red',
lineWidth: 0
}
});
var line = new zrender.Polyline({
shape: {
points:[
[100, 100],
[250, 75],
[300, 100]
]
},
style: {
stroke: 'blue',
lineWidth: 1
}
});
var circle = new zrender.Circle({
shape: {
cx: 200,
cy: 200,
r: 50
},
style: {
fill: 'red',
stroke: 'green',
lineWidth: 2
}
});
var point = new zrender.Polyline({
shape: {
points:[
[300, 300],
[301, 301]
]
},
style: {
stroke: 'red',
lineWidth: 1
}
});
zr.add(rect);
zr.add(line);
zr.add(circle);
zr.add(point);
</script>
</body>
</html>Echarts简介
官网介绍
1.官网地址：
https://echarts.apache.org/en/index.html https://echarts.apache.org/zh/index.html
2.介绍下官网：
看文档 知道如何下载 通过github下载 在dist目录下 echarts.js 示例 https://echarts.apache.org/examples/zh/index.html gallery资源 https://www.makeapie.com/explore.html#s
Echarts案例
https://echarts.apache.org/zh/tutorial.html 1.下载echarts.js到本地 2.然后在html文件中通过如下引入
代码语言：javascript复制<script src="echarts.min.js"></script>或通过cdn免下载引入
代码语言：javascript复制<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js"></script>3.使用 初始化一个具有宽和高的容器
代码语言：javascript复制<div id="main" style="width: 600px ;height:600px;"></div>在script中进行如下操作 初始化e’charts,绑定容器
代码语言：javascript复制<script>
// init echarts
var myid = document.getElementById("main");
var myecharts = echarts.init(myid);
// define option
// invoking function
</script>设置option,这里包括我们想要绘制的图形类型，数据，x,y轴信息等 在官网示例中找
代码语言：javascript复制 // define option
var option = {
title:{
text:"echarts 标题"
},
xAxis:{
data:['food','digital','dress','bags']
},
yAxis:{
},
series:{
type:"bar",
data:[100,120,90,150]
},
}将option传给myecharts实例就可以了
代码语言：javascript复制 //Call the function and pass the arguments
myecharts.setOption(option);展示如图
Echarts案例
参考：https://juejin.cn/post/7062254510311211044 http://ppchart.com/#/ https://www.isqqw.com/ http://analysis.datains.cn/finance-admin/index.html#/chartLib/all http://192.144.199.210/forum.php?mod=forumdisplay&fid=2
http://192.144.199.210:8080/editor/index.html?chart_id=q-C0rU0OSvu6ZqCW
1.Echarts样式主题，显示加载动画，resize
参考：https://echarts.apache.org/zh/theme-builder.html 主题：
下载js主题 https://echarts.apache.org/zh/theme-builder.html
下载的文件名称为，purple-passion.js，将js放入到工程的js目录下 js/purple-passion.js
html页面布局
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.js"></script>
<script src="./js/purple-passion.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var mydiv = document.getElementById('main')
// 初始化echarts 采用默认主题，canvas渲染
// var myChart = echarts.init(mydiv);
// 初始化echarts 采用不同的主题
// var myChart = echarts.init(mydiv,'purple-passion');
// 初始化echarts 采用不同的主题 采用svg渲染
var myChart = echarts.init(mydiv,'dark', {renderer: 'svg'});
// 显示加载页面
myChart.showLoading();
var app = {
xday: ["周1","周2","周3","周4","周5"],
yvalue: [10,20,30,30,25]
};
var option;
option = {
title: {
text: '数据加载示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: app.xday
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: app.yvalue
}]
}
myChart.setOption(option)
// 关闭加载动画
myChart.hideLoading();
// 监听窗口，动态调整echarts大小
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
</body>
</html>2.Echarts多系列
参考：
效果：
代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.js"></script>
<script src="./js/purple-passion.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myChart = echarts.init(document.getElementById("main"));
myChart.showLoading();
var option;
option = {
title: {
text: '多系列混合'
},
tooltip: {},
legend: {
show : true,
// data:['销量']
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度',]
},
yAxis: {},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
series: [ {
type: 'line',
data: [{
name: '一季度', value: 100
}, {
name: '二季度', value: 112
}, {
name: '三季度', value: 96
}, {
name: '四季度', value: 123
}]
}, {
type: 'pie',
center: ['65%', 60],
radius: 35,
data: [{
name: '一季度', value: 50
}, {
name: '二季度', value: 60
}, {
name: '三季度', value: 55
}, {
name: '四季度', value: 70
}]
},{
type: 'bar',
data: [{
name: '一季度', value: 79
}, {
name: '二季度', value: 81
}, {
name: '三季度', value: 88
}, {
name: '四季度', value: 72
}] ,
markPoint: {
data: [
{ type: 'max', name: "max value" },
{ type: 'min', name: "min value" }
],
}
}],
}
myChart.hideLoading();
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
</body>
</html>3.Echarts多系列多坐标轴
效果：
代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.js"></script>
<script src="./js/purple-passion.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myChart = echarts.init(document.getElementById("main"));
myChart.showLoading();
var option;
option={
title: {
text: '多系列多坐标轴'
},
tooltip: {},
legend: {
// data:['销量']
},
xAxis: {
data: ['一季度','二季度','三季度','四季度',]
},
yAxis: [{
type:'value'
},{
type:'value'
},
],
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataset:{
source: [
['一季度', 79, 1000, '分类1', 50],
['二季度', 81, 1120, '分类2', 60],
['三季度', 88, 960, '分类3', 55],
['四季度', 72, 1230, '分类4', 70],
]
},
series: [{
type: 'pie',
center: ['65%', 60],
radius: 35,
encode: { itemName: 3, value: 4 },
}, {
type: 'line',
encode: { x: 0, y: 2 },
yAxisIndex:0
}, {
type: 'bar',
encode: { x: 0, y: 1 },
yAxisIndex:1
}]
}
myChart.hideLoading();
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
</body>
</html>4.Echarts系列的设置
参考： https://echarts.apache.org/zh/option.html#series 效果
代码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/echarts.js"></script>
<script src="./js/purple-passion.js"></script>
</head>
<body>
<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myChart = echarts.init(document.getElementById("main"));
myChart.showLoading();
var option;
option = {
title: {
text: '系列设置'
},
tooltip: {},
legend: {
// data:['销量']
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度',]
},
yAxis: [{
type: 'value'
}, {
type: 'value'
},
],
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataset: {
source: [
['一季度', 79, 1000, '分类1', 50],
['二季度', 81, 1120, '分类2', 60],
['三季度', 88, 960, '分类3', 55],
['四季度', 60, 1230, '分类4', 70],
]
},
series: [{
type: 'bar',
encode: { x: 0, y: 1 },
yAxisIndex: 0,
// 显示最大最小标记
// https://echarts.apache.org/zh/option.html#series-bar.markPoint
// 标记点
markPoint: {
data: [
{ type: 'max', name: "max value" },
{ type: 'min', name: "min value" },
{ type: 'average', name: "average value" },
],
},
// https://echarts.apache.org/zh/option.html#series-bar.markLine
// 标记线
markLine: {
data: [
{ type: "average", name: "average" }
]
},
// https://echarts.apache.org/zh/option.html#series-bar.label
// 标签
label: {
show: true,
rotate: 0,
position: "inside",
},
// 柱宽度
barWidth: '20%',
}]
}
myChart.hideLoading();
myChart.setOption(option);
// 自适应
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
</body>
</html>5.调试盘 渐进色 高亮
效果
代码：
代码语言：javascript复制 <!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myChart = echarts.init(document.getElementById("main"));
myChart.showLoading();
var option;
option = {
title: {
text: '系列设置'
},
tooltip: {},
legend: {
// data:['销量']
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度',]
},
yAxis: [{
type: 'value'
}, {
type: 'value'
},
],
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
dataset: {
source: [
['一季度', 79, 1000, '分类1', 50],
['二季度', 81, 1120, '分类2', 60],
['三季度', 88, 960, '分类3', 55],
['四季度', 60, 1230, '分类4', 70],
]
},
// item项渐进色
itemStyle: {
color: {
type: 'line',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0, color: 'blue'
}, {
offset: 1, color: 'red'
}
]
},
},
// 强调渐进色
emphasis: {
itemStyle: {
color: {
type: 'line',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0, color: 'red'
}, {
offset: 1, color: 'pink'
}
]
},
}
},
series: [{
type: 'bar',
encode: { x: 0, y: 1 },
yAxisIndex: 0,
// 显示最大最小标记
// https://echarts.apache.org/zh/option.html#series-bar.markPoint
// 标记点
markPoint: {
data: [
{ type: 'max', name: "max value" },
{ type: 'min', name: "min value" },
{ type: 'average', name: "average value" },
],
},
// https://echarts.apache.org/zh/option.html#series-bar.markLine
// 标记线
markLine: {
data: [
{ type: "average", name: "average" }
]
},
// https://echarts.apache.org/zh/option.html#series-bar.label
// 标签
label: {
show: true,
rotate: 0,
position: "inside",
},
// 柱宽度
barWidth: '20%',
}]
}
myChart.hideLoading();
myChart.setOption(option);
// 自适应
window.addEventListener("resize", function () {
myChart.resize();
});
</script>6.各种组件
效果
代碼：
代码语言：javascript复制<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myChart = echarts.init(document.getElementById("main"));
myChart.showLoading();
var option;
option = {
// 标题
title: {
text: "titledemo",
subtext: "subtitle",
link: "https://www.baidu.com",
textStyle: {
color: "red"
},
subtextStyle: {
color: 'blue'
},
borderWidth: 5,
borderColor: "red",
borderRadius: 10,
top: 10,
left: 50,
right: 50,
bottom: 80,
},
// 提示：tooltip
tooltip: {
trigger: 'axis',
triggerOn: 'click',
formatter: function (args) {
return args[0].name " 數量為 :" args[0].data[1]
}
},
xAxis: {
data: ['一季度', '二季度', '三季度', '四季度',]
},
yAxis: [{
type: 'value'
}, {
type: 'value'
},
],
// 工具按钮：toolbox
toolbox: {
feature: {
saveAsImage: {},
dataView: {},
restore: {
},
dataZoom: {
},
magicType: {
type: ['bar', 'line']
}
}
},
// 图例 需要再series中添加name进行关联
legend: {
data: [{
name: '柱形',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'black'
}
}, 'line', 'pie']
},
dataset: {
source: [
['一季度', 79, 1000, '分类1', 50],
['二季度', 81, 1120, '分类2', 60],
['三季度', 88, 960, '分类3', 55],
['四季度', 60, 1230, '分类4', 70],
]
},
// item项渐进色
itemStyle: {
color: {
type: 'line',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0, color: 'blue'
}, {
offset: 1, color: 'red'
}
]
},
},
// 强调渐进色
emphasis: {
itemStyle: {
color: {
type: 'line',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{
offset: 0, color: 'red'
}, {
offset: 1, color: 'pink'
}
]
},
}
},
series: [{
type: 'bar',
name:"柱形",
encode: { x: 0, y: 1 },
yAxisIndex: 0,
// 显示最大最小标记
// https://echarts.apache.org/zh/option.html#series-bar.markPoint
// 标记点
markPoint: {
data: [
{ type: 'max', name: "max value" },
{ type: 'min', name: "min value" },
{ type: 'average', name: "average value" },
],
},
// https://echarts.apache.org/zh/option.html#series-bar.markLine
// 标记线
markLine: {
data: [
{ type: "average", name: "average" }
]
},
// https://echarts.apache.org/zh/option.html#series-bar.label
// 标签
label: {
show: true,
rotate: 0,
position: "inside",
},
// 柱宽度
barWidth: '20%',
}]
}
myChart.hideLoading();
myChart.setOption(option);
// 自适应
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
7.折线图设计-标记-线条-填充-间隙-缩放-堆叠
效果：
代码：
代码语言：javascript复制<!-- 容器 -->
<div id="main" style="width: 600px;height: 600px;"></div>
<!-- 写echarts代码 -->
<script>
var myCharts = echarts.init(document.getElementById("main"));
myCharts.showLoading()
var xDataArr = ['piter','tom','bill','li']
var yDataArr = [88,92,60,70]
var option = {
animition:true,
animationDuration:2000,
animationEasing:"bounceOut", // linear bounceOut
animationThreshold:4,
xAxis :{
data:xDataArr,
type:"category",
boundaryGap:false
},
yAxis :{
type:'value',
scale:true
},
series:[{
type:'line',
name:'score',
stack:'all',
data:yDataArr,
markPoint:{
data:[
{type:'max',name:"max value"},
{type:'min',name:"min value"}
],
},
markLine:{
data:[
{type:"average",name:"average"}
]
},
markArea:{
data:[
[{xAxis:'piter'},{xAxis:'tom'}],
[{xAxis:'bill'},{xAxis:'li'}]
]
},
smooth:true,
lineStyle:{
color:'green',
type:'solid',
},
areaStyle:{
color:'pink'
},
label:{
show:true,
rotate:75,
position:"inside",
},
barWidth:'20%',
},{
type:"line",
data:yDataArr,
stack:'all',
smooth:true,
areaStyle:{}
}
]
}
myCharts.hideLoading()
myCharts.setOption(option);
</script>8.地图实现
广东地图 https://blog.csdn.net/qq_27007423/article/details/113941441 中国地图 https://blog.csdn.net/ju__ju/article/details/104000887 datav json数据 http://datav.aliyun.com/tools/atlas/ 地图基本使用：
1.加载该区域的矢量地图数据: 2.通过异步获取数据，并echarts.registerMap(‘china’,ret)注册到全局对象中 3.指明geo配置下的type和map属性，roam属性 4.通过zoom放大区域 5.通过center定位中心点 6.geo结合series
地图结合散点图 1.给series下增加新的对象 2.准备好散点数据，设置给新对象的data 3.配置新对象的type type:effectScatter 4.散点图使用地图坐标系统 coordinateSystem:‘geo’ 5.让涟漪的效果更加明显 rippleEffect:{ scale:10}
效果如下：
代码：
代码语言：javascript复制<div id="main1" style="height: 600px;width: 600px;border: 1px solid red;"></div>
<script>
var airaData = [
{ name: '上海市', value: 9 },
{ name: '北京市', value: 12 },
{ name: '天津市', value: 12 },
{ name: '重庆市', value: 12 },
{ name: '黑龙江省', value: 14 },
{ name: '吉林省', value: 15 },
{ name: '辽宁省', value: 16 },
{ name: '河北省', value: 18 },
{ name: '内蒙古自治区', value: 18 },
{ name: '西藏自治区', value: 19 },
{ name: '新疆维吾尔自治区', value: 21 },
{ name: '宁夏回族自治区', value: 21 },
{ name: '青海省', value: 29 },
{ name: '江西省', value: 29 },
{ name: '甘肃省', value: 60 },
{ name: '陕西省', value: 22 },
{ name: '山西省', value: 23 },
{ name: '河南省', value: 24 },
{ name: '山东省', value: 24 },
{ name: '江苏省', value: 25 },
{ name: '浙江省', value: 25 },
{ name: '福建省', value: 25 },
{ name: '海南省', value: 25 },
{ name: '台湾省', value: 25 },
{ name: '广东省', value: 25 },
{ name: '广西壮族自治区', value: 26 },
{ name: '云南省', value: 26 },
{ name: '贵州省', value: 26 },
{ name: '四川省', value: 27 },
{ name: '湖南省', value: 27 },
{ name: '湖北省', value: 27 },
{ name: '浙江省', value: 28 },
{ name: '安徽省', value: 29 },
{ name: '澳门特别行政区', value: 229 },
{ name: '香港特别行政区', value: 273 },
{ name: '南海诸岛', value: 273 },
];
var scatterData = [{
value: [117.253042, 31.86119]
}, {
value: [100.253042, 30.86119]
}]
var myCharts1 = echarts.init(document.querySelector("#main1"))
// $.get('https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full',function(ret){
fetch('https://geo.datav.aliyun.com/areas/bound/geojson?code=100000_full')
.then(response => response.json())
.then(data => {
// ret = JSON.parse(ret.data)
console.log(data),
echarts.registerMap('china', data)
var option2 = {
geo: {
type: "map",
map: 'china',
roam: true, // 缩放
label: {
show: true
},
zoom: 1.2,//Initial scaling
center: [105, 36], //Center point longitude and latitude
},
series: [{
data: airaData,
geoIndex: 0,
type: 'map',
map: 'china',
// mapType: 'china'
},
{
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10,
color:"red", //涟漪图颜色
},
colorBy:"data",
}
],
visualMap: {
min: 0,
max: 200,
inRange: {
color: ['#f2c31a', '#24b7f2']
},
calcuable: true,
}
}
myCharts1.setOption(option2)
})
</script>9.航班图结合地图
效果：
代码：
代码语言：javascript复制<div id="main1" style="height: 600px;width: 600px;border: 1px solid red;"></div>
<script>
//document
// 1. 实例化对象
var myChart = echarts.init(document.getElementById("main1"));
// 2. 指定配置和数据
// 2. 指定配置和数据
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 XAData = [
[{ name: "西安" }, { name: "北京", value: 100 }],
[{ name: "西安" }, { name: "上海", value: 100 }],
[{ name: "西安" }, { name: "广州", value: 100 }],
[{ name: "西安" }, { name: "西宁", value: 100 }],
[{ name: "西安" }, { name: "拉萨", value: 100 }]
];
var XNData = [
[{ name: "西宁" }, { name: "北京", value: 100 }],
[{ name: "西宁" }, { name: "上海", value: 100 }],
[{ name: "西宁" }, { name: "广州", value: 100 }],
[{ name: "西宁" }, { name: "西安", value: 100 }],
[{ name: "西宁" }, { name: "银川", value: 100 }]
];
var YCData = [
[{ name: "拉萨" }, { name: "北京", value: 100 }],
[{ name: "拉萨" }, { name: "潍坊", value: 100 }],
[{ name: "拉萨" }, { name: "哈尔滨", value: 100 }]
];
var planePath =
"path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
//var planePath = 'arrow';
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i ) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
value: dataItem[1].value
});
}
}
return res;
};
var color = ["#fff", "#fff", "#fff"]; //航线的颜色
var series = [];
[
["西安", XAData],
["西宁", XNData],
["银川", YCData]
].forEach(function (item, i) {
series.push(
{
name: item[0] " Top3",
type: "lines",//It is used to draw the line data with the information about "from" and "to"
coordinateSystem:'geo',
zlevel: 1,
effect: {//The setting about the special effects of lines.
show: true,
period: 6,//The duration of special effect, which unit is second.
trailLength: 0.7,//The length of trail of special effect.
color: "red", //arrow箭头的颜色
symbolSize: 3 //The symbol size of special effect, which could be set as single number such as 10
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2 //The curveness of edge
}
},
data: convertData(item[1])
},
{
name: item[0] " Top3",
type: "lines",
zlevel: 2,
symbol: ["none", "arrow"],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] " Top3",
type: "effectScatter",
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke"
},
label: {
normal: {
show: true,
position: "right",
formatter: "{b}"
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
},
emphasis: {
areaColor: "#2B91B7"
}
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
}
);
});
var option = {
tooltip: {
trigger: "item",
formatter: function (params, ticket, callback) {
if (params.seriesType == "effectScatter") {
return "线路：" params.data.name "" params.data.value[2];
} else if (params.seriesType == "lines") {
return (
params.data.fromName
">"
params.data.toName
"<br />"
params.data.value
);
} else {
return params.name;
}
}
},
geo: {
map: "china",
label: {
emphasis: {
show: true,
color: "#fff"
}
},
roam: false,
// 放大我们的地图
zoom: 1,
itemStyle: {
normal: {
areaColor: "rgba(43, 196, 243, 0.42)",
borderColor: "rgba(43, 196, 243, 1)",
borderWidth: 1
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
series: series
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
</script>
