数据可视化知识点汇总
数据可视化
- canvas
- svg
-
- 项目矢量图svg
- Canvas与SVG的主要区别
- d3
- zrender
- three
- Antv
-
- Antv--g2
- g6
- L7
- Highcharts
- Echart
-
- 系列
- 组件
- 坐标系
- 样式
- 管理数据
-
- 维度
- 映射
- 移动端自适应
- 事件和行为
- 拖拽
- 自定义系列
- Echarts5新特性
- Echart VS Antv
- Echart VS Highcharts
- v-charts
- vue-echarts
- 百度地图
-
- http-server
- 基础
-
- 入门
- 异步加载
- 3D建筑/3D地球
- 控件
- 百度地图+Vue
- 高德地图
-
- 入门
- 图层
- 富文本编辑器
canvas
“画布”,像素的位图
- 编写canvas标签 添加默认宽高
<canvas id="canvas" width="800" height="800"></canvas>
- 获取到canvas对象
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
- 设置获取绘图属性
- 调用API
实现
<canvas id="canvas" width="800" height="800"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 矩形
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 50, 50);
// 线段
ctx.beginPath();
ctx.lineWidth = 1;
ctx.strokeStyle = "blue";
ctx.moveTo(100, 100);
ctx.lineTo(250, 75);
ctx.lineTo(300, 100);
ctx.stroke();
//绘制圆形
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "green";
ctx.fillStyle = "red";
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.stroke();
ctx.fill();
</script>
图片压缩
<input type="file" id="upload" />
<script>
const ACCEPT = ["image/gif", "image/jpeg"];
const MAXSIZE = 1024 * 1024 * 1024;
const upload = document.getElementById("upload");
// 转base64
function converImageToBase64(file, callback) {
let reader = new FileReader();
reader.addEventListener("load", function(e) {
// console.log(reader.result);
const base64Image = e.target.result;
callback && callback(base64Image);
reader = null; //内存回收
});
reader.readAsDataURL(file);
}
// 压缩
function compress(base64Image, callback) {
let maxW = 1024;
let maxH = 1024;
// 获取base64
// console.log(base64Image);
// 创建标签
const image = new Image();
image.src = base64Image;
// 图片宽高进行压缩
image.addEventListener("load", function(e) {
let ratio;
let needCompress = false;
if (maxW < image.naturalWidth) {
needCompress = true;
ratio = image.naturalWidth / maxW;
maxH = image.naturalHeight / ratio;
} else if (maxH < image.naturalHeight) {
needCompress = true;
ratio = image.naturalHeight / maxH;
maxW = image.naturalHeight / ratio;
}
if (!needCompress) {
maxW = image.naturalWidth;
maxH = image.naturalHeight;
}
document.body.appendChild(image);
// canvas 压缩 压缩尺寸/分辨率
const canvas = document.createElement("canvas");
canvas.setAttribute("id", "_compress_");
canvas.width = maxW;
canvas.height = maxH;
// canvas.style.visibility = "visible";
canvas.style.visibility = "hidden";
document.body.appendChild(canvas);
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, maxW, maxH);
// 压缩大小
ctx.drawImage(image, 0, 0, maxW, maxH);
// 压缩分辨率
const compressImage = canvas.toDataURL("image/jpeg", 0.9);
// console.log(compressImage);
// 创建image显示
callback && callback(compressImage);
canvas.remove();
image.remove();
});
// 输出base64
}
function uploadToServer(compressImage) {
console.log("发送给后端", compressImage);
}
upload.addEventListener("change", function(e) {
const [file] = e.target.files;
if (!file) {
upload.value = "";
return;
}
const {
type: fileType,
size: fileSize
} = file;
// 判断包含
// console.log(fileType);
if (!ACCEPT.includes(fileType)) {
alert("不支持");
upload.value = "";
return;
}
if (fileSize > MAXSIZE) {
alert("文件超出1mb");
upload.value = "";
return;
}
// 压缩文件
converImageToBase64(file, (base64Image) =>
compress(base64Image, uploadToServer)
);
});
</script>
svg
矢量图形
- 编写svg标签 添加默认宽高
- 编写svg绘图标签以及属性
实现
<svg width="800" height="800">
<!-- 矩形 -->
<rect
width="50"
height="50"
style="fill: red; stroke-width: 1px; stroke: #000;"
></rect>
<!-- 线段 -->
<line
x1="100"
y1="100"
x2="250"
y2="75"
style="stroke: blue; stroke-width: 1px;"
></line>
<line
x1="250"
y1="75"
x2="300"
y2="100"
style="stroke: blue; stroke-width: 1px;"
></line>
<!-- 圆形 -->
<circle
cx="200"
cy="200"
r="50"
stroke="green"
stroke-width="2"
fill="red"
></circle>
</svg>
项目矢量图svg
- viewport:svg可视区域
- viewBox:视区盒子,画布上绘制svg图形的坐标系统
- preserveAspectRatio 默认值：“xMidYMid meet”
当 viewport 和 viewBox 比例出现突兀。
- meet slice
meet : viewBox保持和viewport合适宽高比，svg将优先考虑压缩比较小的作为最终压缩比。
500/200=2.5 200/200 = 1 所以压缩比是1。
slice ：保持宽高比，不在viewport中的viewBox裁剪,优先考虑较大的宽高比。
500/200=2.5 200/200 = 1 所以压缩比是2.5。 - Min Max Min
xMid ： viewBox x视口的中心
YMid ： viewBox y视口中心 - preserveAspectRatio = “none”
不保存宽高比，根据viewport viewBox 宽高比计算显示
引用g id=“more”
- 其他：
currentColor：继承父级的颜色
stroke-dasharray:10; // 一段颜色 一段没有颜色
stroke-dashoffset:10; // 根据stroke-dasharray 右移
- 矢量图组件：
自定义：
html:
js:
根据传入的name 获取iconname 渲染
iconf引入：
然后自定义的组件 通过name引入 - 绘制动画
1、平面
transform="translate(10,10) rotate(30) skewX(30) skewY(30) scale(0.5)"
2、矩阵 线性计算
matrix(2 1 -1 2 50 0)
[2,-1,50] => 2*_x+(-1)_y+50 = x
[1,2,0] => 1_x+(-2)*_y+0 = y
顶点坐标：
[0,0] => [50,0]
[100,0] => [250,100]
[100,50] => [200,200]
[0,50] => [0,100]
3、@keyframes
@keyframes circle{
from{
stroke-dasharray:0 1131;
}
to{
stroke-dasharray:1131 1131;
}
}
.circle{
animation: circle 5s linear infinite;
}
- logo描边动画
1、选择logo
2、设置 stroke-dasharray 和 stroke-dashoffset
3、对stroke-dashoffset设置动画
.logo{
width: 100%;
height: 100%;
fill:none;
stroke:#333;
stroke-width: 8px;
stroke-dasharray: 5029.8291015625 ;
animation:logo 5s linear 1 ;
}
@keyframes logo {
0% {
stroke-dashoffset:5029.8291015625;
}
50% {
stroke-dashoffset:0;
}
75%{
fill:red;
}
100%{
fill:burlywood
}
}
- SMIL动画
不需要css js
1、
attributeName:改变的属性； to：变成啥样子； begin：动画开始时间；attributeType XML(获取的属性是当前的dom) css(监听的属性是css);
<svg width="200px" hegith="200px" >
<rect x="0" y="0" fill="red" width="100" height="50" >
<set attributeName="x" attributeType="XML" to="10" begin="1s">set>
<set attributeName="x" attributeType="XML" to="20" begin="2s">set>
<set attributeName="fill" attributeType="XML" to="blue" begin="3s">set>
rect>
svg>
2、
repeatCount=“indefinite” 动画无数次 repeatCount=“1” 动画一次
fill=“freeze” 动画结束后停留最后 fill=“remove” 动画结束后回到最初
<svg width="200px" hegith="200px" >
<circle cx="0" cy="0" r="30" fill="blue" stroke="black" stroke-width="1">
<animate attributeName="cx" attributeType="css" from="0" to="100" dur="5s" repeatCount="1" fill="freeze">animate>
<animate attributeName="cy" attributeType="css" from="0" to="100" dur="5s" repeatCount="1" fill="freeze">animate>
circle>
svg>
3、
4、
type=“scale” 要设置动画的属性
from=“1” to=“2” 设置动画的初始结束
<animateTransform attributeName="transform" attributeType="XML" begin="0" dur="5s" type="scale" from="1" to="2" repeatCount="1" fill="freeze">animateTransform>
5、
M Z 起止
M10 10 起点 10 10
L110 10 画线 110 10
M10 10 L110 10 L110 110 L10 110 Z : (10,10) (110,10) (110,110) (10.110)的闭合线段
<div class="container">
<svg width="200px" hegith="200px" >
<rect x="0" y="0" fill="red" width="10" height="10" >
- 蒙板 mask
mask定义蒙板，并且在蒙板里面设置一个相同的矩形green
blue:设置为蒙板，
外层颜色的颜色=green+bule,底层颜色是red
外出蒙板不设置颜色，为下面的
<div class="container">
<svg width="400" height="400">
<defs>
<mask id="test-mask">
<rect x="5" y="5" width="390" height="390" fill="green" >rect>
<circle r="50" cx="50" cy="50" />
mask>
defs>
<rect x="5" y="5" width="390" height="390" fill="red" >rect>
<rect x="5" y="5" width="390" height="390" fill="blue"
mask="url(#test-mask)"
>rect>
svg>
div>
Canvas与SVG的主要区别
- 从图像类别区分，Canvas是基于像素的位图，而SVG却是基于矢量图形。可以简单的把两者的区别看成photoshop与illustrator的区别。
- 从渲染模式上来说，Canvas属于 即时模式，而SVG则是 保留模式 。
- 从结构上说，Canvas没有图层的概念，所有的修改整个画布都要重新渲染，而SVG则可以对单独的标签进行修改。
- 从操作对象上说，Canvas是基于HTML canvas标签，通过宿主提供的Javascript API对整个画布进行操作的，而SVG则是基于XML元素的。
- 从功能上讲，SVG发布日期较早，所以功能相对Canvas比较完善。
- 关于动画，Canvas更适合做基于位图的动画，而SVG则适合图表的展示。
- 从搜索引擎角度分析，由于svg是有大量标签组成，所以可以通过给标签添加属性，便于爬虫搜索。
d3
由数据来决定绘图流程的程序设计模型
D3 是一个JavaScript的函数库，是用来做数据可视化的。
- 引入d3库
- d3.select 选择集合
D3数据绑定案例
<p>vue</p>
<p>react</p>
<p>agular</p>
<button id="datum">datum</button>
<button id="data">data</button>
<script src="https://d3js.org/d3.v5.js"></script>
<script>
const body = d3.select("body");
const p = body.selectAll("p");
document.getElementById("datum").addEventListener("click", function(e) {
doDatum();
});
document.getElementById("data").addEventListener("click", function(e) {
doData();
});
function doDatum() {
const str = "TTT";
p.datum(str); //p标签内容修改
p.text(function(d, i) {
console.log(d, i);
return `${d}-${i}`;
});
}
function doData() {
const dataset = ["vue", "react", "agular"];
p.data(dataset).text(function(d, i) {
console.log(d, i);
return `${d}-${i}`;
});
}
</script>
zrender
Zrender是一个全新的轻量级Canvas类库
echarts是基于zrender进行封装的。
- 引入zrender库
- 写div容器
- 初始化zrender绘图对象
const zr = zrender.init(document.getElementById("container")); - 调用zrender add方法绘图
zr.add(rect);
实现
<div id="container" style="width: 800px; height: 800px;"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zrender.js"></script>
<script>
const zr = zrender.init(document.getElementById("container"));
// 矩形
const rect = new zrender.Rect({
shape: {
x: 0,
y: 0,
width: 50,
height: 50,
},
style: {
fill: "red",
lineWidth: 0,
},
});
// 线段
const line = new zrender.Polyline({
shape: {
points: [
[100, 100],
[250, 75],
[300, 100],
],
},
style: {
stroke: "blue",
lineWidth: 1,
},
});
// 圆形
const circle = new zrender.Circle({
shape: {
cx: 200,
cy: 200,
r: 50,
},
style: {
fill: "red",
stroke: "green",
lineWidth: 2,
},
});
// 点
const point = new zrender.Polyline({
shape: {
points: [
[300, 300],
[300, 301],
],
},
style: {
stroke: "red",
lineWidth: 1,
},
});
zr.add(rect);
zr.add(line);
zr.add(circle);
zr.add(point);
</script>
three
运行在浏览器中的 3D 引擎（基于WebGL的API的封装)
矩形3d旋转
WebGL API：只能会点、线、三角形
1、获取顶点坐标
2、图元装配（即画出一个个三角形）
3、光栅化（生成片元，即一个个像素点）
three：
将webGL基于光栅化的2D API，封装成了我们人类能看懂的 3D API。
<html>
<head>
<title>My first three.js apptitle>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%;
}
style>
head>
<body>
<script src="https://threejs.org/build/three.js">script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00,
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
script>
body>
html>
Antv
Antv–g2
数据驱动，高度易用，可扩展的可视化图形语法。
- 引入js库
- 渲染的容器
- 准备数据
- 获取容器DOM对象
- 初始化G2对象
- render绘画
<div id="g2-chart">div>
<script src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.js">script>
<script>
const data = [{
year: "1991",
value: 3,
}, {
year: "1992",
value: 4,
}, {
year: "1993",
value: 3.5,
}, {
year: "1994",
value: 5,
}, {
year: "1995",
value: 4.9,
}, {
year: "1996",
value: 6,
}, {
year: "1997",
value: 7,
}, {
year: "1998",
value: 9,
}, {
year: "1999",
value: 13,
}, ];
const chartDom = document.getElementById("g2-chart");
const line = new G2Plot.Line(chartDom, {
title: {
visible: true,
text: "这是一个基础折线图",
},
description: {
visible: true,
text: "副标题",
},
data,
xField: "year",
yField: "value",
point: {
visible: true,
size: 5,
color: "#fff",
style: {
stroke: "#fe7407",
lineWidth: 1,
fillOpacity: 0.6,
},
},
label: {
visible: true,
},
color: "#fe7407",
yAxis: {
formatter: (v) => {
return `${v}k`;
},
},
});
line.render();
script>
g6
便捷的关系数据可视化引擎与图分析工具。
- 引入js库
- 编写渲染DOM
- 准备渲染数据
- 获取渲染DOM元素
- 初始化G6图形对象
- G6添加数据
- 调用render完成渲染
<div id="g6-chart">div>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.5.10/dist/g6.min.js">script>
<script>
const data = {
nodes: [{
id: "node1",
x: 100,
y: 200,
label: "起始点",
size: 60,
labelCfg: {
// position: "left",
style: {
fontSize: 12,
fill: "#FFF",
},
},
style: {
fill: "#ff0000",
stroke: "#888",
lineWidth: 1,
},
}, {
id: "node2",
x: 300,
y: 200,
label: "目标1",
size: 80,
labelCfg: {
// position: "left",
style: {
fontSize: 12,
fill: "#FFF",
},
},
style: {
fill: "#000",
stroke: "#888",
lineWidth: 1,
},
}, {
id: "node3",
x: 500,
y: 200,
label: "目标2",
size: 100,
labelCfg: {
// position: "left",
style: {
fontSize: 12,
fill: "#FFF",
},
},
style: {
fill: "blue",
stroke: "#888",
lineWidth: 1,
},
}, {
id: "node4",
x: 300,
y: 400,
label: "目标4",
size: 100,
labelCfg: {
// position: "left",
style: {
fontSize: 12,
fill: "#FFF",
},
},
style: {
fill: "blue",
stroke: "#888",
lineWidth: 1,
},
}, ], // 所有的点
edges: [{
source: "node1",
target: "node2",
label: "连接线1",
}, {
source: "node2",
target: "node3",
label: "连接线2",
}, {
source: "node3",
target: "node4",
label: "连接线3",
}, ], // 所有的边线
};
const graph = new G6.Graph({
container: "g6-chart", // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
width: 800, // Number，必须，图的宽度
height: 500, // Number，必须，图的高度
});
graph.data(data);
graph.render();
script>
L7
高性能/高渲染质量的地理空间数据可视化框架。
- 引入js库
- 编写渲染DOM
- 初始化地图对象L7 Scene（ L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持高德地图和 MapBox 两种）
- 请求数据
- 数据清晰
- 初始化绘图对象 PointLayer
- 调用L7绘图
<div id="L7-chart">div>
<script src="https://unpkg.com/@antv/l7">script>
<script>
// 地图
const scene = new L7.Scene({
id: "L7-chart",
map: new L7.GaodeMap({
style: "dark", // 样式URL
center: [120.19382669582967, 30.258134],
pitch: 0,
zoom: 4,
token: "高德地图API token",
}),
});
// 点图层
scene.on("loaded", () => {
fetch(
"https://gw.alipayobjects.com/os/basement_prod/337ddbb7-aa3f-4679-ab60-d64359241955.json"
)
.then((res) => res.json())
.then((data) => {
data.features = data.features.filter((item) => {
return item.properties.capacity > 800;
});
const pointLayer = new L7.PointLayer({})
.source(data)
.shape("circle")
.size("capacity", [0, 16])
.color("capacity", [
"#34B6B7",
"#4AC5AF",
"#5FD3A6",
"#7BE39E",
"#A1EDB8",
"#CEF8D6",
])
.active(true)
.style({
opacity: 0.5,
strokeWidth: 0,
});
scene.addLayer(pointLayer);
});
});
script>
Highcharts
纯 JavaScript 编写的 HTML5 图表库。
- 引入 Highcharts
- 初始化图表容器 DOM
- 图表配置
- 图表初始化函数 指定DOM + 配置
<div id="container" style="width: 600px;height:400px;">div>
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js">script>
<script>
// 图表配置
var options = {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' // 标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] // x 轴分类
},
yAxis: {
title: {
text: '吃水果个数' // y 轴标题
}
},
series: [{ // 数据列
name: '小明', // 数据列名
data: [1, 0, 4] // 数据
}, {
name: '小红',
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart('container', options);
script>
Echart
一个基于 JavaScript 的开源可视化图表库
由zrender发展过来的
- 引入 ECharts
- 具备高宽的 DOM 容器
- echarts.init 方法初始化一个 echarts 实例
- 书写图表配置项目和数据
- 通过 setOption 方法生成一个简单的柱状图
<script src="echarts.min.js">script>
<div id="main" style="width: 600px;height:400px;">div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
script>
系列
用于创建多图表。例如 一个图表包含柱状图 折线图 和饼图。
一组数值以及他们映射成的图。
一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
组件
用于是否显示某个组件，比如tooltip（提示框组件）
在系列之上，echarts 中各种内容，被抽象为“组件”。
xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）
坐标系
坐标系用于布局图，以及显示数据的刻度等等
样式
- 颜色主题：
‘light’ 为主题颜色
var chart = echarts.init(dom, ‘light’);
可以到调色板自定义颜色。 - 代码修改：
系列单个样式：itemStyle:阴影、透明度、颜色、边框颜色、边框宽度样式。
系列的文本设置在 label.textStyle。
背景色全局的： option 下设置 backgroundColor。
文本的样式全局：option 下设置textStyle。
标签的视觉引导线；labelLine.lineStyle。
明暗度的变化：visualMap。
管理数据
维度
当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。
维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。
可以使用单独的 dataset.dimensions 或者 series.dimensions来定义。
var option1 = {
dataset: {
dimensions: [
{name: 'score'},
// 可以简写为 string，表示维度名。
'amount',
// 可以在 type 中指定维度类型。
{name: 'product', type: 'ordinal'}
],
source: [...]
},
...
};
var option2 = {
dataset: {
source: [...]
},
series: {
type: 'line',
// 在系列中设置的 dimensions 会更优先采纳。
dimensions: [
null, // 可以设置为 null 表示不想设置维度名
'amount',
{name: 'product', type: 'ordinal'}
]
},
...
};
映射
设定维度，使用 encode 来做映射
var option = {
// 维度
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis: {},
yAxis: {type: 'category'},
series: [
{
type: 'bar',
// 映射
encode: {
// 将 "amount" 列映射到 X 轴。
x: 'amount',
// 将 "product" 列映射到 Y 轴。
y: 'product'
}
}
]
};
移动端自适应
类似 CSS Media Query 的自适应能力
media: [ // 这里定义了 media query 的逐条规则。
{
query: {...}, // 这里写规则。
option: { // 这里写此规则满足下的option。
legend: {...},
...
}
},
{
query: {...}, // 第二个规则。
option: { // 第二个规则对应的option。
legend: {...},
...
}
},
{ // 这条里没有写规则，表示『默认』，
option: { // 即所有规则都不满足时，采纳这个option。
legend: {...},
...
}
}
]
事件和行为
在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件。
所有的鼠标事件包含参数 params,可以区分鼠标点击
// 处理点击事件并且跳转到相应的百度搜索页面
myChart.on('click', function (params) {
window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
});
拖拽
- 声明一个 graphic 组件
- 里面有若干个 type 为 ‘circle’ 的 graphic 节点。
- 用 map 方法遍历 data 的每项，为每项生成一个圆点。
- 使用了 convertToPixel 这个 API 来得到每个圆点的位置。
- 属性让圆点不可见
- 属性圆点可以被拖拽
- 圆点在最上方，能覆盖住图的圆点
- 加上拖拽响应的事件
- 使用了 convertFromPixel 这个 API
- 根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。
- 监听resize，对每个拖拽圆点重新计算位置，并用 setOption 更新。
自定义系列
renderItem 函数提供了两个参数：
params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。
api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。
- 开发者自定义的图形元素渲染逻辑，是通过书写 renderItem 函数实现的
- renderItem，返回一个（或者一组）图形元素定义
- 图形元素定义 中包括图形元素的类型、位置、尺寸、样式等。
Echarts5新特性
- 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing）
- 自定义系列动画，标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果
- 重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。
- 提供了多种新的标签功能，让密集的标签能清晰显示、准确表意；通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。
- 时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。
- 提示框的样式进行了优化，通过对字体样式，颜色的调整，指向图形的箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。
这些功能可以帮助避免文字过于密集影响可读性。 - 对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。
- 扇形圆角
- 性能提升,脏矩形渲染
- 数据集,加强了数据集的数据转换能力,如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。
- 国际化,动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包。
- TypeScript 重构
- 视觉障碍人士也能平等了解图表传递的信息。ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。
- 修改引入方式它可以最大程度的利用打包工具 tree-shaking 的能力：
import * as echarts from 'echarts/core'; - v5 不再支持 IE8 浏览器。
Echart VS Antv
Antv:文档好
Antv：产品拆分清晰
Echart : 社区强大
Echart ：使用广泛
Echart VS Highcharts
Highcharts:兼容性更好ie6 E:ie8
Highcharts:文档会更好
Highcharts:收费
Highcharts:svg
v-charts
element官方：基于 Vue2.0 和 echarts 封装的 v-charts 图表组件
- 安装：npm i v-charts echarts -S
- 完整引入/按需引入
- 以组件的形式使用v-charts，组件名称为图表，属性为图表配置项目
<template>
<ve-line :data="chartData" :settings="chartSettings">ve-line>
template>
<script>
export default {
data () {
this.chartSettings = {
labelMap: {
PV: '访问用户',
Order: '下单用户'
}
}
return {
chartData: {
columns: ['date', 'PV', 'Order'],
rows: [
{ 'date': '2018-05-22', 'PV': 32371, 'Order': 19810 },
{ 'date': '2018-05-23', 'PV': 12328, 'Order': 4398 },
{ 'date': '2018-05-24', 'PV': 92381, 'Order': 52910 }
]
}
}
}
}
script>
vue-echarts
百度echarts官方提供的echarts基于 Vue.js开发的组件
- npm install echarts vue-echarts
- 全局/按需引入
- 注册组件并使用
<template>
<v-chart :options="polar"/>
template>
<style>
/**
* 默认尺寸为 600px×400px，如果想让图表响应尺寸变化，可以像下面这样
* 把尺寸设为百分比值（同时请记得为容器设置尺寸）。
*/
.echarts {
width: 100%;
height: 100%;
}
style>
<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/polar'
export default {
components: {
'v-chart': ECharts
},
data () {
let data = []
for (let i = 0; i <= 360; i++) {
let t = i / 180 * Math.PI
let r = Math.sin(2 * t) * Math.cos(2 * t)
data.push([r, i])
}
return {
polar: {
title: {
text: '极坐标双数值轴'
},
legend: {
data: ['line']
},
polar: {
center: ['50%', '54%']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
min: 0
},
series: [
{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
data: data
}
],
animationDuration: 2000
}
}
}
}
script>
百度地图
http-server
- 安装：npm install http-server -g
- 使用，控制台在找到地址后，直接使用命令http-server
- 地图开启服务使用
基础
- DOM容器
- 创建地图实例new BMapGL.Map(“container”);
入门
<style type="text/css">
#container {
width: 90%;
height: 90%;
}
// 隐藏logo
.anchorBL {
display: none;
}
style>
<div id="container">div>
<script
type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"
>script>
<script>
var map = new BMapGL.Map("container");
// 创建点坐标
var point = new BMapGL.Point(116.404, 39.915);
// 设置坐标点和地图显示大小
map.centerAndZoom(point, 15);
// 滚轮
map.enableScrollWheelZoom(true);
script>
异步加载
- window.onload 页面加载后调用loadJScript
- loadJScript 用于 创建script标签
- script src 绑定回调函数callback callback绑定在window上，
- 执行回调函数进行初始化
<div id="container">div>
<script>
//百度地图API功能
// 挂载在window上
function init() {
var map = new BMap.Map("container"); // 创建Map实例
var point = new BMap.Point(116.404, 39.915); // 创建点坐标
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(); //启用滚轮放大缩小
}
// 需要时候，下载地图api
// 使用script，配合window.onload在页面加载后创建标签
// 在src后加入callback=init，进行初始化操作
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=init";
document.body.appendChild(script);
}
// 页面加载完之后
window.onload = loadJScript; //异步加载地图
script>
3D建筑/3D地球
使用BMapGL，并开启服务器。
BMapGL比Bmap内容丰富，更多的3D效果。
var map = new BMapGL.Map("container");
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 8);
// 滚轮
map.enableScrollWheelZoom(true);
// 旋转 3d建筑
var heading = 0;
map.setHeading(heading); //设置地图旋转角度
map.setTilt(73); //设置地图的倾斜角度
setInterval(() => {
heading++;
map.setHeading(heading);
}, 500);
//3d地球
map.setMapType(BMAP_EARTH_MAP);
控件
使用BMapGL，并开启服务器。
// 隐藏logo
.BMap_stdMpZoom {
display: inline-block;
}
var map = new BMapGL.Map("container", {
// 限制放大缩小
minZoom: 8,
maxZoom: 12,
enableAutoResize: true,
});
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 8);
// 滚轮
map.enableScrollWheelZoom(true);
// 控件 缩放
var zoomCtrl = new BMapGL.ZoomControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT,
// 控件位移
offset: new BMapGL.Size(15, 15),
});
map.addControl(zoomCtrl);
map.addEventListener("zoomstart", function () {
console.log("开始", map.getZoom());
});
map.addEventListener("zoomend", function () {
console.log("结束", map.getZoom());
});
// 控件 比例
var scaleCtrl = new BMapGL.ScaleControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
offset: new BMapGL.Size(15, 15),
});
map.addControl(scaleCtrl);
百度地图+Vue
vue接入百度地图.
高德地图
入门
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=密钥">script>
<style>