#ChinaLineMap{width:100%;高度：计算（100%-7vh）；}.min-body{宽度：100%；高度：100%；溢出：隐藏；背景：#010827；}.header{位置：相对；身高：6vh；背景色：#cccccc33；背景大小：100%100%；用户选择：无；}.til{宽度：100%；字体大小：2.2vw；字体粗细：粗体；文本对齐：居中；行高：6vh；字母间距：0.3vw；颜色：#fff；保证金：0；}.til：之前{内容：“”；显示：内联块；宽度：5vh；身高：5vh；右边距：1vw；vertical-align:middle;}.time-box{字体大小:1.3vw;字母间距：0.2vw；颜色：#00ffff；字体粗细：正常；位置：绝对；顶部：2.2vh；右：1vw;z-index:100;}vue遇到echarts5.x，迁移图怎么办？我在工作中经常使用echarts。最近在使用迁移图的时候，突然发现自从echarts更新到5.0之后，迁移图就变得不可用了。echarts官方在新版本中去掉了行政区域的地图数据，然后想实现迁移地图怎么办，这里有一个idea故事前景：同事写的代码先安装echarts（@5.2.2)在项目中。新版本提供了更详细的模块参考，例如：//引入echarts核心模块，核心模块提供了使用echarts所必需的接口。import*asechartsfrom'echarts/core';//导入直方图图表，图表后缀为Chartimport{BarChart}from'echarts/charts';//导入提示框、标题、笛卡尔坐标系、数据集、内置-在数据转换器组件中，组件后缀为Componentimport{TitleComponent,TooltipComponent,GridComponent,DatasetComponent,DatasetComponentOption,TransformComponent}from'echarts/components';新的导入方式对tree-shaking更友好，打包后的代码也小了很多（毕竟echarts的源代码确实很大，所以相信同事也经不起这种诱惑）所有，直到我在现有项目的基础上进行需求迭代，很多小伙伴都做过这样的需求，我们称之为迁移图或者飞线图。就在我一如既往兴高采烈的写着代码，想着晚上方便面放个卤蛋还是放个火腿肠的时候，突然看到页面上红扑扑的，心里百思不得其解，打开官方文档直接掩饰痛楚……一顿操作后，决定分享一下踩过的坑。1、echarts4.x和echarts5.x的一个重要区别下面我们用vue项目做一个demo。以前只需要在项目中安装echarts（4.x版本）即可。npmiecharts会在node_modules中看到echarts更新到5.x，然后在项目中安装echarts。地图文件夹消失是因为官方地图数据中的行政区域划分与中国实际的行政区域划分存在偏差，所以在新版本中，官方直接将地图数据移除，十分混乱。因为echarts是没有地图数据的，也就是说我们没有办法直接拿到中国的地图来使用，那怎么办呢？2、方法一：同时使用两个echarts版本，使用echarts4。同学们会问，既然echarts官方的地图数据不准确，为什么还要用呢？需要声明的是，不准确发生在极少数县区。整个中国地图的省单位，echarts是没问题的，所以我们可以继续使用echarts4.x中的地图，在package.json中手动添加一行依赖import:"dependencies":{"echarts":"^4.8.0","echarts5":"npm:echarts@^5.2.2",}，执行npminstall后，会看到node_modules中直接粘贴的效果页代码：
