2024年前端最新前端ECharts可视化框架快速上手详解(二)，2024年最新Web前端进阶面试资料无偿分享

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件

// 4.使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

1.1.3、南丁格尔图

1.1.4、选中效果

• 选中模式：selectedMode: single\multiple

• 选中偏移量：selectedOffset：30

2、地图

======================================================================

地图图表的使用方式

• 百度地图API -> 需要申请百度地图 ak

• 矢量地图->需要准备矢量地图数据

矢量地图的实现步骤：

1. ECharts 最基本的代码结构

2. 准备中国的矢量地图 json 文件，放到 json/map 的目录下

china.json

3. 使用 Ajax 获取 China.json

$.get(‘json/map/china.json’,function(chinaJson){ })

4. 在回调函数中往 echarts 全局对象注册地图的 json 数据

echarts.registerMap(‘chinaMap’,chinaJson)

5. 在 geo 下设置

type: ‘map’

map: ‘chinaMap’

2.1、省份json获取

---

省份json数据获取方式如下：

网址：http://datav.aliyun.com/tools/atlas/index.html

1. 首先打开上述网址

2. 打开json格式网址：https://www.bejson.com/

3. 复制后新建 china.json 文件，将json代码粘贴进去即可。

2.2、常用设置

---

• 缩放拖动、名称显示、初始缩放比例

• roam、label、zoom、center

2.3、常见效果

---

2.3.1、显示某个区域

1. 加载该区域的矢量地图数据

2. 通过 registerMap 注册到echarts全局对象中

3. 指明 geo 配置下的 type 和 map 属性

4. 通过 zoom 放大该区域

5. 通过 center 定位中心点

2.3.2、不同城市颜色不同

1. 显示基本的中国地图

2. 城市的空气质量数据设置给 series

3. 将 series 下的数据和 geo 关联起来

geoIndex:0、type: ‘map’

4. 结合 visualMap 配合使用

min、max、inRange、calculable

2.3.3、地图结合散点图

1. 给 series 下增加新的对象

2. 准备好散点数据，设置给新对象的 data

3. 配置新对象的 type

type: effectScatter

4. 让散点图使用地图坐标系统

coordinatesSystem：‘geo’

5. 让涟漪的效果更加明显

rippleEffect: {

scale: 10

}

3、雷达图

=======================================================================

1. ECharts 最基本的代码结构

2. 定义各个维度的最大值

• indicator: [{name: ‘易用性’,max: 100},…]

3. 准备具体产品的数据

• data：[{name:‘华为手机1’,value:[80,90,80,82,90]},…]

4. 图标类型

• 在 series 下设置 type：radar