echarts绘制散点图ajax,ECharts-散点图入门demo-effectScatter-动态修改数据

学习什么框架最简单的方式就是官网提供的例子，我这里也是拷贝一个官网的例子进行改造

百度ECharts散点图例子

可以在右下角的位置直接把当前的demo下载下来进行修改(记得修改自己的AK)

1、初始化

初始化比较简单，定义一个div，然后使用JS对其进行初始化

但是上面的几行代码是什么都不会显示的。你还需要对散点图进行配置：

2、定义一个初始化用到的option，以及option的介绍，我这里定义的有点粗糙，大家可以根据情况抽取些常用的出来定义为全局

option = {

title: {

text: '全国主要城市空气质量 - 百度地图',

subtext: 'data from PM25.in',

sublink: 'http://www.pm25.in',

left: 'center'

},

//鼠标 提示

tooltip: {

// trigger：触发类型。

// 可选：

// 'item'

// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。

// 'axis'

// 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。

// 在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。

// 'none'

// 什么都不触发。

trigger: 'item',

// 格式化显示的数据

formatter: function (params, ticket, callback) {

return params.data.name + ":" + params.value[2];

}

},

bmap: {

// 地图中心点

center: ["113.2708136740", "23.1351666766"],

// 方法倍数

zoom: 12,

roam: true,

//地图样式，比如将水变成什么样式，陆地又变成什么样式

mapStyle: {

styleJson: [{

'featureType': 'water',

'elementType': 'all',

'stylers': {

'color': '#d1d1d1'

}

}, {

'featureType': 'land',

'elementType': 'all',

'stylers': {

'color': '#f3f3f3'

}

}, {

'featureType': 'railway',

'elementType': 'all',

'stylers': {

'visibility': 'off'

}

}, {

'featureType': 'highway',

'elementType': 'all',