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

1.散点图中找最优记录

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

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

<code>&lt;!doctype html&gt;</code>

<code>&lt;html&gt;</code>

<code>&lt;head&gt;</code>

<code>&lt;meta http-equiv=</code><code>"content-type"</code> <code>content=</code><code>"text/html; charset=utf-8"</code><code>/&gt;</code>

<code>    </code><code>&lt;title&gt;&lt;/title&gt;</code>

<code>    </code><code>&lt;meta charset=</code><code>"utf-8"</code> <code>/&gt;</code>

<code>    </code><code>&lt;link rel=</code><code>"stylesheet"</code> <code>href=</code><code>"style/style.css"</code><code>&gt;</code>

<code>    </code><code>&lt;script src=</code><code>"js/echarts.common.min.js"</code><code>&gt;&lt;/script&gt;</code>

<code>&lt;/head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code><code>&lt;!-- 为echarts准备一个具备大小（宽高）的dom --&gt;</code>

<code>    </code><code>&lt;div id=</code><code>"main"</code> <code>style=</code><code>"width: 620px;height:400px;"</code><code>&gt;&lt;/div&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

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

<code>        </code><code>var</code> <code>mychart = echarts.init(document.getelementbyid(</code><code>'main'</code><code>));</code>

<code>        </code><code>var</code> <code>data = [[],[]];</code>

<code>        </code><code>var</code> <code>showval = [[3, 200099, </code><code>"中天博日"</code><code>], [2, 500039, </code><code>"腾讯"</code><code>], [5, 188669, </code><code>"中科"</code><code>], [4, 900009, </code><code>"华为"</code><code>], [3, 333339, </code><code>"阿里"</code><code>], [4, 233339, </code><code>"万达"</code><code>], [2, 433339, </code><code>"中信"</code><code>], [7, 388889, </code><code>"中科"</code><code>], [6, 388889, </code><code>"kkk"</code><code>], [4, 233359, </code><code>'lekd'</code><code>]];</code>

<code>        </code><code>showval = showval.sort(function (a, b) {</code>

<code>            </code><code>if</code> <code>(a[0] == b[0]) {</code>

<code>                </code><code>return</code> <code>a[1]&gt;b[1]</code>

<code>            </code><code>}</code>

<code>            </code><code>return</code> <code>a[0] &lt; b[0]</code>

<code>        </code><code>});</code>

<code>        </code><code>var</code> <code>schema = [</code>

<code>            </code><code>{ name: </code><code>'money'</code><code>, index: 0, text: </code><code>'金额'</code> <code>},</code>

<code>            </code><code>{ name: </code><code>'seluser'</code><code>, index: 1, text: </code><code>'选择中标人'</code> <code>}</code>

<code>        </code><code>];</code>

<code>        </code><code>for</code> <code>(</code><code>var</code> <code>i = 0; i &lt; showval.length; i++) {</code>

<code>            </code><code>var</code> <code>a= [];</code>

<code>            </code><code>if</code> <code>(showval[0][1] == showval[i][1]) {</code>

<code>                </code><code>if</code> <code>(showval[0][0] == showval[i][0]) {</code>

<code>                    </code><code>data[0].push(showval[i]);</code>

<code>                </code><code>} </code><code>else</code> <code>{</code>

<code>                    </code><code>data[1].push(showval[i]);</code>

<code>                </code><code>}</code>

<code>            </code><code>} </code><code>else</code> <code>{ </code>

<code>                </code><code>data[1].push(showval[i]);</code>

<code>        </code><code>}</code>

<code>        </code><code>option = {</code>

<code>            </code><code>backgroundcolor: </code><code>new</code> <code>echarts.graphic.radialgradient(0.3, 0.3, 0.8, [{</code>

<code>                </code><code>offset: 0,</code>

<code>                </code><code>color: </code><code>'#fff'</code>

<code>            </code><code>}, {</code>

<code>                </code><code>offset: 1,</code>

<code>            </code><code>}]),</code>

<code>            </code><code>title: {</code>

<code>                </code><code>left :</code><code>'35%'</code><code>,</code>

<code>                </code><code>text: </code><code>'寻找纸板插入物, 纸板供应商'</code><code>,</code>

<code>                </code><code>textstyle:{</code>

<code>                    </code><code>color: </code><code>'#354052'</code><code>,</code>

<code>                    </code><code>fontsize:16</code>

<code>                    </code><code>}</code>

<code>            </code><code>},</code>

<code>            </code><code>//系列标记</code>

<code>            </code><code>legend: {</code>

<code>                </code><code>y: </code><code>'bottom'</code><code>,</code>

<code>                </code><code>data: [</code><code>'投标'</code><code>, </code><code>'最佳出价'</code><code>],</code>

<code>                </code><code>itemgap:40,</code>

<code>            </code><code>//提示框的事例</code>

<code>            </code><code>tooltip: {</code>

<code>                </code><code>padding: 10,</code>

<code>                </code><code>backgroundcolor: </code><code>'#222'</code><code>,</code>

<code>                </code><code>bordercolor: </code><code>'#777'</code><code>,</code>

<code>                </code><code>borderwidth: 1,</code>

<code>                </code><code>formatter: function (obj) {</code>

<code>                    </code><code>var</code> <code>value = obj.value;</code>

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

<code>                        </code><code>+ value[2]</code>

<code>                        </code><code>+ </code><code>'&lt;/div&gt;'</code>

<code>                        </code><code>+ schema[0].text + </code><code>'：'</code> <code>+ value[1] + </code><code>'&lt;br&gt;'</code>

<code>                        </code><code>+ </code><code>'选择中标人&lt;br&gt;'</code>

<code>            </code><code>//x坐标的设置</code>

<code>            </code><code>xaxis: {</code>

<code>                </code><code>name: </code><code>'供应商评分'</code><code>,</code>

<code>                </code><code>nametextstyle: {</code>

<code>                    </code><code>color: </code><code>'#7f8fa4'</code><code>,</code>

<code>                    </code><code>fontsize: 12</code>

<code>                </code><code>},</code>

<code>                </code><code>axisline: {</code>

<code>                    </code><code>linestyle: {</code>

<code>                        </code><code>color: </code><code>'#979797'</code>

<code>                </code><code>splitline: {</code>

<code>                        </code><code>color: </code><code>'#d8d8d8'</code><code>,</code>

<code>                        </code><code>type: </code><code>'dashed'</code><code>,</code>

<code>            </code><code>//y坐标的设置</code>

<code>            </code><code>yaxis: {</code>

<code>                </code><code>name: </code><code>'投标金额'</code><code>,</code>

<code>                </code><code>//坐标轴名称</code>

<code>               </code><code>//坐标轴的设置</code>

<code>                </code><code>//坐标轴的分割线</code>

<code>                </code><code>scale: </code><code>true</code>

<code>            </code><code>series: [{</code>

<code>                </code><code>name: </code><code>'最佳出价'</code><code>,</code>

<code>                </code><code>data: data[0],</code>

<code>                </code><code>type: </code><code>'scatter'</code><code>,</code>

<code>                </code><code>symbolsize: function (data) {</code>

<code>                    </code><code>return</code> <code>math.sqrt(data[1]) / 5e2 * 10;</code>

<code>                </code><code>itemstyle: {</code>

<code>                    </code><code>normal: {</code>

<code>                        </code><code>shadowblur: 10,</code>

<code>                        </code><code>shadowcolor: </code><code>'rgba(255,128,5,0.5)'</code><code>,</code>

<code>                        </code><code>shadowoffsety: 5,</code>

<code>                        </code><code>color: </code><code>new</code> <code>echarts.graphic.radialgradient(0.4, 0.3, 1, [{</code>

<code>                            </code><code>offset: 0,</code>

<code>                            </code><code>color: </code><code>'#ff8005 '</code>

<code>                        </code><code>}, {</code>

<code>                            </code><code>offset: 1,</code>

<code>                            </code><code>color: </code><code>'#ff8005'</code>

<code>                        </code><code>}])</code>

<code>                </code><code>}, markline: {</code>

<code>                    </code><code>silent: </code><code>true</code><code>,</code>

<code>                        </code><code>normal: {</code>

<code>                            </code><code>type: </code><code>'solid'</code><code>,</code>

<code>                        </code><code>}</code>

<code>                    </code><code>},</code>

<code>                    </code><code>data: [{</code>

<code>                        </code><code>yaxis: data[1][7][1]</code>

<code>                    </code><code>}],</code>

<code>                    </code><code>label: {</code>

<code>                            </code><code>formatter:</code><code>'机会金额'</code>

<code>                        </code> 

<code>                </code><code>name: </code><code>'投标'</code><code>,</code>

<code>                </code><code>data: data[1],</code>

<code>                        </code><code>shadowcolor: </code><code>'rgba(55,178,72,0.5)'</code><code>,</code>

<code>                            </code><code>color: </code><code>'#37b248'</code>

<code>                </code> 

<code>            </code><code>}]</code>

<code>        </code><code>};</code>

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

<code>        </code><code>mychart.setoption(option);</code>

<code>    </code><code>&lt;/script&gt;</code>

<code>&lt;/body&gt;</code>

<code>&lt;/html&gt;</code>

2地图中的特殊标记

<code>    </code><code>&lt;script src=</code><code>"js/echarts.common.min.js"</code><code>&gt;&lt;/script&gt;   </code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code> <code>src=</code><code>"http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;script type=</code><code>"text/javascript"</code> <code>src=</code><code>"http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"</code><code>&gt;&lt;/script&gt;</code>

<code>    </code><code>&lt;div id=</code><code>"main"</code> <code>style=</code><code>"width: 600px;height:400px;"</code><code>&gt;&lt;/div&gt;</code>

<code>        </code><code>function randomdata() {</code>

<code>            </code><code>return</code> <code>math.round(math.random() * 1000);</code>

<code>        </code><code>var</code> <code>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]];</code>

<code>        </code><code>var</code> <code>geocoordmap = {</code>

<code>            </code><code>'海门'</code><code>: [121.15, 31.89],</code>

<code>            </code><code>'鄂尔多斯'</code><code>: [109.781327, 39.608266],</code>

<code>            </code><code>'招远'</code><code>: [120.38, 37.35],</code>

<code>            </code><code>'舟山'</code><code>: [122.207216, 29.985295],</code>

<code>            </code><code>'齐齐哈尔'</code><code>: [123.97, 47.33],</code>

<code>            </code><code>'盐城'</code><code>: [120.13, 33.38],</code>

<code>            </code><code>'赤峰'</code><code>: [118.87, 42.28],</code>

<code>            </code><code>"金昌"</code><code>: [102.188043, 38.520089],</code>

<code>        </code><code>var</code> <code>geodata = [</code>

<code>            </code><code>{ name: </code><code>"海门"</code><code>, value: 9 },</code>

<code>            </code><code>{ name: </code><code>"鄂尔多斯"</code><code>, value: 12 },</code>

<code>            </code><code>{ name: </code><code>"招远"</code><code>, value: 12 },</code>

<code>            </code><code>{ name: </code><code>"舟山"</code><code>, value: 12 },</code>

<code>            </code><code>{ name: </code><code>"齐齐哈尔"</code><code>, value: 14 },</code>

<code>            </code><code>{ name: </code><code>"盐城"</code><code>, value: 15 },</code>

<code>            </code><code>{ name: </code><code>"赤峰"</code><code>, value: 16 },</code>

<code>            </code><code>{ name: </code><code>"金昌"</code><code>, value: 19 }</code>

<code>        </code><code>]</code>

<code>        </code><code>//获取唯一识别的值</code>

<code>        </code><code>var</code> <code>selname = geocoordmap.金昌.tostring();</code>

<code>        </code><code>var</code> <code>convertdata = function (data, geocoord1) {</code>

<code>            </code><code>var</code> <code>res = [];</code>

<code>            </code><code>for</code> <code>(</code><code>var</code> <code>i = 0; i &lt; data.length; i++) {</code>

<code>                </code><code>var</code> <code>geocoord = geocoord1[data[i].name];</code>

<code>                </code><code>if</code> <code>(geocoord) {</code>

<code>                    </code><code>res.push({</code>

<code>                        </code><code>name: data[i].name,</code>

<code>                        </code><code>value: geocoord.concat(data[i].value)</code>

<code>                    </code><code>});</code>

<code>            </code><code>return</code> <code>res;</code>

<code>        </code><code>var</code> <code>settip = function (data) {</code>

<code>            </code><code>if</code><code>(data&amp;&amp;data.length&gt;0){</code>

<code>                </code><code>for</code><code>(</code><code>var</code> <code>i=0;i&lt;data.length;i++){</code>

<code>                        </code><code>coord: data[i],</code>

<code>                        </code><code>label: {</code>

<code>                            </code><code>normal: { show: </code><code>false</code> <code>}</code>

<code>                        </code><code>},</code>

<code>                        </code><code>symbol: data[i].tostring() != selname ? </code><code>'image://image/page.png'</code> <code>: </code><code>'image://image/page1.png'</code><code>,</code>

<code>                    </code><code>})</code>

<code>            </code><code>return</code> <code>res</code>

<code>            </code><code>backgroundcolor: </code><code>'#fff'</code><code>,</code>

<code>                </code><code>text: </code><code>'全国主要城市空气质量'</code><code>,</code>

<code>                </code><code>x: </code><code>'center'</code><code>,</code>

<code>                </code><code>textstyle: {</code>

<code>                    </code><code>color: </code><code>'#fff'</code>

<code>                </code><code>trigger: </code><code>'item'</code><code>,</code>

<code>                </code><code>formatter: function (</code><code>params</code><code>) {</code>

<code>                    </code><code>return</code> <code>params</code><code>.name + </code><code>' : '</code> <code>+ </code><code>params</code><code>.value[2];</code>

<code>            </code><code>geo: {</code>

<code>                </code><code>map: </code><code>'china'</code><code>,</code>

<code>                </code><code>label: {</code>

<code>                    </code><code>emphasis: {</code>

<code>                        </code><code>show: </code><code>false</code>

<code>                        </code><code>areacolor: </code><code>'#e7e7e7'</code><code>,</code>

<code>                        </code><code>bordercolor: </code><code>'#fff'</code>

<code>                        </code><code>//鼠标移上去的属性</code>

<code>                        </code><code>areacolor: </code><code>'#e7e7e7'</code>

<code>            </code><code>series: [</code>

<code>                </code><code>{</code>

<code>                    </code><code>name: </code><code>'pm2.5'</code><code>,</code>

<code>                    </code><code>type: </code><code>'scatter'</code><code>,</code>

<code>                    </code><code>coordinatesystem: </code><code>'geo'</code><code>,</code>

<code>                    </code><code>data: convertdata(geodata, geocoordmap),</code>

<code>                    </code><code>//将默认的显示隐藏掉</code>

<code>                    </code><code>symbolsize: 0,</code>

<code>                    </code><code>//自定义标示点</code>

<code>                    </code><code>markpoint: {</code>

<code>                        </code><code>data: settip(pricepoint),</code>

<code>                        </code><code>//设置图片的偏移</code>

<code>                       </code><code>// symboloffset: ['-5%', '-5%'],</code>

<code>                        </code><code>//设置图片的宽高</code>

<code>                        </code><code>symbolsize: [15,20],</code>

<code>            </code><code>]</code>