Echarts地图编写

1.引入echarts库文件

 

<script charset="utf-8" type="text/javascript" language="javascript" src="echarts-2.2.7/doc/example/www/js/echarts.js"></script>

 

2.在页面中新建div用于地图展示

 

<div id="main" style="height: 450px;width: 100%;"></div>

 

3.在页面中引入js文件

 

<script charset="utf-8" type="text/javascript" language="javascript" src="xxx.js"></script>


4.在js脚本中编写代码

 

  1. $(function() {
  2. // 路径配置
  3. require.config({
  4. paths : {
  5. // echarts: 'http://echarts.baidu.com/build/dist'
  6. echarts : './plugins/echarts-2.2.7/doc/example/www/js'
  7. }
  8. });
  9. // 使用
  10. require(
  11. [
  12. 'echarts',
  13. 'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
  14. ], function(ec) {
  15. // 基于准备好的dom,初始化echarts图表
  16. var myChart = ec.init(document.getElementById('main'));
  17. var ecConfig = require('echarts/config');
  18. var zrEvent = require('zrender/tool/event');
  19. option = {
  20. title : {
  21. // 是否显示
  22. show: true,
  23. // 主标题文本,'\n'指定换行
  24. text: 'iphone销量',
  25. // 主标题文本超链接
  26. link: 'http://www.baidu.com',
  27. // 指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
  28. target: 'self',
  29. // 副标题文本,'\n'指定换行
  30. subtext: '纯属虚构',
  31. // 副标题文本超链接
  32. sublink: 'http://www.baidu.com',
  33. // 指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口)
  34. subtarget: 'self',
  35. // 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
  36. x: 'center',
  37. // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
  38. y: 'top',
  39. // 水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
  40. textAlign: 'center',
  41. // 标题背景颜色,默认透明
  42. backgroundColor: 'rgba(0,0,0,0.1)',
  43. // 标题边框颜色
  44. borderColor: '#66FF00',
  45. // 标题边框线宽,单位px,默认为0(无边框)
  46. borderWidth: 1,
  47. // 标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
  48. padding: [20,40,20,40],
  49. // 主副标题纵向间隔,单位px,默认为10
  50. itemGap: 20,
  51. // 主标题文本样式
  52. textStyle: {
  53. // 颜色
  54. color: '#0066FF',
  55. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  56. align: 'left',
  57. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  58. baseline: 'bottom',
  59. // 字体系列
  60. fontFamily: 'Arial, 宋体, sans-serif',
  61. // 字号 ,单位px
  62. fontSize: 20,
  63. // 样式,可选为:'normal' | 'italic' | 'oblique'
  64. fontStyle: 'italic',
  65. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  66. fontWeight: 'normal'
  67. },
  68. // 副标题文本样式
  69. subtextStyle: {
  70. // 颜色
  71. color: '#FF7F50',
  72. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  73. align: 'left',
  74. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  75. baseline: 'bottom',
  76. // 字体系列
  77. fontFamily: 'Arial, 宋体, sans-serif',
  78. // 字号 ,单位px
  79. fontSize: 15,
  80. // 样式,可选为:'normal' | 'italic' | 'oblique'
  81. fontStyle: 'italic',
  82. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  83. fontWeight: 'normal'
  84. }
  85. },
  86. // 工具提示
  87. tooltip : {
  88. // 显示策略,可选为:true(显示) | false(隐藏)
  89. show: true,
  90. // tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
  91. showContent: true,
  92. // 触发类型,默认数据触发,见下图,可选为:'item' | 'axis'
  93. trigger: 'item',
  94. // 位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如function([x, y]) {return [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。
  95. // position: getTooltipPosition(0,0),
  96. // 内容格式器:{string}(Template) | {Function},支持异步回调
  97. /*formatter: function(data){
  98. console.log(data);
  99. return data[1]+":"+data[5].count;
  100. }*/
  101. // 拖拽重计算独有,数据孤岛内容格式器:{string}(Template) | {Function},见表格下方
  102. // islandFormatter:
  103. // 显示延迟,添加显示延迟可以避免频繁切换,特别是在详情内容需要异步获取的场景,单位ms
  104. showDelay: 0,
  105. // 隐藏延迟,单位ms
  106. hideDelay: 0,
  107. // 动画变换时长,单位s,如果你希望tooltip的跟随实时响应,showDelay设置为0是关键,同时transitionDuration设0也会有交互体验上的差别。
  108. transitionDuration: 0,
  109. // 鼠标是否可进入详情气泡中,默认为false,如需详情内交互,如添加链接,按钮,可设置为true。
  110. //enterable: false,
  111. // 提示背景颜色,默认为透明度为0.7的黑色
  112. backgroundColor: 'rgba(0,0,0,0.5)',
  113. // 提示边框颜色
  114. borderColor: '#FF7F50',
  115. // 提示边框圆角,单位px,默认为4
  116. borderRadius: 10,
  117. // 提示边框线宽,单位px,默认为0(无边框)
  118. borderWidth: 2,
  119. // 提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
  120. padding: [15,15,15,15],
  121. // 坐标轴指示器
  122. /*axisPointer:{
  123. // 默认type为line,可选为:'line' | 'cross' | 'shadow' | 'none'(无),指定type后对应style生效
  124. type: 'line',
  125. // lineStyle设置直线指示器
  126. lineStyle: {
  127. // 颜色
  128. color:'#48b',
  129. // 线条样式,可选为:'solid' | 'dotted' | 'dashed', 树图还可以选:'curve' | 'broken'
  130. type:'solid',
  131. // 线宽
  132. width:10,
  133. // 折线主线(IE8+)有效,阴影色彩,支持rgba
  134. shadowColor:'rgba(0,0,0,0)',
  135. // 折线主线(IE8+)有效,阴影模糊度,大于0有效
  136. shadowBlur:5,
  137. // 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左
  138. shadowOffsetX:3,
  139. // 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上
  140. shadowOffsetY:3
  141. },
  142. // crossStyle设置十字准星指示器
  143. crossStyle:{
  144. // 颜色
  145. color:'#48b',
  146. // 线条样式,可选为:'solid' | 'dotted' | 'dashed', 树图还可以选:'curve' | 'broken'
  147. type:'solid',
  148. // 线宽
  149. width:10,
  150. // 折线主线(IE8+)有效,阴影色彩,支持rgba
  151. shadowColor:'rgba(0,0,0,0)',
  152. // 折线主线(IE8+)有效,阴影模糊度,大于0有效
  153. shadowBlur:5,
  154. // 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左
  155. shadowOffsetX:3,
  156. // 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上
  157. shadowOffsetY:3
  158. },
  159. // shadowStyle设置阴影指示器,areaStyle.size默认为'auto'自动计算,可指定具体宽度
  160. shadowStyle:{
  161. // 颜色
  162. color: 'rgba(150,150,150,0.3)',
  163. width: 'auto',
  164. // 填充样式,目前仅支持'default'(实填充)
  165. type: 'default'
  166. }
  167. },*/
  168. // 文本样式,默认为白色字体
  169. textStyle:{
  170. // 颜色
  171. color: '#FF7F50',
  172. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  173. align: 'left',
  174. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  175. baseline: 'bottom',
  176. // 字体系列
  177. fontFamily: 'Arial, 宋体, sans-serif',
  178. // 字号 ,单位px
  179. fontSize: 20,
  180. // 样式,可选为:'normal' | 'italic' | 'oblique'
  181. fontStyle: 'italic',
  182. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  183. fontWeight: 'normal'
  184. }
  185. },
  186. legend: {
  187. // 显示策略,可选为:true(显示) | false(隐藏)
  188. show: true,
  189. // 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
  190. orient: 'vertical',
  191. // 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
  192. x: 'left',
  193. // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
  194. y: 'top',
  195. // 图例背景颜色,默认透明
  196. backgroundColor: 'rgba(0,0,0,0.1)',
  197. // 图例边框颜色
  198. borderColor: '#0066FF',
  199. // 图例边框线宽,单位px,默认为0(无边框)
  200. borderWidth: 1,
  201. // 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
  202. padding: [15,15,15,15],
  203. // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
  204. itemGap: 20,
  205. // 图例图形宽度
  206. itemWidth: 30,
  207. // 图例图形高度
  208. itemHeight: 20,
  209. // 默认只设定了图例文字颜色,更个性化的是,要指定文字颜色跟随图例,可设color为'auto'
  210. textStyle:{
  211. // 颜色
  212. color: '#FF7F50',
  213. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  214. align: 'left',
  215. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  216. baseline: 'bottom',
  217. // 字体系列
  218. fontFamily: 'Arial, 宋体, sans-serif',
  219. // 字号 ,单位px
  220. fontSize: 20,
  221. // 样式,可选为:'normal' | 'italic' | 'oblique'
  222. fontStyle: 'italic',
  223. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  224. fontWeight: 'normal'
  225. },
  226. // 文本格式器:{string}(Template) | {Function},模板变量为'{name}',函数回调参数为name
  227. /*formatter: function(data){
  228. console.log(data);
  229. return data[1]+":"+data[5].count;
  230. },*/
  231. // 选择模式,默认开启图例开关,可选single,multiple
  232. selectedMode: true,
  233. // 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
  234. /*selected: {
  235. '降水量' : false
  236. },*/
  237. // 图例内容数组
  238. data:[{name:'iphone3'/*,textStyle:{Object},icon:{string}*/},
  239. {name:'iphone4'/*,textStyle:{Object},icon:{string}*/},
  240. {name:'iphone5'/*,textStyle:{Object},icon:{string}*/}]
  241. },
  242. // 值域选择,每个图表最多仅有一个值域控件
  243. dataRange: {
  244. // 显示策略,可选为:true(显示) | false(隐藏)
  245. show: true,
  246. // 布局方式,默认为垂直布局,可选为:'horizontal' | 'vertical'
  247. orient: 'horizontal',
  248. // 水平安放位置,默认为全图左对齐,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
  249. x: 'left',
  250. // 垂直安放位置,默认为全图底部,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
  251. y: 'bottom',
  252. // 值域控件背景颜色,默认透明
  253. backgroundColor: 'rgba(0,0,0,0.1)',
  254. // 图例边框颜色
  255. borderColor: '#0066FF',
  256. // 图例边框线宽,单位px,默认为0(无边框)
  257. borderWidth: 1,
  258. // 图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
  259. padding: [15,15,15,15],
  260. // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
  261. itemGap: 20,
  262. // 图例图形宽度
  263. itemWidth: 30,
  264. // 图例图形高度
  265. itemHeight: 20,
  266. // 指定的最小值,eg: 0,默认无,必须参数,唯有指定了splitList时可缺省min。
  267. min: 0,
  268. // 指定的最大值,eg: 100,默认无,必须参数,唯有指定了splitList时可缺省max
  269. max: 2500,
  270. // 小数精度,默认为0,无小数点,当 min ~ max 间在当前精度下无法整除splitNumber份时,精度会自动提高以满足均分,不支持不等划分
  271. precision: 1,
  272. // 分割段数,默认为5,为0时为线性渐变,calculable为true是默认均分100份
  273. splitNumber: 10,
  274. // 自定义分割方式,支持不等距分割。splitList被指定时,splitNumber将被忽略。
  275. /*splitList: [
  276. {start: 1500},
  277. {start: 900, end: 1500},
  278. {start: 310, end: 1000},
  279. {start: 200, end: 300},
  280. {start: 10, end: 200, label: '10 到 200(自定义label)'},
  281. {start: 5, end: 5, label: '5(自定义特殊颜色)', color: 'black'},
  282. {end: 10}
  283. ],*/
  284. // 用于设置dataRange的初始选中范围。calculable为true时有效。
  285. range: {start: 0, end: 100},
  286. // 选择模式,默认开启值域开关,可选single,multiple
  287. selectedMode: 'multiple',
  288. // 是否启用值域漫游,启用后无视splitNumber和splitList,值域显示为线性渐变
  289. calculable : true,
  290. // 是否启用地图hover时的联动响应
  291. hoverLink: true,
  292. // 值域漫游是否实时显示,在不支持Canvas的浏览器中该值自动强制置为false
  293. realtime:true,
  294. // 值域颜色标识,颜色数组长度必须>=2,颜色代表从数值高到低的变化,即颜色数组低位代表数值高的颜色标识 ,支持Alpha通道上的变化(rgba)
  295. color:['#e42515','#fad3d0'],
  296. // 内容格式器:{string}(Template) | {Function},模板变量为'{value}'和'{value2}',代表数值起始值和结束值,函数参数两个,含义同模板变量,当calculable为true时模板变量仅有'{value}'
  297. /*formatter : function(v, v2){
  298. if (v2 < 1000) { return '低于' + v2;}
  299. else if (v > 1000) { return '高于' + v;}
  300. else { return '中'; }
  301. },*/
  302. // 值域文字显示,splitNumber生效时默认以计算所得数值作为值域文字显示,可指定长度为2的文本数组显示简介的值域文本,如['高', '低'],'\n'指定换行
  303. text:['高','低'],
  304. // 默认只设定了值域控件文字颜色
  305. textStyle:{
  306. // 颜色
  307. color: '#FF7F50',
  308. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  309. align: 'left',
  310. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  311. baseline: 'bottom',
  312. // 字体系列
  313. fontFamily: 'Arial, 宋体, sans-serif',
  314. // 字号 ,单位px
  315. fontSize: 20,
  316. // 样式,可选为:'normal' | 'italic' | 'oblique'
  317. fontStyle: 'italic',
  318. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  319. fontWeight: 'normal'
  320. }
  321. },
  322. // 工具箱,每个图表最多仅有一个工具箱
  323. toolbox: {
  324. // 显示策略,可选为:true(显示) | false(隐藏)
  325. show: true,
  326. // 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
  327. orient : 'horizontal',
  328. // 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
  329. x: 'right',
  330. // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
  331. y: 'bottom',
  332. // 工具箱背景颜色,默认透明
  333. backgroundColor: 'rgba(218,112,214,0.6)',
  334. // 工具箱边框颜色
  335. borderColor: '#0066FF',
  336. // 工具箱边框线宽,单位px,默认为0(无边框)
  337. borderWidth: 1,
  338. // 工具箱内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
  339. padding: [15,15,15,15],
  340. // 各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔
  341. itemGap: 20,
  342. // 工具箱icon大小,单位(px)
  343. itemSize: 20,
  344. // 工具箱icon颜色序列,循环使用,同时支持在具体feature内指定color
  345. color:['#1e90ff','#22bb22','#4b0082','#d2691e'],
  346. // 禁用颜色定义
  347. disableColor:'#fff',
  348. // 生效颜色定义
  349. effectiveColor:'red',
  350. // 是否显示工具箱文字提示,默认启用
  351. showTitle:true,
  352. // 工具箱提示文字样式
  353. textStyle:{
  354. // 颜色
  355. color: '#FF7F50',
  356. // 水平对齐方式,可选为:'left' | 'right' | 'center'
  357. align: 'left',
  358. // 垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
  359. baseline: 'bottom',
  360. // 字体系列
  361. fontFamily: 'Arial, 宋体, sans-serif',
  362. // 字号 ,单位px
  363. fontSize: 20,
  364. // 样式,可选为:'normal' | 'italic' | 'oblique'
  365. fontStyle: 'italic',
  366. // 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
  367. fontWeight: 'normal'
  368. },
  369. // 启用功能,目前支持feature见下,工具箱自定义功能回调处理
  370. feature : {
  371. // 辅助线标志,分别是启用,删除上一条,删除全部,可设置更多属性
  372. mark : {
  373. show : true,
  374. title : {
  375. mark : '辅助线开关',
  376. markUndo : '删除辅助线',
  377. markClear : '清空辅助线'
  378. },
  379. lineStyle : {
  380. width : 2,
  381. color : '#1e90ff',
  382. type : 'dashed'
  383. }
  384. },
  385. // 框选区域缩放,自动与存在的dataZoom控件同步,上图icon左数4/5,分别是启用,缩放后退
  386. dataZoom : {
  387. show : true,
  388. title : {
  389. dataZoom : '区域缩放',
  390. dataZoomReset : '区域缩放后退'
  391. }
  392. },
  393. // 数据视图,上图icon左数6,打开数据视图,可设置更多属性
  394. dataView : {
  395. show : true,
  396. title : '数据视图',
  397. readOnly: false,
  398. lang: ['数据视图', '关闭', '刷新']
  399. },
  400. // 动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换,上图icon左数6~14,分别是切换为堆积,切换为平铺,切换折线图,切换柱形图,切换为力导向布局图,切换为和弦图,切换为饼图,切换为漏斗图
  401. magicType: {
  402. show : true,
  403. title : {
  404. line : '折线图切换',
  405. bar : '柱形图切换',
  406. stack : '堆积',
  407. tiled : '平铺',
  408. force: '力导向布局图切换',
  409. chord: '和弦图切换',
  410. pie: '饼图切换',
  411. funnel: '漏斗图切换'
  412. },
  413. option: {
  414. // line: {...},
  415. // bar: {...},
  416. // stack: {...},
  417. // tiled: {...},
  418. // force: {...},
  419. // chord: {...},
  420. // pie: {...},
  421. // funnel: {...}
  422. },
  423. type : []
  424. },
  425. // 还原,复位原始图表
  426. restore : {
  427. show : true,
  428. title : '还原'
  429. },
  430. // 保存图片(IE8-不支持),可设置更多属性
  431. saveAsImage : {
  432. show : true,
  433. title : '保存为图片',
  434. type : 'png',
  435. lang : ['点击保存']
  436. }
  437. }
  438. },
  439. // 缩放漫游组件,仅对地图有效
  440. roamController: {
  441. // 显示策略,可选为:true(显示) | false(隐藏)
  442. show: true,
  443. // 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
  444. x: 'right',
  445. // 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
  446. y: 'top',
  447. // 指定宽度,决定4向漫游圆盘大小,可指定 {number}(宽度,单位px)
  448. width: 120,
  449. // 指定高度,缩放控制键默认会在指定高度的最下方最大化显示,可指定 {number}(高度,单位px)
  450. height:200,
  451. // 缩放漫游组件背景颜色,默认透明
  452. backgroundColor:'rgba(0,0,0,0.1)',
  453. // 缩放漫游组件边框颜色
  454. borderColor: '#1e90ff',
  455. // 缩放漫游组件边框线宽,单位px,默认为0(无边框)
  456. borderWidth: 1,
  457. // 缩放漫游组件内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
  458. padding: [15,15,15,15],
  459. // 漫游组件文字填充颜色
  460. fillerColor:'#000',
  461. // 控制手柄主体颜色
  462. handleColor:'#e3655a',
  463. // 4向漫游移动步伐,单位px
  464. step:10,
  465. // 必须,指定漫游组件可控地图类型
  466. mapTypeControl: {
  467. 'china': true
  468. }
  469. },
  470. series : [
  471. {
  472. // 图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为:
  473. // 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图)
  474. // 'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图)
  475. type: 'map',
  476. // 系列名称
  477. name: 'iphone3',
  478. // 地图类型,支持world,china及全国34个省市自治区
  479. mapType: 'china',
  480. // 是否开启滚轮缩放和拖拽漫游,默认为false(关闭),其他有效输入为true(开启),'scale'(仅开启滚轮缩放),'move'(仅开启拖拽漫游)
  481. roam: false,
  482. // 图形样式
  483. itemStyle:{
  484. // 默认状态下地图的文字
  485. normal:{label:{show:true}},
  486. // 鼠标放到地图上面显示文字
  487. emphasis:{label:{show:true}}
  488. },
  489. data:[
  490. {name: '北京',value: Math.round(Math.random()*1000)},
  491. {name: '天津',value: Math.round(Math.random()*1000)},
  492. {name: '上海',value: Math.round(Math.random()*1000)},
  493. {name: '重庆',value: Math.round(Math.random()*1000)},
  494. {name: '河北',value: Math.round(Math.random()*1000)},
  495. {name: '河南',value: Math.round(Math.random()*1000)},
  496. {name: '云南',value: Math.round(Math.random()*1000)},
  497. {name: '辽宁',value: Math.round(Math.random()*1000)},
  498. {name: '黑龙江',value: Math.round(Math.random()*1000)},
  499. {name: '湖南',value: Math.round(Math.random()*1000)},
  500. {name: '安徽',value: Math.round(Math.random()*1000)},
  501. {name: '山东',value: Math.round(Math.random()*1000)},
  502. {name: '新疆',value: Math.round(Math.random()*1000)},
  503. {name: '江苏',value: Math.round(Math.random()*1000)},
  504. {name: '浙江',value: Math.round(Math.random()*1000)},
  505. {name: '江西',value: Math.round(Math.random()*1000)},
  506. {name: '湖北',value: Math.round(Math.random()*1000)},
  507. {name: '广西',value: Math.round(Math.random()*1000)},
  508. {name: '甘肃',value: Math.round(Math.random()*1000)},
  509. {name: '山西',value: Math.round(Math.random()*1000)},
  510. {name: '内蒙古',value: Math.round(Math.random()*1000)},
  511. {name: '陕西',value: Math.round(Math.random()*1000)},
  512. {name: '吉林',value: Math.round(Math.random()*1000)},
  513. {name: '福建',value: Math.round(Math.random()*1000)},
  514. {name: '贵州',value: Math.round(Math.random()*1000)},
  515. {name: '广东',value: Math.round(Math.random()*1000)},
  516. {name: '青海',value: Math.round(Math.random()*1000)},
  517. {name: '西藏',value: Math.round(Math.random()*1000)},
  518. {name: '四川',value: Math.round(Math.random()*1000)},
  519. {name: '宁夏',value: Math.round(Math.random()*1000)},
  520. {name: '海南',value: Math.round(Math.random()*1000)},
  521. {name: '台湾',value: Math.round(Math.random()*1000)},
  522. {name: '香港',value: Math.round(Math.random()*1000)},
  523. {name: '澳门',value: Math.round(Math.random()*1000)}
  524. ]
  525. },
  526. {
  527. name: 'iphone4',
  528. type: 'map',
  529. mapType: 'china',
  530. itemStyle:{
  531. normal:{label:{show:true}},
  532. emphasis:{label:{show:true}}
  533. },
  534. data:[
  535. {name: '北京',value: Math.round(Math.random()*1000)},
  536. {name: '天津',value: Math.round(Math.random()*1000)},
  537. {name: '上海',value: Math.round(Math.random()*1000)},
  538. {name: '重庆',value: Math.round(Math.random()*1000)},
  539. {name: '河北',value: Math.round(Math.random()*1000)},
  540. {name: '安徽',value: Math.round(Math.random()*1000)},
  541. {name: '新疆',value: Math.round(Math.random()*1000)},
  542. {name: '浙江',value: Math.round(Math.random()*1000)},
  543. {name: '江西',value: Math.round(Math.random()*1000)},
  544. {name: '山西',value: Math.round(Math.random()*1000)},
  545. {name: '内蒙古',value: Math.round(Math.random()*1000)},
  546. {name: '吉林',value: Math.round(Math.random()*1000)},
  547. {name: '福建',value: Math.round(Math.random()*1000)},
  548. {name: '广东',value: Math.round(Math.random()*1000)},
  549. {name: '西藏',value: Math.round(Math.random()*1000)},
  550. {name: '四川',value: Math.round(Math.random()*1000)},
  551. {name: '宁夏',value: Math.round(Math.random()*1000)},
  552. {name: '香港',value: Math.round(Math.random()*1000)},
  553. {name: '澳门',value: Math.round(Math.random()*1000)}
  554. ]
  555. },
  556. {
  557. name: 'iphone5',
  558. type: 'map',
  559. mapType: 'china',
  560. itemStyle:{
  561. normal:{label:{show:true}},
  562. emphasis:{label:{show:true}}
  563. },
  564. data:[
  565. {name: '北京',value: Math.round(Math.random()*1000)},
  566. {name: '天津',value: Math.round(Math.random()*1000)},
  567. {name: '上海',value: Math.round(Math.random()*1000)},
  568. {name: '广东',value: Math.round(Math.random()*1000)},
  569. {name: '台湾',value: Math.round(Math.random()*1000)},
  570. {name: '香港',value: Math.round(Math.random()*1000)},
  571. {name: '澳门',value: Math.round(Math.random()*1000)}
  572. ]
  573. }
  574. ]
  575. };
  576. myChart.setOption(option);
  577. });
  578. });

 

5.最终结果

转载于:https://www.cnblogs.com/HeXiaoZhou/p/9399525.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397338.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迷宫游戏 堆栈实现

#include<iostream> #include<string> #include<stack> using namespace std; #define n 8stack <int *> s;int * createMaze(){//初始化迷宫int i,j;int * a;anew int[n*n];for(i0;i<n;i){for(j0;j<n;j){*(an*ij)-1;//不设置为0的原因是超过矩阵…

威海职业学院计算机专业宿舍,2021年威海职业学院新生宿舍条件和宿舍环境图片...

每年高考结束后&#xff0c;威海职业学院新生被录取同学们陆续都到校报到~而宿舍作为同学们朝夕相处之场所&#xff0c;如果不懂相处之道&#xff0c;难免会摩擦不断&#xff0c;更有甚者堪比宫斗大戏。所以各位大学新生一定要珍惜室友之间的友情&#xff0c;彼此处好关系。本文…

PostgreSQL 函数调试、诊断、优化 auto_explain

PostgreSQL 函数调试 & auto_explain 作者 digoal 日期 2016-11-21 标签 PostgreSQL , pldebugger , 函数调试 , auto_explain 背景 PostgreSQL的服务端编程能力比较强&#xff0c;不仅支持像java, R, python这种流行的编程语言&#xff0c;另外还内置了一个与Oracle plsql…

判断请求来自手机还是PC

由于小程序和PC端用的是同一个后台 所以就需要判断请求是从哪里发过来的 在这里是利用Request Body 里面的user-agent 来判断 /** * 根据当前请求的特征&#xff0c;判断该请求是否来自手机终端&#xff0c;主要检测特殊的头信息&#xff0c;以及user-Agent这个header * * pa…

小旭的互联网营销之微信营销

11月1日&#xff0c;一篇题为《什么样的女黑客竟遭马云强东在双11联手封杀?》的文章&#xff0c;借助双11火热的关注效应&#xff0c;在短短两天时间内刷爆朋友圈。 该文章的女主角不仅外表靓丽&#xff0c;黑客技术更是惊艳&#xff1a;“作为美籍华人的Joanna在2015黑帽子会…

计算机专业录取分数及大学排名,计算机专业录取分数最高的大学有哪些?附排名前50大学名单...

高考结束之后&#xff0c;不少即将迎接高考的家长对于很多专业的录取情况都抱有很大的兴趣&#xff0c;都比较关心自己的理想专业大概能上哪些大学。今天&#xff0c;小编将为大家以山东高考计算机专业各大学录取分数进行排名&#xff0c;供下一届高考生参考。计算机专业作为近…

letsencrypt 自动续期不关闭nginx

为什么80%的码农都做不了架构师&#xff1f;>>> 已失效 corntab -e 5 0 1 * * /opt/letsencrypt/letsencrypt-auto --config /etc/letsencrypt/webroot.ini -d <domain> certonly && sudo service nginx reload/etc/letsencrypt/webroot.ini rsa-key…

loss低但精确度低_低光照图像增强网络-RetinexNet(model.py解析【2】)

论文地址&#xff1a;https://arxiv.org/pdf/1808.04560.pdf代码地址&#xff1a;https://github.com/weichen582/RetinexNet解析目录&#xff1a;https://zhuanlan.zhihu.com/p/88761829整个模型架构被实现为一个类&#xff1a;class lowlight_enhance(object):其构造函数实现…

计算机应用发表论文,计算机应用论文发表.docx

计算机应用论文发表1在工程项目管理中应用计算机技术存在的问题计算机软件是计算机运行的重要保障&#xff0c;一个好的计算机软件直接决定计算机技术在工程项目管理的高效应用。但由于市场上计算机软件种类繁多&#xff0c;质量好坏不一&#xff0c;质量好的价格高&#xff0c…

添加dubbo xsd的支持

使用dubbo时遇到问题&#xff1a; org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document http://code.alibabatech.com/schema/dubbo/dubbo.xsd, because 1) could not find the document; 2) the document could not be read; 3) the root ele…

byte数组穿换成pcm格式_形象地介绍DSD的编解码原理及和PCM的区别

一直有人不清楚DSD到底是啥原理&#xff0c;和MP3, FLAC, APE, WAV等基于PCM编码技术的音频格式又有啥区别。特意做了两张图说明一下。图一是是由很多黑点构成的蒙娜丽莎头像&#xff0c;点击看大图就知道是没有灰阶只有黑白两色。但是人眼是可以看到有丰富的灰阶的。这和DSD一…

最大熵对应的概率分布

最大熵对应的概率分布 最大熵定理 设 \(X \sim p(x)\) 是一个连续型随机变量&#xff0c;其微分熵定义为\[ h(X) - \int p(x)\log p(x) dx \]其中&#xff0c;\(\log\) 一般取自然对数 \(\ln\), 单位为 奈特&#xff08;nats&#xff09;。 考虑如下优化问题&#xff1a;\[ \b…

UBUNTU : Destination Host Unreachable

介绍我的系统的搭建的方式: WIN7 64 VMWARE STATION&#xff0c;方式是进行桥接的方式。最近突然出现了问题&#xff0c;Ubuntu ping 外网或者 PING WIN 7 的时候&#xff0c;出现 Destination Host Unreachable 的错误&#xff1b;想着去修改网卡的链接形式&#xff1a; 编辑…

焦作师范高等专科学校对口计算机分数线,焦作师范高等专科学校录取分数线2018...

焦作师范高等专科学校录取分数线20182018年 电子信息工程技术 理科 332 3602018年 物联网应用技术 文科 391 4082018年 物联网应用技术 理科 328 3692018年 学前教育 文科 388 4022018年 学前教育 理科 324 3512018年 移动应用开发 文科 02018年 移动应用开发 理科 305 3322018…

在Spring boot 配置过滤器(filter)

在spring boot 配置servlet filter 逻辑上与配置spring 是一样的。 不过相比spring 更加简化配置的难度。 这里只需要两步1 创建一个自定义顾虑器并继承spring filter 例如OncePerRequestFilterpublic class AuthenticationFilter extends OncePerRequestFilter{private final …

Flink之状态之状态存储 state backends

流计算中可能有各种方式来保存状态&#xff1a; 窗口操作使用 了KV操作的函数继承了CheckpointedFunction的函数当开始做checkpointing的时候&#xff0c;状态会被持久化到checkpoints里来规避数据丢失和状态恢复。选择的状态存储策略不同&#xff0c;会导致状态持久化如何和ch…

怎么把分开的pdf放在一起_糖和盐混在一起了要怎么分开?| 趣问万物

趣 问 万 物来源&#xff1a;把科学带回家撰文&#xff1a;Mirror如何分离糖和盐&#xff1f;图源&#xff1a;Pixabay小手一抖&#xff0c;不小心把糖(蔗糖)和盐(氯化钠)混在一块儿了该怎么办&#xff1f;趁着光棍节&#xff0c;就让我们吃饱了撑着研究研究把糖和盐拆散的N种方…

《JavaScript DOM编程艺术》笔记

1. 把<script>标签放到HTML文档的最后&#xff0c;<body>标签之前能使浏览器更快地加载页面。 2. nodeType的常见取值 元素节点(1) 属性节点(2) 文本节点(3) 3. <a href"http://www.baidu.com" οnclick"popUp(this.href);return false;"&g…

maven POM.xml内的标签大全详解

<project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0http://maven.apache.org/maven-v4_0_0.xsd"><!--父项目的坐标。如果…

常熟理工学院计算机考研,2018江苏专转本考生必看-常熟理工学院介绍

原标题&#xff1a;2018江苏专转本考生必看-常熟理工学院介绍这次轮到默默学介绍常熟理工学院啦&#xff01;今年常熟理工学院有个专转本的学生&#xff0c;也是默默学专转本视频课程考上常熟理工的一个学生&#xff0c;叫黄群超&#xff0c;当年专转本计算机也考了八九十分吧&…