Apache ECharts 一个基于 JavaScript 的开源可视化图表库
echarts
- pyecharts 可以绘制地图
- echarts 支持显示 GEOJson 地图到 web
- 地理坐标系和地图系列的 SVG 底图
- 示例
- series-map 地图主要用于地理区域数据的可视化
- series-lines 用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化
- series-scatter 散点（气泡）图
- series-effectScatter 带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
- series-tree 树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树
- 其他
- go-echarts The adorable charts library for Golang
使用
获取点击事件
myChart = echarts.init(....)
myChart.getZr().on('click', function(event) {
// 该监听器正在监听一个`zrender 事件`，当鼠标在任何地方都会被触发
});
myChart.on('click', function(event) {
// 该监听器正在监听一个`echarts 事件`，只有当鼠标在图形元素上时才能被触发
if (params.seriesType == 'scatter') {
console.log(params.data.name)
}
});
myChart.getZr().on('click', function(event) {
// 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
if (!event.target) {
// 点击在了空白处，做些什么。
}
});说明：
- echarts 事件是在 zrender 事件的基础上实现的
- 当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者
F&Q
多层 geo 缩放、拖动卡顿问题
通过如下配置实现（参考）：
let option = {
geo: [
{
animationDurationUpdate: 0, //实现缩放、拖动同步且不卡顿重新渲染 series
const myChart = useRef<echarts.ECharts>({} as any)
...
myChart.setOption(chartOption,true);