_小郑有点困了的博客

项目需要使用Echart实现一个世界/中国/省份地图,需要自定义地图背景纹理，同时显示多个标签，并且显示自定义的图片的点。

正常的ecahrt地图，不管是使用了geo的拖拽还是series的拖拽，只要开启了roam，就一定会可能被拖到盒子外部，然后就拖不回来了，没有找到echart的默认配置项可以限制这一情况。5、计算出地图的上下左右110%的极值，当作是x,y坐标系，四个值，leftX，rightX，topY，bottomY，4、地图初始化的位置记为[50%,50%],无论向左、向右、向上、向下，都会是递增的结果。1、首先，默认开启geo的roam属性，允许开启拖拽，缩放。就是计算出来的geo的center距离中心的位置。

项目需要实现一个世界地图。并可下钻（这个之前的博客已经实现了，这里重点介绍自定义label）。并且需要在每个区域显示label标签，一个很好看的样式的信息框（这个就很恶心了），ui画的是左右排列的，并且左边还有个圆角矩形，右侧上下排列，按照经验。label只能上下排列，通过。找了半天的替代方案，博客也基本没有这种成品的样式的，最后无果而终，还是使用自定义label实现了。

原理就是抬高了这个区域的高度，并且改变了颜色。一个略微比2d地图炫酷一些的3d地图，

实现一个全国地图->省->市的连续下钻操作的地图，可能后续还需要在地图之上叠加maker、popup之类的东西。这里只说地图,这个地图是利用geo为2d地图增加了立体效果，也就是阴影，实际还是2d的地图。

个人的小demo，如有问题，恳请指正，也欢迎大家一起讨论学习。下一篇会写geo3D效果的全国地图（但是没有实现下钻，可根据同样的原理，自行实现下钻）

场景：大数据展示全国各省份信息，绘制地图，并在每个省份上叠加图表。需要做的就是1、绘制全国地图（不同省份根据数据的不同而颜色不同）2、每个省份都需要单独叠加一个图表（饼图）3、地图缩放、图表的大小跟随比例一起缩放4、地图拖拽，图表根据一起移动这里面有一些坑效果图：截图未截完整，示例效果。完整代码：mapOption.js配置项：let obj ={ }export default { geo: { map: 'china',

echart5.0实现一个进度仪表推荐一个超级炫酷的，拥有各式各样图表的网址https://www.makeapie.com/explore.html效果图：代码实现：其实可以直接复制人家的代码。配置项如下：var color = ' 'export default{ title: { text: '', // subtext:"完成比例", x:"center", y:"center", textStyle: { fo

场景：实现一个展示xx率的仪表，页面一刷新就能够从0增长到指定数值。注：这个特效5.0以后的版本才支持效果图代码实现：配置项：import echarts from 'echarts'export default { series: [ { startAngle: 180, endAngle: 0, name: '选项二', type: 'gauge', axisLabel: { show:false

常规样式UI画的样式效果细节在于这个小圆点的颜色要和饼图块的颜色一致，这在5.0（echarts版本）之前的版本是可以使用这一段代码实现的。label:{ formatter: params => {//● return ( '{icon|▅}{name|' +params.name+ '}{value|' + params.value + '}' ); },