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'
},
});
}
});