Echarts 使用问题小结

因为在项目开发中主要使用Echarts来做可视化图表，本文主要收集汇总一些Echarts使用中的问题解决小集。

tips：当遇到Echarts中确实较为棘手的问题时，在社区寻求答案确实是个不错的办法。
官方仓库问题列表

tooltip 超出 div 限制

问题：在做条形图时，当div容器较小时，tooltip的内容又较长时，会导致tootip文字被遮挡。

仔细查阅Echarts文档，可以发现有个tooltip.confine的属性，设置为true时可保证toolip的内容限制在图表的区域范围内。

自定义构建 Echarts

问题：有时候可能因为一些特殊需求而修改Echarts源码，那么如何使用修改后的Echarts呢？

官方文档是个好东西，这个问题其实官网已有介绍（自定义构建 ECharts），这篇指南中有介绍到使用echarts/build/build.js脚本自定义构建，ECharts已经提供了构建脚本，在命令行输入node build/build.js --help，查看使用帮助：

自定义构建脚本使用帮助

根据命令使用介绍，可以执行node build/build.js --release来重新构建ECharts。

通过 Action 触发工具箱中的 dataZoom

问题：因为需求原因，需要通过Action触发toolbox里dataZoom的区域缩放功能，而不是用鼠标点击激活区域缩放功能。

该问题在github仓库中的issues中已有解决方案：issues 5594，具体如下。

查看源码中的dataZoom（dataZoom.js#L94）实现，可通过dispatchAction来实现：

chart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',
    dataZoomSelectActive: true // 始终允许缩放
})

取消toolbox中dataZoom图标的显示：

toolbox: {
    itemSize: 0
}

世界地图中使用中文国家名称后，部分国家名称位置偏移

问题：在使用Echarts提供的世界地图时，通过nameGap将国家名称映射为中文后，发现美国，俄罗斯等国家的名称位置发生偏移。

该问题在github仓库中的issues中已有解决方案：issues 5015，通过修改echarts.js中源码来解决：

var geoCoordMap = {
    'Russia': [100, 60],
    'United States': [-99, 38],
    'United States of America': [-99, 38]
};

找到geoCoordMap变量，修改为：

var geoCoordMap = {
    'Russia': [100, 60],
    '俄罗斯': [100, 60],
    'United States': [-99, 38],
    '美国': [-99, 38],
    'United States of America': [-99, 38],
    '新西兰': [170, -45]
};

修改鼠标悬浮在图形元素上时的鼠标样式

问题：在使用Echarts中，有时候鼠标悬浮的cursor样式不是我们想要的样式，该如何解决呢？

参考 issues 5588 ，可以借助ZRender提供的API来修改鼠标cursor样式，如下：

chart.on('mousemove', function (params) {
    if (params.seriesIndex === 0) {
        myChart.getZr().setCursorStyle('crosshair');
    }
});

chart.on('mouseout', function (params) {
    if (params.seriesIndex === 0) {
        myChart.getZr().setCursorStyle('pointer');
    }
})

最后编辑于：2018.12.18 15:28:04