前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
- 4.Echarts
- 5.自适应
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="css/index.css" /> </head> <body> <header> <h1>数据可视化-ECharts 虚拟数据</h1> <div class="showTime">当前时间：2020年8月<span></span></div> </header> <section class="mainbox"> <div class="column"> <div class="panel bar"> <h2> 柱状图-各行业程序员数量 <a href="javascript:;">2019</a> <a href="javacript:;"> 2020</a> </h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel line"> <h2>折线图-学习变化</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel pie"> <h2>饼形图-工程师年龄分布</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> </div> <div class="column"> <div class="no"> <div class="no-hd"> <ul> <li>125811</li> <li>104563</li> </ul> </div> <div class="no-bd"> <ul> <li>程序员需求人数</li> <li>程序员供应人数</li> </ul> </div> </div> <div class="map"> <div class="chart"></div> <div class="map1"></div> <div class="map2"></div> <div class="map3"></div> </div> </div> <div class="column"> <div class="panel bar1"> <h2>柱状图-开发技能</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel line1"> <h2>折线图-公司人员流动</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel pie1"> <h2>饼形图-各地区程序员占比</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> </div> </section> <script src="js/flexible.js"></script> <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script> <script src="js/index.js"></script> <script src="js/china.js"></script> <script src="js/myMap.js"></script> <script> (function (fn) { fn(); setInterval(fn, 1000); })(function () { var dt = new Date(); document.querySelector(".showTime span").innerHTML = dt.getDate() + "日-" + dt.getHours() + "时" + dt.getMinutes() + "分" + dt.getSeconds() + "秒"; }); </script> </body> </html>
2.CSS
* { margin: 0; padding: 0; box-sizing: border-box } li { list-style: none } @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF) } body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background-repeat: no-repeat; background-color: #06164a; background-size: cover; line-height: 1.15 } header { position: relative; height: 1.25rem; background: url(../images/head_bg.png) no-repeat top center; background-size: 100% 100% } header h1 { font-size: .475rem; color: #fff; text-align: center; line-height: 1rem } header .showTime { position: absolute; top: 0; right: .375rem; line-height: .9375rem; font-size: .25rem; color: rgba(255, 255, 255, .7) } .mainbox { min-width: 1024px; max-width: 1920px; padding: .125rem .125rem 0; display: flex } .mainbox .column { flex: 3 } .mainbox .column:nth-child(2) { flex: 5; margin: 0 .125rem .1875rem; overflow: hidden } .panel { position: relative; height: 3.875rem; border: 1px solid rgba(25, 186, 139, .17); background: rgba(255, 255, 255, .04) url(../images/line\(1\).png); padding: 0 .1875rem .5rem; margin-bottom: .1875rem } .panel::before { position: absolute; top: 0; left: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; border-radius: 20% } .panel::after { position: absolute; top: 0; right: 0; content: ""; width: 10px; height: 10px; border-top: 2px solid #02a6b5; border-right: 2px solid #02a6b5; border-radius: 20% } .panel .panel-footer { position: absolute; left: 0; bottom: 0; width: 100% } .panel .panel-footer::before { position: absolute; bottom: 0; left: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-left: 2px solid #02a6b5; border-radius: 20% } .panel .panel-footer::after { position: absolute; bottom: 0; right: 0; content: ""; width: 10px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; border-radius: 20% } .panel h2 { height: .6rem; line-height: .6rem; text-align: center; color: #fff; font-size: .25rem; font-weight: 400 } .panel h2 a { margin: 0 .1875rem; color: #fff; text-decoration: underline } .panel .chart { height: 3rem } .no { background: rgba(101, 132, 226, .1); padding: .1875rem } .no .no-hd { position: relative; border: 1px solid rgba(25, 186, 139, .17) } .no .no-hd::before { content: ""; position: absolute; width: 30px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; top: 0; left: 0 } .no .no-hd::after { content: ""; position: absolute; width: 30px; height: 10px; border-bottom: 2px solid #02a6b5; border-right: 2px solid #02a6b5; right: 0; bottom: 0 } .no .no-hd ul { display: flex } .no .no-hd ul li { position: relative; flex: 1; text-align: center; height: 1rem; line-height: 1rem; font-size: .875rem; color: #ffeb7b; padding: .05rem 0; font-family: electronicFont; font-weight: 700 } .no .no-hd ul li:first-child::after { content: ""; position: absolute; height: 50%; width: 1px; background: rgba(255, 255, 255, .2); right: 0; top: 25% } .no .no-bd ul { display: flex } .no .no-bd ul li { flex: 1; height: .5rem; line-height: .5rem; text-align: center; font-size: .225rem; color: rgba(255, 255, 255, .7); padding-top: .125rem } .map { position: relative; height: 10.125rem } .map .chart { position: absolute; top: 0; left: 0; z-index: 5; height: 10.125rem; width: 100% } .map .map1, .map .map2, .map .map3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6.475rem; height: 6.475rem; background: url(../images/map.png) no-repeat; background-size: 100% 100%; opacity: .3 } .map .map2 { width: 8.0375rem; height: 8.0375rem; background-image: url(../images/lbx.png); opacity: .6; animation: rotate 15s linear infinite; z-index: 2 } .map .map3 { width: 7.075rem; height: 7.075rem; background-image: url(../images/jt.png); animation: rotate1 10s linear infinite } @keyframes rotate { from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(360deg) } } @keyframes rotate1 { from { transform: translate(-50%, -50%) rotate(0deg) } to { transform: translate(-50%, -50%) rotate(-360deg) } } @media screen and (max-width:1024px) { html { font-size: 42px !important } } @media screen and (min-width:1920) { html { font-size: 80px !important } }
3.JavaScript
(function () { var myChart = echarts.init(document.querySelector(".bar .chart")); var option = { color: ["#2f89cf"], tooltip: { trigger: "axis", axisPointer: { type: "shadow" } }, grid: { left: "0%", top: "10px", right: "0%", bottom: "4%", containLabel: true }, xAxis: [{ type: "category", data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], axisTick: { alignWithLabel: true }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: "12" } }, axisLine: { show: false } }], yAxis: [{ type: "value", axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: "12" } }, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } }], series: [{ name: "直接访问", type: "bar", barWidth: "35%", data: [200, 300, 300, 900, 1500, 1200, 600], itemStyle: { barBorderRadius: 5 } }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); var dataAll = [{ year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] }, { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }]; document.querySelector(".bar h2").addEventListener("click", function (e) { var i = e.target == this.children[0] ? 0 : 1; option.series[0].data = dataAll[i].data; myChart.setOption(option); }); })(); (function () { var myChart = echarts.init(document.querySelector(".line .chart")); var data = { year: [ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ] }; var option = { color: ["#00f2f1", "#ed3f35"], tooltip: { trigger: "axis" }, legend: { right: "10%", textStyle: { color: "#4c9bfd" } }, grid: { top: "20%", left: "3%", right: "4%", bottom: "3%", show: true, borderColor: "#012f4a", containLabel: true }, xAxis: { type: "category", boundaryGap: false, data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], axisTick: { show: false }, axisLabel: { color: "rgba(255,255,255,.7)" }, axisLine: { show: false } }, yAxis: { type: "value", axisTick: { show: false }, axisLabel: { color: "rgba(255,255,255,.7)" }, splitLine: { lineStyle: { color: "#012f4a" } } }, series: [{ name: "新增项目", type: "line", stack: "总量", smooth: true, data: data.year[0] }, { name: "新增技能", type: "line", stack: "总量", smooth: true, data: data.year[1] }] }; myChart.setOption(option); myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { var myChart = echarts.init(document.querySelector(".pie .chart")); option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)", position: function (p) { return [p[0] + 10, p[1] - 10]; } }, legend: { top: "90%", itemWidth: 10, itemHeight: 10, data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"], textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, series: [{ name: "年龄分布", type: "pie", center: ["50%", "42%"], radius: ["40%", "60%"], color: ["#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", "#06b4ab", "#06c8ab", "#06dcab", "#06f0ab"], label: { show: false }, labelLine: { show: false }, data: [{ value: 1, name: "0岁以下" }, { value: 4, name: "20-29岁" }, { value: 2, name: "30-39岁" }, { value: 2, name: "40-49岁" }, { value: 1, name: "50岁以上" }] }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { var myChart = echarts.init(document.querySelector(".bar1 .chart")); var data = [90, 80, 75, 65, 65]; var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"]; var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"]; var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; option = { grid: { top: "10%", left: "22%", bottom: "10%" }, xAxis: { show: false }, yAxis: [{ show: true, data: titlename, inverse: true, axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { color: "#fff", rich: { lg: { backgroundColor: "#339911", color: "#fff", borderRadius: 15, align: "center", width: 15, height: 15 } } } }, { show: true, inverse: true, data: valdata, axisLabel: { textStyle: { fontSize: 12, color: "#fff" } } }], series: [{ name: "条", type: "bar", yAxisIndex: 0, data: data, barCategoryGap: 50, barWidth: 10, itemStyle: { normal: { barBorderRadius: 20, color: function (params) { var num = myColor.length; return myColor[params.dataIndex % num]; } } }, label: { normal: { show: true, position: "inside", formatter: "{c}%" } } }, { name: "框", type: "bar", yAxisIndex: 1, barCategoryGap: 50, data: [100, 100, 100, 100, 100], barWidth: 15, itemStyle: { normal: { color: "none", borderColor: "#00c1de", borderWidth: 3, barBorderRadius: 15 } } }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { var myChart = echarts.init(document.querySelector(".line1 .chart")); option = { tooltip: { trigger: "axis", axisPointer: { lineStyle: { color: "#dddc6b" } } }, legend: { top: "0%", textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, grid: { left: "10", top: "30", right: "10", bottom: "10", containLabel: true }, xAxis: [{ type: "category", boundaryGap: false, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, axisLine: { lineStyle: { color: "rgba(255,255,255,.2)" } }, data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30"] }, { axisPointer: { show: false }, axisLine: { show: false }, position: "bottom", offset: 20 }], yAxis: [{ type: "value", axisTick: { show: false }, axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } }, axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, splitLine: { lineStyle: { color: "rgba(255,255,255,.1)" } } }], series: [{ name: "流入", type: "line", smooth: true, symbol: "circle", symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: "#0184d5", width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(1, 132, 213, 0.4)" }, { offset: 0.8, color: "rgba(1, 132, 213, 0.1)" }], false), shadowColor: "rgba(0, 0, 0, 0.1)" } }, itemStyle: { normal: { color: "#0184d5", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 } }, data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 20, 40, 30, 60, 20, 40, 20, 40] }, { name: "流出", type: "line", smooth: true, symbol: "circle", symbolSize: 5, showSymbol: false, lineStyle: { normal: { color: "#00d887", width: 2 } }, areaStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "rgba(0, 216, 135, 0.4)" }, { offset: 0.8, color: "rgba(0, 216, 135, 0.1)" }], false), shadowColor: "rgba(0, 0, 0, 0.1)" } }, itemStyle: { normal: { color: "#00d887", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 } }, data: [50, 30, 50, 60, 10, 50, 30, 50, 60, 40, 60, 40, 80, 30, 50, 60, 10, 50, 30, 70, 20, 50, 10, 40, 50, 30, 70, 20, 50, 10, 40] }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })(); (function () { var myChart = echarts.init(document.querySelector(".pie1 .chart")); var option = { legend: { top: "90%", itemWidth: 10, itemHeight: 10, textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, color: ["#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff"], series: [{ name: "点位统计", type: "pie", radius: ["10%", "70%"], center: ["50%", "42%"], roseType: "radius", data: [{ value: 20, name: "西安" }, { value: 26, name: "北京" }, { value: 24, name: "上海" }, { value: 25, name: "其他" }, { value: 20, name: "武汉" }, { value: 25, name: "杭州" }, { value: 30, name: "深圳" }, { value: 42, name: "广州" }], label: { fontSize: 10 }, labelLine: { length: 10, length2: 10 } }] }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }); })();
4.Echarts
(function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".map .chart")); // 2. 指定配置和数据 // 2. 指定配置和数据 var geoCoordMap = { 上海: [121.4648, 31.2891], 东莞: [113.8953, 22.901], 东营: [118.7073, 37.5513], 中山: [113.4229, 22.478], 临汾: [111.4783, 36.1615], 临沂: [118.3118, 35.2936], 丹东: [124.541, 40.4242], 丽水: [119.5642, 28.1854], 乌鲁木齐: [87.9236, 43.5883], 佛山: [112.8955, 23.1097], 保定: [115.0488, 39.0948], 兰州: [103.5901, 36.3043], 包头: [110.3467, 41.4899], 北京: [116.4551, 40.2539], 北海: [109.314, 21.6211], 南京: [118.8062, 31.9208], 南宁: [108.479, 23.1152], 南昌: [116.0046, 28.6633], 南通: [121.1023, 32.1625], 厦门: [118.1689, 24.6478], 台州: [121.1353, 28.6688], 合肥: [117.29, 32.0581], 呼和浩特: [111.4124, 40.4901], 咸阳: [108.4131, 34.8706], 哈尔滨: [127.9688, 45.368], 唐山: [118.4766, 39.6826], 嘉兴: [120.9155, 30.6354], 大同: [113.7854, 39.8035], 大连: [122.2229, 39.4409], 天津: [117.4219, 39.4189], 太原: [112.3352, 37.9413], 威海: [121.9482, 37.1393], 宁波: [121.5967, 29.6466], 宝鸡: [107.1826, 34.3433], 宿迁: [118.5535, 33.7775], 常州: [119.4543, 31.5582], 广州: [113.5107, 23.2196], 廊坊: [116.521, 39.0509], 延安: [109.1052, 36.4252], 张家口: [115.1477, 40.8527], 徐州: [117.5208, 34.3268], 德州: [116.6858, 37.2107], 惠州: [114.6204, 23.1647], 成都: [103.9526, 30.7617], 扬州: [119.4653, 32.8162], 承德: [117.5757, 41.4075], 拉萨: [91.1865, 30.1465], 无锡: [120.3442, 31.5527], 日照: [119.2786, 35.5023], 昆明: [102.9199, 25.4663], 杭州: [119.5313, 29.8773], 枣庄: [117.323, 34.8926], 柳州: [109.3799, 24.9774], 株洲: [113.5327, 27.0319], 武汉: [114.3896, 30.6628], 汕头: [117.1692, 23.3405], 江门: [112.6318, 22.1484], 沈阳: [123.1238, 42.1216], 沧州: [116.8286, 38.2104], 河源: [114.917, 23.9722], 泉州: [118.3228, 25.1147], 泰安: [117.0264, 36.0516], 泰州: [120.0586, 32.5525], 济南: [117.1582, 36.8701], 济宁: [116.8286, 35.3375], 海口: [110.3893, 19.8516], 淄博: [118.0371, 36.6064], 淮安: [118.927, 33.4039], 深圳: [114.5435, 22.5439], 清远: [112.9175, 24.3292], 温州: [120.498, 27.8119], 渭南: [109.7864, 35.0299], 湖州: [119.8608, 30.7782], 湘潭: [112.5439, 27.7075], 滨州: [117.8174, 37.4963], 潍坊: [119.0918, 36.524], 烟台: [120.7397, 37.5128], 玉溪: [101.9312, 23.8898], 珠海: [113.7305, 22.1155], 盐城: [120.2234, 33.5577], 盘锦: [121.9482, 41.0449], 石家庄: [114.4995, 38.1006], 福州: [119.4543, 25.9222], 秦皇岛: [119.2126, 40.0232], 绍兴: [120.564, 29.7565], 聊城: [115.9167, 36.4032], 肇庆: [112.1265, 23.5822], 舟山: [122.2559, 30.2234], 苏州: [120.6519, 31.3989], 莱芜: [117.6526, 36.2714], 菏泽: [115.6201, 35.2057], 营口: [122.4316, 40.4297], 葫芦岛: [120.1575, 40.578], 衡水: [115.8838, 37.7161], 衢州: [118.6853, 28.8666], 西宁: [101.4038, 36.8207], 西安: [109.1162, 34.2004], 贵阳: [106.6992, 26.7682], 连云港: [119.1248, 34.552], 邢台: [114.8071, 37.2821], 邯郸: [114.4775, 36.535], 郑州: [113.4668, 34.6234], 鄂尔多斯: [108.9734, 39.2487], 重庆: [107.7539, 30.1904], 金华: [120.0037, 29.1028], 铜川: [109.0393, 35.1947], 银川: [106.3586, 38.1775], 镇江: [119.4763, 31.9702], 长春: [125.8154, 44.2584], 长沙: [113.0823, 28.2568], 长治: [112.8625, 36.4746], 阳泉: [113.4778, 38.0951], 青岛: [120.4651, 36.3373], 韶关: [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 }] ]; 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'; var convertData = 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) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord], value: dataItem[1].value }); } } return res; }; var color = ["#fff", "#fff", "#fff"]; //航线的颜色 var series = []; [ ["西安", XAData], ["西宁", XNData], ["银川", YCData] ].forEach(function(item, i) { series.push( { name: item[0] + " Top3", type: "lines", zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: "red", //arrow箭头的颜色 symbolSize: 3 }, lineStyle: { normal: { color: color[i], width: 0, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0] + " Top3", type: "lines", zlevel: 2, symbol: ["none", "arrow"], symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, symbol: planePath, symbolSize: 15 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0] + " Top3", type: "effectScatter", coordinateSystem: "geo", zlevel: 2, rippleEffect: { brushType: "stroke" }, label: { normal: { show: true, position: "right", formatter: "{b}" } }, symbolSize: function(val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] }, emphasis: { areaColor: "#2B91B7" } }, data: item[1].map(function(dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) } ); }); var option = { tooltip: { trigger: "item", formatter: function(params, ticket, callback) { if (params.seriesType == "effectScatter") { return "线路：" + params.data.name + "" + params.data.value[2]; } else if (params.seriesType == "lines") { return ( params.data.fromName + ">" + params.data.toName + "<br />" + params.data.value ); } else { return params.name; } } }, geo: { map: "china", label: { emphasis: { show: true, color: "#fff" } }, roam: false, // 放大我们的地图 zoom: 1, itemStyle: { normal: { areaColor: "rgba(43, 196, 243, 0.42)", borderColor: "rgba(43, 196, 243, 1)", borderWidth: 1 }, emphasis: { areaColor: "#2B91B7" } } }, series: series }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })();
5.自适应
(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12 * dpr + "px"; } else { document.addEventListener("DOMContentLoaded", setBodyFontSize); } } setBodyFontSize(); function setRemUnit() { var rem = docEl.clientWidth / 24; docEl.style.fontSize = rem + "px"; } setRemUnit(); window.addEventListener("resize", setRemUnit); window.addEventListener("pageshow", function (e) { if (e.persisted) { setRemUnit(); } }); if (dpr >= 2) { var fakeBody = document.createElement("body"); var testElement = document.createElement("div"); testElement.style.border = ".5px solid transparent"; fakeBody.appendChild(testElement); docEl.appendChild(fakeBody); if (testElement.offsetHeight === 1) { docEl.classList.add("hairlines"); } docEl.removeChild(fakeBody); } })(window, document);
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
