Echarts
Echarts是一个基于JavaScript的开源可视化库，可以用于创建各种复杂的数据可视化图表。Echarts提供了一系列API，可以方便地操作数据和图表，实现各种数据可视化效果。
绘制图表的步骤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
ECharts 渲染原理
ECharts的渲染原理主要分为两个阶段：布局计算和绘制渲染。
- 布局计算阶段
在布局计算阶段，ECharts会根据option配置项中的各种属性和数据，计算出图表的布局和各个组件的位置和大小。具体来说，ECharts会进行以下计算：
- 计算图表的大小和位置，包括画布大小、图表边距、坐标轴位置等。
- 计算各个组件的位置和大小，包括标题、图例、坐标轴、系列等组件。
- 计算数据的范围和刻度，包括坐标轴的数据范围、刻度间隔、标签等。
- 绘制渲染阶段
在绘制渲染阶段，ECharts会根据布局计算阶段的结果，使用Canvas或SVG等技术，将图表的各个组件和数据绘制出来。具体来说，ECharts会进行以下操作：
- 绘制背景和边框，包括画布背景、图表边框等。
- 绘制各个组件，包括标题、图例、坐标轴、系列等组件。
- 绘制数据，包括折线、柱状、饼图等不同类型的数据。
- 添加交互和动画效果，包括鼠标事件、数据筛选、数据动画等。
需要注意的是，ECharts的渲染原理是基于浏览器的Canvas或SVG技术实现的，因此在使用ECharts时，需要确保浏览器支持Canvas或SVG技术，并且需要注意图表的性能和兼容性问题。同时，ECharts还提供了WebGL渲染和Canvas2D渲染两种渲染方式，可以根据具体情况选择合适的渲染方式。ECharts 最开始时一直都是使用 Canvas 绘制图表。直到 ECharts v4.0 版本，才发布支持 SVG 渲染器。SVG 和 Canvas 这两种使用方式在技术上是有很大的差异的，EChart能够做到同时支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现。
ZRender 是二维轻量级的绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。因此，Echarts 可以轻松的互换SVG 渲染器 和 Canvas 渲染器。
// 引入 ECharts
import echarts from 'echarts';
// 获取需要渲染图表的 DOM 元素
const chartDom = document.getElementById('chart');
// 初始化图表
const myChart = echarts.init(chartDom, null, {
renderer: 'svg' // 设置渲染方式为 SVG
});
// 设置图表配置项和数据
const option = {
// ...
};
// 将配置项和数据传入图表实例中
myChart.setOption(option);
在初始化图表时，可以通过第三个参数传入一个对象来设置渲染方式。其中，renderer 属性用于设置渲染方式，可以设置为 'canvas' 或 'svg'。在这里，我们将其设置为 'svg'，即可使用 SVG 渲染图表。
认识option配置项
在Echarts中，option是用于配置图表的一个对象，包含了图表的各种配置项。以下是option对象中常用的一些配置项：
title：图表的标题，包括主标题和副标题。tooltip：提示框组件，用于显示数据项的详细信息。legend：图例组件，用于展示不同系列的标记和名称。grid：直角坐标系内绘图网格，用于控制图表的布局和间距。xAxis和yAxis：直角坐标系的横轴和纵轴，用于控制坐标轴的样式和数据范围。series：系列列表，用于定义不同系列的数据和样式。toolbox：工具箱组件，包括导出图片、数据视图、动态类型切换等工具。dataZoom：数据区域缩放组件，用于控制数据的缩放和滚动。visualMap：视觉映射组件，用于将数据映射到颜色、大小等视觉元素上。
Grid网格配置
Grid组件是ECharts中的一个基础组件，用于控制直角坐标系的位置、大小以及刻度等
option = {
// ... 其他配置项
grid: {
left: '3%', // 网格左侧距离容器的距离
right: '4%', // 网格右侧距离容器的距离
bottom: '3%', // 网格底部距离容器的距离
containLabel: true // 是否包含坐标轴标签
},
xAxis: {
// ... x 轴配置项
},
yAxis: {
// ... y 轴配置项
},
series: [{
// ... 数据系列配置项
}]
};
left：Grid组件离容器左侧的距离。right：Grid组件离容器右侧的距离。bottom：Grid组件离容器底部的距离。containLabel：是否包含坐标轴的刻度标签。show：来控制Grid组件的显示。
坐标系配置
ECharts中的坐标系配置包括直角坐标系、极坐标系、地图和3D坐标系等。不同类型的坐标系具有不同的配置项，但它们都有一些共同的配置项，例如xAxis、yAxis和grid等
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在这个示例中，我们创建了一个直角坐标系，并使用xAxis和yAxis配置了坐标轴。具体来说，我们将xAxis的类型设置为category，并设置了坐标轴的刻度标签。我们将yAxis的类型设置为value，表示该坐标轴的值为数值类型。我们还使用grid配置了直角坐标系的位置和大小。
ECharts中的xAxis选项用于配置直角坐标系的横轴。以下是xAxis选项的一些常用配置：
type：坐标轴类型- 可选值为
value、category、time、log等。
- 可选值为
data：坐标轴刻度标签的内容，类型为数组。name：坐标轴名称。nameLocation：坐标轴名称的位置，可选值为start、middle、end。nameTextStyle：坐标轴名称的样式。axisLabel：坐标轴刻度标签的样式。axisLine：坐标轴轴线的样式。axisTick：坐标轴刻度线的样式。splitLine：坐标轴分隔线的样式。
ECharts中的series选项用于配置数据系列，例如折线图、柱状图、散点图等。以下是series选项的一些常用配置：
type：数据系列的类型，可选值为line、bar、scatter等。name：数据系列的名称。data：数据系列的数据，类型为数组。symbol：数据点的图形，可选值为circle、rect、triangle等。symbolSize：数据点的大小。itemStyle：数据点的样式。label：数据标签的样式。lineStyle：线条的样式（仅适用于折线图和散点图）。barWidth：柱状图的宽度（仅适用于柱状图）。barGap：柱状图之间的间隔（仅适用于柱状图）。barCategoryGap：同一系列的柱状图之间的间隔（仅适用于柱状图）。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: { // 数据点的样式
color: '#3398DB'
},
label: { // 数据标签的样式
show: true,
position: 'top',
color: '#333'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
ECharts中的series选项可以通过emphasis属性来配置数据系列的高亮样式。以下是emphasis属性的一些常用配置：
itemStyle：高亮时数据点的样式。label：高亮时数据标签的样式。lineStyle：高亮时线条的样式（仅适用于折线图和散点图）。areaStyle：高亮时区域的样式（仅适用于堆叠区域图）。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: {
// 数据点的样式
color: '#3398DB'
},
label: {
// 数据标签的样式
show: true,
position: 'top',
color: '#333'
},
emphasis: {
// 高亮时的样式
itemStyle: {
color: '#FFCC33'
},
label: {
color: '#333'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
标题、图例、提示配置
ECharts中的标题、图例和提示分别对应着title、legend和tooltip选项。以下是它们的一些常用配置：
- title：用于配置标题。
text：标题的文本内容。subtext：副标题的文本内容。left：标题的水平位置。top：标题的垂直位置。textStyle：标题的样式。
- legend：用于配置图例。
data：图例的数据，类型为数组。left：图例的水平位置。top：图例的垂直位置。textStyle：图例的样式。
- tooltip：用于配置提示框。
trigger：提示框的触发方式，可选值为axis、item、none。axisPointer：坐标轴指示器的配置。formatter：提示框的内容格式化函数。
柱形图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: { // 数据点的样式
color: '#3398DB'
},
label: { // 数据标签的样式
show: true,
position: 'top',
color: '#333'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: [120, 200, 150, 80, 70, 110, 130],
itemStyle: { // 数据点的样式
color: '#3398DB'
},
label: { // 数据标签的样式
show: true,
position: 'top',
color: '#333'
},
lineStyle: { // 线条的样式
color: '#3398DB'
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
饼图
option = {
series: [{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
itemStyle: { // 数据项的样式
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
地图绘制
ECharts 可以使用 GeoJSON 格式的数据作为地图的轮廓，可以获取第三方的 GeoJSON 数据注册到 ECharts 中：
- [Natural Earth](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)：提供全球各种地理信息数据，包括国家、地区、城市、河流、湖泊等。
- [GeoJSON.io](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)：提供在线编辑和创建GeoJSON数据的工具，可以手动绘制地图或上传现有的地图数据。
- [OpenStreetMap](vscode-file://vscode-app/Applications/Visual Studio Code - Insiders.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)：提供全球各种地理信息数据，包括道路、建筑物、公园、商店等。
- [阿里云数据可视化平台](DataV.GeoAtlas地理小工具系列 (aliyun.com))：生成范围与边界。
要在ECharts中使用GeoJSON数据，您可以使用geo组件来加载和显示数据。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
// https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json let china = {}
<script src="china.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script>
echarts.registerMap('china', china);
let myChart = echarts.init(document.getElementById('main'));
// 方式一
//let option = {
// geo: {
// map: "china"
// }
//};
// 方式二
let option = {
series: [
{
type: 'map',
map: 'china'
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
要在ECharts中对地图的区域进行着色，您可以使用itemStyle配置项。
let option = {
geo: {
map: "china",
itemStyle: {
areaColor: "red", // 地图区域的颜色
borderColor: "blue" // 边缘颜色
},
emphasis: {
itemStyle: {
areaColor: "#ccc"
},
label: {
show: true
}
}
}
};
visualMap是ECharts中的一个组件，用于在图表中展示数据的视觉映射。它可以将数据映射到颜色、大小、透明度等视觉元素上，帮助用户更直观地理解数据。
let option = {
tooltip: {
show: true
},
series: [
{
type: 'map',
map: 'china',
itemStyle: {
areaColor: "#87939d",
borderColor: "white"
},
emphasis: {
itemStyle: {
areaColor: "#ccc"
},
label: {
show: true
}
},
data: [
{name: '山西省', value: 100},
{name: '北京市', value: 12},
{name: '天津市', value: 431},
{name: '上海市', value: 322},
{name: '重庆市', value: 123},
{name: '河北省', value: 123},
]
}
],
visualMap: [
{
left: '30%',
bottom: '30%',
seriesIndex: 0,
inRange: {
color: ['#729bb6', '#006edd']
},
}
]
};
常见 API
echarts
echarts.init(dom, theme)：初始化一个ECharts实例，dom参数是一个DOM元素，theme参数是一个主题对象，可选。echarts.dispose(dom)：销毁一个ECharts实例，dom参数是一个DOM元素。echarts.getInstanceByDom(dom)：根据一个DOM元素获取对应的ECharts实例。echarts.registerMap(mapName, geoJson, specialAreas)：注册一个地图，mapName参数是地图的名称，geoJson参数是地图的GeoJSON数据，specialAreas参数是地图的特殊区域，可选。echarts.getMap(mapName)：获取一个已注册的地图，mapName参数是地图的名称。echarts.convertToPixel(coordinateSystem, value)：将坐标系上的值转换为像素坐标，coordinateSystem参数是坐标系对象，value参数是坐标系上的值。echarts.convertFromPixel(coordinateSystem, pixel)：将像素坐标转换为坐标系上的值，coordinateSystem参数是坐标系对象，pixel参数是像素坐标。
echartsInstance
echartsInstance. setOption(opts)：设置图表实例的配置项以及数据，万能接口。echartsInstance.resize: 是一个用于调整图表大小的方法。当图表所在的容器大小发生变化时，可以调用resize方法来重新绘制图表。echartsInstance. showLoading()、echartsInstance. hideLoading()：显示和隐藏加载动画效果。
响应式图表
window.addEventListener('resize', function () {
// 调用resize方法重新绘制图表
myChart.resize();
});
轮播效果
dispatchAction是一个用于触发图表行为的方法，可以通过调用该方法来实现图表的交互效果。以下是一个示例，展示如何在ECharts中使用dispatchAction
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 配置选项
var option = {
// ...
};
// 设置配置项并显示图表
myChart.setOption(option);
let index = 0;
function autoToolTip() {
// 监听鼠标点击事件
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index,
position: "top"
});
}
setInterval(() => {
autoToolTip()
}, 1000)
在这个示例中，我们首先初始化一个ECharts实例，并设置图表的配置选项。然后我们将配置项设置到图表中，并显示图表。接着，我们监听鼠标点击事件，并在事件处理函数中调用dispatchAction方法触发图表行为。
切换地图
在ECharts中，可以通过监听鼠标点击事件来实现点击切换地图的效果。具体来说，可以在事件处理函数中调用setOption方法更新图表的配置选项，从而切换到新的地图。
// 监听鼠标点击事件
myChart.on('click', function (params) {
if (params.name === '某个区域') {
$.getJSON('map2.json', function (data) {
echarts.registerMap('map2', data);
myChart.setOption({
geo: {
map: 'map2'
},
});
});
} else {
myChart.setOption({
geo: {
map: 'map1'
},
});
}
});