Echarts 介绍

Apache ECharts 一个基于 JavaScript 的开源可视化图表库

echarts

• pyecharts 可以绘制地图
• echarts 支持显示 GEOJson 地图到 web
  • 地理坐标系和地图系列的 SVG 底图
  • 示例
    • https://github.com/apache/echarts/tree/5.5.1/test
  • 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);