echarts散点图使用（转：http://www.suchso.com/UIweb/echarts-sandiantu.html）-白红宇

1.散点图中找最优记录

IT分享

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=

"Content-Type"

content=

"text/html; charset=utf-8"

/>

<title></title>

<meta charset=

"utf-8"

/>

<link rel=

"stylesheet"

href=

"style/style.css"

>

<script src=

"js/echarts.common.min.js"

></script>

</head>

<body>

<div id=

"main"

style=

"width: 620px;height:400px;"

></div>

<script type=

"text/javascript"

>

// 基于准备好的dom，初始化echarts实例

var

myChart = echarts.init(document.getElementById(

'main'

));

var

data = [[],[]];

var

showVal = [[3, 200099,

"中天博日"

], [2, 500039,

"腾讯"

], [5, 188669,

"中科"

], [4, 900009,

"华为"

], [3, 333339,

"阿里"

], [4, 233339,

"万达"

], [2, 433339,

"中信"

], [7, 388889,

"中科"

], [6, 388889,

"kkk"

], [4, 233359,

'lekd'

]];

showVal = showVal.sort(function (a, b) {

if

(a[0] == b[0]) {

return

a[1]>b[1]

}

return

a[0] < b[0]

});

var

schema = [

{ name:

'money'

, index: 0, text:

'金额'

},

{ name:

'selUser'

, index: 1, text:

'选择中标人'

}

];

for

(

var

i = 0; i < showVal.length; i++) {

var

a= [];

if

(showVal[0][1] == showVal[i][1]) {

if

(showVal[0][0] == showVal[i][0]) {

data[0].push(showVal[i]);

}

else

data[1].push(showVal[i]);

}

else

{

data[1].push(showVal[i]);

}

option = {

backgroundColor:

new

echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{

offset: 0,

color:

'#fff'

}, {

offset: 1,

color:

'#fff'

}]),

title: {

left :

'35%'

,

text:

'寻找纸板插入物, 纸板供应商'

,

textStyle:{

color:

'#354052'

,

fontSize:16

}

},

//系列标记

legend: {

y:

'bottom'

,

data: [

'投标'

,

'最佳出价'

],

itemGap:40,

},

//提示框的事例

tooltip: {

padding: 10,

backgroundColor:

'#222'

,

borderColor:

'#777'

,

borderWidth: 1,

formatter: function (obj) {

var

value = obj.value;

return

'<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'

+ value[2]

+

'</div>'

+ schema[0].text +

'：'

+ value[1] +

'<br>'

+

'选择中标人<br>'

}

},

//x坐标的设置

xAxis: {

name:

'供应商评分'

,

nameTextStyle: {

color:

'#7F8FA4'

,

fontSize: 12

},

axisLine: {

lineStyle: {

color:

'#979797'

}

},

splitLine: {

lineStyle: {

color:

'#D8D8D8'

,

type:

'dashed'

,

}

},

//y坐标的设置

yAxis: {

name:

'投标金额'

,

//坐标轴名称

nameTextStyle: {

color:

'#7F8FA4'

,

fontSize: 12

},

//坐标轴的设置

axisLine: {

lineStyle: {

color:

'#979797'

}

},

//坐标轴的分割线

splitLine: {

lineStyle: {

color:

'#D8D8D8'

,

type:

'dashed'

,

}

},

scale:

true

},

series: [{

name:

'最佳出价'

,

data: data[0],

type:

'scatter'

,

symbolSize: function (data) {

return

Math.sqrt(data[1]) / 5e2 * 10;

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor:

'rgba(255,128,5,0.5)'

,

shadowOffsetY: 5,

color:

new

echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color:

'#FF8005 '

}, {

offset: 1,

color:

'#FF8005'

}])

}

}, markLine: {

silent:

true

,

lineStyle: {

normal: {

type:

'solid'

,

}

},

data: [{

yAxis: data[1][7][1]

}],

label: {

normal: {

formatter:

'机会金额'

}

}, {

name:

'投标'

,

data: data[1],

type:

'scatter'

,

symbolSize: function (data) {

return

Math.sqrt(data[1]) / 5e2 * 10;

},

itemStyle: {

normal: {

shadowBlur: 10,

shadowColor:

'rgba(55,178,72,0.5)'

,

shadowOffsetY: 5,

color:

new

echarts.graphic.RadialGradient(0.4, 0.3, 1, [{

offset: 0,

color:

'#37B248'

}, {

offset: 1,

color:

'#37B248'

}])

}

},

}]

};

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

myChart.setOption(option);

</script>

</body>

</html>

2地图中的特殊标记

IT分享

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

<!DOCTYPE html>

<html>

<head>

<meta http-equiv=

"Content-Type"

content=

"text/html; charset=utf-8"

/>

<title></title>

<meta charset=

"utf-8"

/>

<link rel=

"stylesheet"

href=

"style/style.css"

>

<script src=

"js/echarts.common.min.js"

></script>

<script type=

"text/javascript"

src=

"http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"

></script>

<script type=

"text/javascript"

src=

"http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"

></script>

</head>

<body>

<div id=

"main"

style=

"width: 600px;height:400px;"

></div>

<script type=

"text/javascript"

>

// 基于准备好的dom，初始化echarts实例

var

myChart = echarts.init(document.getElementById(

'main'

));

function randomData() {

return

Math.round(Math.random() * 1000);

}

var

pricePoint = [[121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33], [120.13, 33.38], [118.87, 42.28], [102.188043, 38.520089]];

var

geoCoordMap = {

'海门'

: [121.15, 31.89],

'鄂尔多斯'

: [109.781327, 39.608266],

'招远'

: [120.38, 37.35],

'舟山'

: [122.207216, 29.985295],

'齐齐哈尔'

: [123.97, 47.33],

'盐城'

: [120.13, 33.38],

'赤峰'

: [118.87, 42.28],

"金昌"

: [102.188043, 38.520089],

};

var

geoData = [

{ name:

"海门"

, value: 9 },

{ name:

"鄂尔多斯"

, value: 12 },

{ name:

"招远"

, value: 12 },

{ name:

"舟山"

, value: 12 },

{ name:

"齐齐哈尔"

, value: 14 },

{ name:

"盐城"

, value: 15 },

{ name:

"赤峰"

, value: 16 },

{ name:

"金昌"

, value: 19 }

]

//获取唯一识别的值

var

selName = geoCoordMap.金昌.toString();

var

convertData = function (data, geoCoord1) {

var

res = [];

for

(

var

i = 0; i < data.length; i++) {

var

geoCoord = geoCoord1[data[i].name];

if

(geoCoord) {

res.push({

name: data[i].name,

value: geoCoord.concat(data[i].value)

});

}

return

res;

};

var

setTip = function (data) {

var

res = [];

if

(data&&data.length>0){

for

(

var

i=0;i<data.length;i++){

res.push({

coord: data[i],

label: {

normal: { show:

false

}

},

symbol: data[i].toString() != selName ?

'image://image/page.png'

:

'image://image/page1.png'

,

})

}

return

res

}

option = {

backgroundColor:

'#fff'

,

title: {

text:

'全国主要城市空气质量'

,

x:

'center'

,

textStyle: {

color:

'#fff'

}

},

tooltip: {

trigger:

'item'

,

formatter: function (

params

) {

return

params

.name +

' : '

+

params

.value[2];

}

},

geo: {

map:

'china'

,

label: {

emphasis: {

show:

false

}

},

itemStyle: {

normal: {

areaColor:

'#E7E7E7'

,

borderColor:

'#fff'

},

emphasis: {

//鼠标移上去的属性

areaColor:

'#E7E7E7'

}

},

series: [

name:

'pm2.5'

,

type:

'scatter'

,

coordinateSystem:

'geo'

,

data: convertData(geoData, geoCoordMap),

//将默认的显示隐藏掉

symbolSize: 0,

//自定义标示点

markPoint: {

data: setTip(pricePoint),

//设置图片的偏移

// symbolOffset: ['-5%', '-5%'],

//设置图片的宽高

symbolSize: [15,20],

},

}

]

}

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

myChart.setOption(option);

</script>

</body>

</html>