0


【Echarts项目】前端就业数据可视化(HTML+Less+JavaScript+jQuery)入门级

技术栈

在这里插入图片描述

项目展示

在这里插入图片描述

在线体验(推荐)

https://yangyanyan.top/echarts-jobmap/

源码

记得给个star
https://gitee.com/yyy1203/echarts-jobmap.git

笔记教程

很详细喔,跟着我的教程来,很简单哒
https://blog.csdn.net/qq_23073811/article/details/123425963

文件架构以及部分源码展示

文件架构

  • 架构其实就是简单的前端三剑客在这里插入图片描述

部分源码展示

核心代码

  1. index.js

,主要包含对echarts的配置

  1. // 柱状图模块1 左边纵向(function(){// 立即执行函数// 1实例化对象var myChart = echarts.init(document.querySelector(".bar1 .chart"));// 2. 指定配置项和数据var option ={
  2. color:["#2f89cf"],
  3. tooltip:{
  4. trigger:"axis",
  5. axisPointer:{// 坐标轴指示器,坐标轴触发有效
  6. type:"shadow"// 默认为直线,可选为:'line' | 'shadow'}},// 修改图表的大小
  7. grid:{
  8. left:"0%",
  9. top:"10px",
  10. right:"0%",
  11. bottom:"4%",
  12. containLabel:true},// x轴
  13. xAxis:[{
  14. type:"category",
  15. data:["旅游行业","教育培训","游戏行业","医疗行业","电商行业","社交行业","金融行业"],
  16. axisTick:{
  17. alignWithLabel:true},// 修改刻度标签 相关样式
  18. axisLabel:{
  19. color:"rgba(255,255,255,.6)",
  20. fontSize:10},// 不显示x坐标轴的样式
  21. axisLine:{
  22. show:false}}],// y轴
  23. yAxis:[{
  24. type:"value",// 修改刻度标签 相关样式
  25. axisLabel:{
  26. color:"rgba(255,255,255,.6) ",
  27. fontSize:12},// y轴的线条改为了 2像素
  28. axisLine:{
  29. lineStyle:{
  30. color:"rgba(255,255,255,.1)",
  31. width:2}},// y轴分割线的颜色
  32. splitLine:{
  33. lineStyle:{
  34. color:"rgba(255,255,255,.1)"}}}],
  35. series:[{
  36. name:"直接访问",
  37. type:"bar",
  38. barWidth:"35%",
  39. data:[200,300,300,900,1500,1200,600],
  40. itemStyle:{// 修改柱子圆角
  41. barBorderRadius:5}}]};// 3. 把配置项给实例对象
  42. myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应
  43. window.addEventListener("resize",function(){
  44. myChart.resize();});})();// 柱状图2 横向(function(){var myColor =["#1089E7","#F57474","#56D0E3","#F8B448","#8B78F6"];// 1. 实例化对象var myChart = echarts.init(document.querySelector(".bar2 .chart"));// 2. 指定配置和数据var option ={
  45. grid:{
  46. top:"10%",
  47. left:"22%",
  48. bottom:"10%"// containLabel: true},// 不显示x轴的相关信息
  49. xAxis:{
  50. show:false},
  51. yAxis:[// 两组y轴数据 左右{
  52. type:"category",
  53. inverse:true,// 反转坐标轴
  54. data:["HTML5","CSS3","javascript","VUE","NODE"],// 不显示y轴的线
  55. axisLine:{
  56. show:false},// 不显示刻度
  57. axisTick:{
  58. show:false},// 把刻度标签里面的文字颜色设置为白色
  59. axisLabel:{
  60. color:"#fff"}},{
  61. data:[702,350,610,793,664],
  62. inverse:true,// 不显示y轴的线
  63. axisLine:{
  64. show:false},// 不显示刻度
  65. axisTick:{
  66. show:false},// 把刻度标签里面的文字颜色设置为白色
  67. axisLabel:{
  68. color:"#fff"}}],
  69. series:[// 两组数据重叠成一个{
  70. name:"条",
  71. type:"bar",
  72. data:[70,34,60,78,69],
  73. yAxisIndex:0,// 类似z-index// 修改第一组柱子的圆角
  74. itemStyle:{
  75. barBorderRadius:20,// 此时的color 可以修改柱子的颜色
  76. color:function(params){// params 传进来的是柱子对象// console.log(params);// dataIndex 是当前柱子的索引号return myColor[params.dataIndex];}},// 柱子之间的距离
  77. barCategoryGap:50,//柱子的宽度
  78. barWidth:10,// 显示柱子内的文字
  79. label:{
  80. show:true,
  81. position:"inside",// {c} 会自动的解析为 数据 data里面的数据
  82. formatter:"{c}%"}},{
  83. name:"框",
  84. type:"bar",
  85. barCategoryGap:50,
  86. barWidth:15,
  87. yAxisIndex:1,
  88. data:[100,100,100,100,100],
  89. itemStyle:{
  90. color:"none",
  91. borderColor:"#00c1de",
  92. borderWidth:3,
  93. barBorderRadius:15}}]};// 3. 把配置给实例对象
  94. myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应
  95. window.addEventListener("resize",function(){
  96. myChart.resize();});})();// 折线图1模块制作 左边(function(){// 年份数据var yearData =[{
  97. year:"2020",// 年份
  98. data:[// 两个数组是因为有两条线[24,40,101,134,90,230,210,230,120,230,210,120],[40,64,191,324,290,330,310,213,180,200,180,79]]},{
  99. year:"2021",// 年份
  100. data:[// 两个数组是因为有两条线[123,175,112,197,121,67,98,21,43,64,76,38],[143,131,165,123,178,21,82,64,43,60,19,34]]}];// 1. 实例化对象var myChart = echarts.init(document.querySelector(".line1 .chart"));// 2.指定配置var option ={// 通过这个color修改两条线的颜色
  101. color:["#00f2f1","#ed3f35"],
  102. tooltip:{
  103. trigger:"axis"},
  104. legend:{// 如果series 对象有name 值,则 legend可以不用写data// 修改图例组件 文字颜色
  105. textStyle:{
  106. color:"#4c9bfd"},// 这个10% 必须加引号
  107. right:"10%"},
  108. grid:{
  109. top:"20%",
  110. left:"3%",
  111. right:"4%",
  112. bottom:"3%",
  113. show:true,// 显示边框
  114. borderColor:"#012f4a",// 边框颜色
  115. containLabel:true// 包含刻度文字在内},
  116. xAxis:{
  117. type:"category",
  118. boundaryGap:false,
  119. data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
  120. axisTick:{
  121. show:false// 去除刻度线},
  122. axisLabel:{
  123. color:"#4c9bfd"// 文本颜色},
  124. axisLine:{
  125. show:false// 去除轴线}},
  126. yAxis:{
  127. type:"value",
  128. axisTick:{
  129. show:false// 去除刻度线},
  130. axisLabel:{
  131. color:"#4c9bfd"// 文本颜色},
  132. axisLine:{
  133. show:false// 去除轴线},
  134. splitLine:{
  135. lineStyle:{
  136. color:"#012f4a"// 分割线颜色}}},
  137. series:[{
  138. name:"新增粉丝",
  139. type:"line",// smooth:true 可以让我们的折线显示带有弧度
  140. smooth:true,
  141. data: yearData[0].data[0]},{
  142. name:"新增游客",
  143. type:"line",
  144. smooth:true,
  145. data: yearData[0].data[1]}]};// 3. 把配置给实例对象
  146. myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应
  147. window.addEventListener("resize",function(){
  148. myChart.resize();});// 5.点击切换效果$(".line h2").on("click","a",function(){// alert(1);// console.log($(this).index());// 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象// console.log(yearData[$(this).index()]);var obj = yearData[$(this).index()];
  149. option.series[0].data = obj.data[0];
  150. option.series[1].data = obj.data[1];// 需要重新渲染
  151. myChart.setOption(option);});})();// 折线图2 模块制作(function(){var myChart = echarts.init(document.querySelector(".line2 .chart"));var option ={
  152. tooltip:{
  153. trigger:"axis"},
  154. legend:{
  155. top:"0%",
  156. textStyle:{
  157. color:"rgba(255,255,255,.5)",
  158. fontSize:"12"}},
  159. grid:{
  160. left:"10",
  161. top:"30",
  162. right:"10",
  163. bottom:"10",
  164. containLabel:true},
  165. xAxis:[{
  166. type:"category",
  167. boundaryGap:false,// x轴更换数据
  168. data:["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","26","28","29","30"],// 文本颜色为rgba(255,255,255,.6) 文字大小为 12
  169. axisLabel:{
  170. textStyle:{
  171. color:"rgba(255,255,255,.6)",
  172. fontSize:12}},// x轴线的颜色为 rgba(255,255,255,.2)
  173. axisLine:{
  174. lineStyle:{
  175. color:"rgba(255,255,255,.2)"}}}],
  176. yAxis:[{
  177. type:"value",
  178. axisTick:{
  179. show:false},
  180. axisLine:{
  181. lineStyle:{
  182. color:"rgba(255,255,255,.1)"}},
  183. axisLabel:{
  184. textStyle:{
  185. color:"rgba(255,255,255,.6)",
  186. fontSize:12}},// 修改分割线的颜色
  187. splitLine:{
  188. lineStyle:{
  189. color:"rgba(255,255,255,.1)"}}}],
  190. series:[{
  191. name:"播放量",
  192. type:"line",
  193. smooth:true,// 单独修改当前线条的样式
  194. lineStyle:{
  195. color:"#0184d5",
  196. width:"2"},// 填充颜色设置
  197. areaStyle:{
  198. color:newecharts.graphic.LinearGradient(0,0,0,1,[{
  199. offset:0,
  200. color:"rgba(1, 132, 213, 0.4)"// 渐变色的起始颜色},{
  201. offset:0.8,
  202. color:"rgba(1, 132, 213, 0.1)"// 渐变线的结束颜色}],false),
  203. shadowColor:"rgba(0, 0, 0, 0.1)"},// 设置拐点
  204. symbol:"circle",// 拐点大小
  205. symbolSize:8,// 开始不显示拐点, 鼠标经过显示
  206. showSymbol:false,// 设置拐点颜色以及边框
  207. itemStyle:{
  208. color:"#0184d5",
  209. borderColor:"rgba(221, 220, 107, .1)",
  210. borderWidth:12},
  211. data:[30,40,30,40,30,40,30,60,20,40,30,40,30,40,30,40,30,60,20,40,30,40,30,40,30,40,20,60,50,40]},{
  212. name:"转发量",
  213. type:"line",
  214. smooth:true,
  215. lineStyle:{
  216. normal:{
  217. color:"#00d887",
  218. width:2}},
  219. areaStyle:{
  220. normal:{
  221. color:newecharts.graphic.LinearGradient(0,0,0,1,[{
  222. offset:0,
  223. color:"rgba(0, 216, 135, 0.4)"},{
  224. offset:0.8,
  225. color:"rgba(0, 216, 135, 0.1)"}],false),
  226. shadowColor:"rgba(0, 0, 0, 0.1)"}},// 设置拐点 小圆点
  227. symbol:"circle",// 拐点大小
  228. symbolSize:5,// 设置拐点颜色以及边框
  229. itemStyle:{
  230. color:"#00d887",
  231. borderColor:"rgba(221, 220, 107, .1)",
  232. borderWidth:12},// 开始不显示拐点, 鼠标经过显示
  233. showSymbol:false,
  234. data:[130,10,20,40,30,40,80,60,20,40,90,40,20,140,30,40,130,20,20,40,80,70,30,40,30,120,20,99,50,20]}]};
  235. myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应
  236. window.addEventListener("resize",function(){
  237. myChart.resize();});})();// 饼形图1(function(){// 1. 实例化对象var myChart = echarts.init(document.querySelector(".pie1 .chart"));// 2.指定配置var option ={
  238. color:["#065aab","#066eab","#0682ab","#0696ab","#06a0ab"],
  239. tooltip:{
  240. trigger:"item",
  241. formatter:"{a} <br/>{b}: {c} ({d}%)"},
  242. legend:{
  243. bottom:"0%",// 修改小图标的大小
  244. itemWidth:10,
  245. itemHeight:10,// 修改图例组件的文字为 12px
  246. textStyle:{
  247. color:"rgba(255,255,255,.5)",
  248. fontSize:"12"}},
  249. series:[{
  250. name:"年龄分布",
  251. type:"pie",// 这个radius可以修改饼形图的大小// radius 第一个值是内圆的半径 第二个值是外圆的半径
  252. radius:["40%","60%"],
  253. center:["50%","45%"],
  254. avoidLabelOverlap:false,// 图形上的文字
  255. label:{
  256. show:false,
  257. position:"center"},// 链接文字和图形的线是否显示
  258. labelLine:{
  259. show:false},
  260. data:[{
  261. value:1,
  262. name:"0岁以下"},{
  263. value:4,
  264. name:"20-29岁"},{
  265. value:2,
  266. name:"30-39岁"},{
  267. value:2,
  268. name:"40-49岁"},{
  269. value:1,
  270. name:"50岁以上"}]}]};// 3. 把配置给实例对象
  271. myChart.setOption(option);// 4. 让图表跟随屏幕自动的去适应
  272. window.addEventListener("resize",function(){
  273. myChart.resize();});})();// 饼形图2 地区分布模块(function(){var myChart = echarts.init(document.querySelector(".pie2 .chart"));var option ={
  274. color:["#006cff","#60cda0","#ed8884","#ff9f7f","#0096ff","#9fe6b8","#32c5e9","#1d9dff"],
  275. tooltip:{
  276. trigger:"item",
  277. formatter:"{a} <br/>{b} : {c} ({d}%)"},
  278. legend:{
  279. bottom:"0%",
  280. itemWidth:10,
  281. itemHeight:10,
  282. textStyle:{
  283. color:"rgba(255,255,255,.5)",
  284. fontSize:"12"}},
  285. series:[{
  286. name:"地区分布",
  287. type:"pie",
  288. radius:["10%","70%"],
  289. center:["50%","50%"],
  290. roseType:"radius",// 半径模式// 图形的文字标签
  291. label:{
  292. fontSize:10},// 链接图形和文字的线条
  293. labelLine:{// length 链接图形的线条
  294. length:6,// length2 链接文字的线条
  295. length2:8},
  296. data:[{
  297. value:20,
  298. name:"云南"},{
  299. value:26,
  300. name:"北京"},{
  301. value:24,
  302. name:"山东"},{
  303. value:25,
  304. name:"河北"},{
  305. value:20,
  306. name:"江苏"},{
  307. value:25,
  308. name:"浙江"},{
  309. value:30,
  310. name:"四川"},{
  311. value:42,
  312. name:"湖北"}]}]};
  313. myChart.setOption(option);// 监听浏览器缩放,图表对象调用缩放resize函数
  314. window.addEventListener("resize",function(){
  315. myChart.resize();});})();// 模拟飞行路线模块地图模块(function(){var myChart = echarts.init(document.querySelector(".map .chart"));var geoCoordMap ={
  316. 上海:[121.4648,31.2891],
  317. 东莞:[113.8953,22.901],
  318. 东营:[118.7073,37.5513],
  319. 中山:[113.4229,22.478],
  320. 临汾:[111.4783,36.1615],
  321. 临沂:[118.3118,35.2936],
  322. 丹东:[124.541,40.4242],
  323. 丽水:[119.5642,28.1854],
  324. 乌鲁木齐:[87.9236,43.5883],
  325. 佛山:[112.8955,23.1097],
  326. 保定:[115.0488,39.0948],
  327. 兰州:[103.5901,36.3043],
  328. 包头:[110.3467,41.4899],
  329. 北京:[116.4551,40.2539],
  330. 北海:[109.314,21.6211],
  331. 南京:[118.8062,31.9208],
  332. 南宁:[108.479,23.1152],
  333. 南昌:[116.0046,28.6633],
  334. 南通:[121.1023,32.1625],
  335. 厦门:[118.1689,24.6478],
  336. 台州:[121.1353,28.6688],
  337. 合肥:[117.29,32.0581],
  338. 呼和浩特:[111.4124,40.4901],
  339. 咸阳:[108.4131,34.8706],
  340. 哈尔滨:[127.9688,45.368],
  341. 唐山:[118.4766,39.6826],
  342. 嘉兴:[120.9155,30.6354],
  343. 大同:[113.7854,39.8035],
  344. 大连:[122.2229,39.4409],
  345. 天津:[117.4219,39.4189],
  346. 太原:[112.3352,37.9413],
  347. 威海:[121.9482,37.1393],
  348. 宁波:[121.5967,29.6466],
  349. 宝鸡:[107.1826,34.3433],
  350. 宿迁:[118.5535,33.7775],
  351. 常州:[119.4543,31.5582],
  352. 广州:[113.5107,23.2196],
  353. 廊坊:[116.521,39.0509],
  354. 延安:[109.1052,36.4252],
  355. 张家口:[115.1477,40.8527],
  356. 徐州:[117.5208,34.3268],
  357. 德州:[116.6858,37.2107],
  358. 惠州:[114.6204,23.1647],
  359. 成都:[103.9526,30.7617],
  360. 扬州:[119.4653,32.8162],
  361. 承德:[117.5757,41.4075],
  362. 拉萨:[91.1865,30.1465],
  363. 无锡:[120.3442,31.5527],
  364. 日照:[119.2786,35.5023],
  365. 昆明:[102.9199,25.4663],
  366. 杭州:[119.5313,29.8773],
  367. 枣庄:[117.323,34.8926],
  368. 柳州:[109.3799,24.9774],
  369. 株洲:[113.5327,27.0319],
  370. 武汉:[114.3896,30.6628],
  371. 汕头:[117.1692,23.3405],
  372. 江门:[112.6318,22.1484],
  373. 沈阳:[123.1238,42.1216],
  374. 沧州:[116.8286,38.2104],
  375. 河源:[114.917,23.9722],
  376. 泉州:[118.3228,25.1147],
  377. 泰安:[117.0264,36.0516],
  378. 泰州:[120.0586,32.5525],
  379. 济南:[117.1582,36.8701],
  380. 济宁:[116.8286,35.3375],
  381. 海口:[110.3893,19.8516],
  382. 淄博:[118.0371,36.6064],
  383. 淮安:[118.927,33.4039],
  384. 深圳:[114.5435,22.5439],
  385. 清远:[112.9175,24.3292],
  386. 温州:[120.498,27.8119],
  387. 渭南:[109.7864,35.0299],
  388. 湖州:[119.8608,30.7782],
  389. 湘潭:[112.5439,27.7075],
  390. 滨州:[117.8174,37.4963],
  391. 潍坊:[119.0918,36.524],
  392. 烟台:[120.7397,37.5128],
  393. 玉溪:[101.9312,23.8898],
  394. 珠海:[113.7305,22.1155],
  395. 盐城:[120.2234,33.5577],
  396. 盘锦:[121.9482,41.0449],
  397. 石家庄:[114.4995,38.1006],
  398. 福州:[119.4543,25.9222],
  399. 秦皇岛:[119.2126,40.0232],
  400. 绍兴:[120.564,29.7565],
  401. 聊城:[115.9167,36.4032],
  402. 肇庆:[112.1265,23.5822],
  403. 舟山:[122.2559,30.2234],
  404. 苏州:[120.6519,31.3989],
  405. 莱芜:[117.6526,36.2714],
  406. 菏泽:[115.6201,35.2057],
  407. 营口:[122.4316,40.4297],
  408. 葫芦岛:[120.1575,40.578],
  409. 衡水:[115.8838,37.7161],
  410. 衢州:[118.6853,28.8666],
  411. 西宁:[101.4038,36.8207],
  412. 西安:[109.1162,34.2004],
  413. 贵阳:[106.6992,26.7682],
  414. 连云港:[119.1248,34.552],
  415. 邢台:[114.8071,37.2821],
  416. 邯郸:[114.4775,36.535],
  417. 郑州:[113.4668,34.6234],
  418. 鄂尔多斯:[108.9734,39.2487],
  419. 重庆:[107.7539,30.1904],
  420. 金华:[120.0037,29.1028],
  421. 铜川:[109.0393,35.1947],
  422. 银川:[106.3586,38.1775],
  423. 镇江:[119.4763,31.9702],
  424. 长春:[125.8154,44.2584],
  425. 长沙:[113.0823,28.2568],
  426. 长治:[112.8625,36.4746],
  427. 阳泉:[113.4778,38.0951],
  428. 青岛:[120.4651,36.3373],
  429. 韶关:[113.7964,24.7028]};var XAData =[[{ name:"西安"},{ name:"拉萨", value:100}],[{ name:"西安"},{ name:"上海", value:100}],[{ name:"西安"},{ name:"广州", value:100}],[{ name:"西安"},{ name:"西宁", value:100}],[{ name:"西安"},{ name:"银川", value:100}]];var XNData =[[{ name:"西宁"},{ name:"北京", value:100}],[{ name:"西宁"},{ name:"上海", value:100}],[{ name:"西宁"},{ name:"广州", value:100}],[{ name:"西宁"},{ name:"西安", value:100}],[{ name:"西宁"},{ name:"银川", value:100}]];var YCData =[[{ name:"拉萨"},{ name:"潍坊", value:100}],[{ name:"拉萨"},{ name:"哈尔滨", value:100}],[{ name:"银川"},{ name:"上海", value:100}],[{ name:"银川"},{ name:"西安", value:100}],[{ name:"银川"},{ name:"西宁", value:100}]];var planePath ="path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";//var planePath = 'arrow';varconvertData=function(data){var res =[];for(var i =0; i < data.length; i++){var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if(fromCoord && toCoord){
  430. res.push({
  431. fromName: dataItem[0].name,
  432. toName: dataItem[1].name,
  433. coords:[fromCoord, toCoord],
  434. value: dataItem[1].value
  435. });}}return res;};var color =["#a6c84c","#ffa022","#46bee9"];//航线的颜色var series =[];[["西安", XAData],["西宁", XNData],["银川", YCData]].forEach(function(item, i){
  436. series.push({
  437. name: item[0]+" Top3",
  438. type:"lines",
  439. zlevel:1,
  440. effect:{
  441. show:true,
  442. period:6,
  443. trailLength:0.7,
  444. color:"red",//arrow箭头的颜色
  445. symbolSize:3},
  446. lineStyle:{
  447. normal:{
  448. color: color[i],
  449. width:0,
  450. curveness:0.2}},
  451. data:convertData(item[1])},{
  452. name: item[0]+" Top3",
  453. type:"lines",
  454. zlevel:2,
  455. symbol:["none","arrow"],
  456. symbolSize:10,
  457. effect:{
  458. show:true,
  459. period:6,
  460. trailLength:0,
  461. symbol: planePath,
  462. symbolSize:15},
  463. lineStyle:{
  464. normal:{
  465. color: color[i],
  466. width:1,
  467. opacity:0.6,
  468. curveness:0.2}},
  469. data:convertData(item[1])},{
  470. name: item[0]+" Top3",
  471. type:"effectScatter",
  472. coordinateSystem:"geo",
  473. zlevel:2,
  474. rippleEffect:{
  475. brushType:"stroke"},
  476. label:{
  477. normal:{
  478. show:true,
  479. position:"right",
  480. formatter:"{b}"}},
  481. symbolSize:function(val){return val[2]/8;},
  482. itemStyle:{
  483. normal:{
  484. color: color[i]},
  485. emphasis:{
  486. areaColor:"#2B91B7"}},
  487. data: item[1].map(function(dataItem){return{
  488. name: dataItem[1].name,
  489. value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});var option ={
  490. tooltip:{
  491. trigger:"item",
  492. formatter:function(params, ticket, callback){if(params.seriesType =="effectScatter"){return"线路:"+ params.data.name +""+ params.data.value[2];}elseif(params.seriesType =="lines"){return(
  493. params.data.fromName +">"+
  494. params.data.toName +"<br />"+
  495. params.data.value
  496. );}else{return params.name;}}},
  497. legend:{
  498. orient:"vertical",
  499. top:"bottom",
  500. left:"right",
  501. data:["西安 Top3","西宁 Top3","银川 Top3"],
  502. textStyle:{
  503. color:"#fff"},
  504. selectedMode:"multiple"},
  505. geo:{
  506. map:"china",
  507. label:{
  508. emphasis:{
  509. show:true,
  510. color:"#fff"}},// 把中国地图放大了1.2倍
  511. zoom:1.2,
  512. roam:true,
  513. itemStyle:{
  514. normal:{// 地图省份的背景颜色
  515. areaColor:"rgba(20, 41, 87,0.6)",
  516. borderColor:"#195BB9",
  517. borderWidth:1},
  518. emphasis:{
  519. areaColor:"#2B91B7"}}},
  520. series: series
  521. };
  522. myChart.setOption(option);// 监听浏览器缩放,图表对象调用缩放resize函数
  523. window.addEventListener("resize",function(){
  524. myChart.resize();});})();

本文转载自: https://blog.csdn.net/qq_23073811/article/details/123573109
版权归原作者 coderYYY 所有, 如有侵权,请联系我们删除。

“【Echarts项目】前端就业数据可视化(HTML+Less+JavaScript+jQuery)入门级”的评论:

还没有评论