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,一经查实,立即删除!

相关文章

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

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

计算机专业录取分数及大学排名,计算机专业录取分数最高的大学有哪些?附排名前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):其构造函数实现…

添加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一…

UBUNTU : Destination Host Unreachable

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

怎么把分开的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…

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

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

.net中调用esb_大型ESB服务总线平台服务运行分析和监控预警实践

今天准备谈下ESB总线平台建设项目中的服务运行统计分析&#xff0c;服务心跳监测&#xff0c;服务监控预警方面的设计和实现。可以看到&#xff0c;在一个ESB服务总线平台上线后&#xff0c;SOA治理管控就变得相当重要&#xff0c;而这些运行监控分析本身也是提升ESB总线平台高…

计算机操作系统实验银行家算法,实验六 银行家算法(下)

实验六 银行家算法(下)一、实验说明实验说明&#xff1a;本次实验主要是对银行家算法进行进一步的实践学习&#xff0c;掌握银行家算法的整体流程&#xff0c;理解程序测试时每一步的当前状态&#xff0c;能对当前的资源分配进行预判断。二、实验要求1、获取源代码2、看懂大致框…

什么原因导致芯片短路_华为为什么突然大量用起了联发科芯片,或是这三个产品策略原因...

经常关注数码圈的都知道&#xff0c;近几年来&#xff0c;随着华为自研能力的提升&#xff0c;华为几乎很少采购第三方芯片&#xff0c;近几年来的绝大多数华为手机&#xff0c;几乎都是用的自研芯片麒麟系列。并没有像其它国产品牌那样用联发科或者高通的芯片。不过今年却大不…

如何运行vue项目(维护他人的项目)

假如你是个小白&#xff0c;在公司接手他人的项目&#xff0c;这个时候&#xff0c;该怎么将这个项目跑通&#xff1f; 前提&#xff1a; 首先&#xff0c;这个教程主要针对vue小白&#xff0c;并且不知道安装node.js环境的。言归正传&#xff0c;下面开始教程&#xff1a;在维…

进程操作

2019独角兽企业重金招聘Python工程师标准>>> 一、创建一个进程 进程是系统中最基本的执行单位。Linux系统允许任何一个用户进程创建一个子进程&#xff0c;创建之后&#xff0c;子进程存在于系统之中并独立于父进程。 关于父进程与子进程这两个概念&#xff0c;除了…

计算机硬件发展的特点有哪些,简述计算机的发展历程及各代计算机的特点。

满意答案Karen0491推荐于 2017.11.25采纳率&#xff1a;40% 等级&#xff1a;6已帮助&#xff1a;608人世界上第一台计算机是1946年问世的&#xff0c;根据计算机的性能和软硬件技术&#xff0c;将计算机发展划分成以下几个阶段&#xff1a;①第一阶段&#xff1a;电子管计算…

电饼锅的样式图片价格_进口珐琅铸铁锅专场,精致小厨娘们来康康!

两个月前&#xff0c;小灰兔我写了《10个高颜值居家好物&#xff0c;让你在朋友圈万众瞩目&#xff01;》一文&#xff0c;曾有小伙伴私信说这张图简直就是梦想中厨房的亚子强烈同意&#xff01;&#xff01;&#xff01;有多少女孩子&#xff0c;看到颜值炒鸡高的锅路都走不动…

在UITouch事件中画圆圈-iOS8 Swift基础教程

这篇教程主要内容展示如何利用Core Graphics Framework画圆圈,当用户点击屏幕时随机生成不同大小的圆,这篇教程在Xcode6和iOS8下编译通过。 打开Xcode,新建项目选择Single View Application,Product Name填写iOS8SwiftDrawingCirclesTutorial,Organization Name和Organization …

浏览器兼容性问题

转载于:https://www.cnblogs.com/python-machine/p/9406084.html

有人在远程使用计算机是什么意思,如何远程控制计算机,计算机远程控制有什么用途...

对于每个人来说&#xff0c;计算机都是至关重要的家用电器. 因为使用计算机可以使我们的业余生活丰富多彩. 随着Internet的普及&#xff0c;越来越多的用户开始学习自己使用计算机. 但是&#xff0c;操作中仍然存在很多问题&#xff0c;只要每个人都学会了远程控制&#xff0c;…