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

Echarts 5 中使用中国地图

最近参考Echarts 地图柱状图组合做地图图表需求时，遇到地图数据的问题。在网上找了半天中国地图的geojson没找到，原来是Echarts 5仓库删除了map`文件夹，如果有需要的话可以在历史版本的仓库中下载：china map

除了Echarts提供的，还可以使用antv的geojson：antv china map

折线图Y轴处理优化

对于上图所示场景，因为数据过大，Y轴跨度太大，所以不能清晰的看到播放量的趋势；数据是动态不定的，就需要根据数据来优化展示

方案一：给Y轴设置min: 'datamin' max: 'dataMax'

趋势是明显了，但是Y轴上下端的数据不太友好，还是希望能进一步优化处理

方案二：设计算法，计算步长逻辑，优化最大最小值

1): 计算最大值与最小值的平均间隔step：(maxVal - minVal) / 5 2): 将step向上取整得到interval，如：11.2 -> 20，324.5 -> 400 3): 计算最小值：Math.floor(minVal / interval) * interval 4): 计算最大值：Math.ceil(maxVal / interval) * interval

const SPLIT_NUM = 5;

/**
 * @param minVal 实际数据最大值
 * @param maxVal 实际数据最小值
 * @param split 坐标轴的分割段数 yAxis.splitNumber
 */
const processScale = (minVal: number, maxVal: number, split = SPLIT_NUM) => {
  if (minVal === maxVal) {
    return {
      interval: 1,
      min: minVal > 0 ? minVal - 1 : 0,
      max: maxVal + 1
    };
  }

  const step = (maxVal - minVal) / split;
  const n = step.toFixed(0).length - 1;
  const interval = Math.ceil(step / Math.pow(10, n)) * Math.pow(10, n);

  return {
    interval,
    min: Math.floor(minVal / interval) * interval,
    max: Math.ceil(maxVal / interval) * interval
  };
};

经过测试后，基本可以适配所有实际数据

shuangmianxiaoQ / myblog