前端ECharts可视化框架快速上手详解(二)(1)

}]

var option = {

series: [{

type: ‘pie’,

data: pieData,

// 饼图的文字的显示

label: {

show: true,

// 决定文字显示的内容

formatter: function(arg) {

console.log(arg);

return arg.name + ‘平台’ + arg.value + ‘元\n’ + arg.percent + ‘%’;

},

},

// 南丁格尔图

roseType: ‘radius’, // 饼图每一个区域半径不一样

// 选中效果

selectedMode: ‘single’, // 选中的效果,能够将选中的区域偏离圆点一小段距离

//selectedMode: ‘multiple’,

selectedOffset: 30,

}]

}

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

myChart.setOption(option);

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

3.1、雷达图常用效果

---

3.1.1、显示数值

• 显示数值

• label

3.1.2、区域面积

• 区域面积

• areaStyle

3.1.3、绘制类型

• 绘制类型

• shape

4、仪表盘

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

1. ECharts 最基本的代码结构

2. 准备数据，设置给 series 下的 data

• data：[{value:97}]\

3. 图表类型：在 series 下设置 type: gauge