ECharts数据可视化 注：笔记内容来源于黑马Pink老师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 { height: 1.25rem; background: url(../images/bg.jpg) no-repeat top center; line-height: 1.15; } header { height: 1.25rem; background: url(../images/head_bg.png) no-repeat; background-size: 100% 100%; } header h1 { font-size: 0.475rem; color: #fff; text-align: center; line-height: 1rem; } header .showTime { position: absolute; right: 0.375rem; top: 0; line-height: 0.9375rem; color: #ffffff; } .mainbox { display: flex; min-width: 1024px; max-width: 1920px; margin: 0 auto; padding: 0.125rem 0.125rem 0; } .mainbox .column { flex: 3; } .mainbox .column:nth-child(2) { flex: 5; margin: 0 0.125rem 0.1875rem; overflow: hidden; } .mainbox .panel { position: relative; height: 3.875rem; border: 0.0125rem solid rgba(25, 186, 139, 0.17); padding: 0 0.1875rem 0.5rem; margin-bottom: 0.1875rem; background: url(../images/line.png); } .mainbox .panel::before { position: absolute; top: 0; left: 0; width: 0.125rem; height: 0.125rem; border-left: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel::after { position: absolute; top: 0; right: 0; width: 0.125rem; height: 0.125rem; border-right: 2px solid #02a6b5; border-top: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer { position: absolute; bottom: 0; left: 0; width: 100%; } .mainbox .panel .panel-footer::before { position: absolute; left: 0; bottom: 0; width: 0.125rem; height: 0.125rem; border-left: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } .mainbox .panel .panel-footer::after { position: absolute; bottom: 0; right: 0; width: 0.125rem; height: 0.125rem; border-right: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; content: ""; } .mainbox .panel h2 { height: 0.6rem; color: #fff; line-height: 0.6rem; text-align: center; font-size: 0.25rem; font-weight: 400; } .mainbox .panel h2 a { margin: 0; color: #fff; text-decoration: none; } .mainbox .panel .chart { height: 3rem; } .no { background: rgba(101, 132, 226, 0.1); padding: 0.1875rem; } .no .no-hd { position: relative; border: 1px solid rgba(25, 186, 139, 0.17); } .no .no-hd::before { position: absolute; top: 0; left: 0; content: ""; width: 30px; height: 10px; border-top: 2px solid #02a6b5; border-left: 2px solid #02a6b5; } .no .no-hd::after { position: absolute; bottom: 0; right: 0; content: ""; width: 30px; height: 10px; border-right: 2px solid #02a6b5; border-bottom: 2px solid #02a6b5; } .no .no-hd ul { display: flex; } .no .no-hd ul li { position: relative; flex: 1; line-height: 1rem; font-size: 0.875rem; color: #ffeb7b; text-align: center; font-family: "electronicFont"; } .no .no-hd ul li::after { content: ""; position: absolute; top: 25%; right: 0; height: 50%; width: 1px; background: rgba(255, 255, 255, 0.7); } .no .no-bd ul { display: flex; } .no .no-bd ul li { flex: 1; line-height: 0.5rem; font-size: 0.225rem; height: 0.5rem; color: rgba(255, 255, 255, 0.7); text-align: center; padding-top: 0.125rem; } .map { position: relative; height: 10.125rem; } .map .map1 { width: 6.475rem; height: 6.475rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url("../images/map.png"); background-size: 100%, 100%; opacity: 0.3; } .map .map2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8.0375rem; height: 8.0375rem; background: url("../images/lbx.png"); background-size: 100%, 100%; animation: rotate1 15s linear infinite; opacity: 0.6; } .map .map3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7.075rem; height: 7.075rem; background: url("../images/jt.png"); background-size: 100%, 100%; animation: rotate2 10s linear infinite; opacity: 0.6; } .map .chart { position: absolute; top: 0; left: 0; width: 100%; height: 10.125rem; } @keyframes rotate1 { form { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotate2 { form { 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: 1920px) { html { font-size: 80px !important; } } /*# sourceMappingURL=index.css.map */js//柱状图1 (function () { //1.实例化对象 let myChart = echarts.init(document.querySelector(".bar .chart")); //2.指定配置项和数据 let option = { color: ['#2f89cf'], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, //修改图表大小 grid: { left: '0%', top: '10px', right: '0%', bottom: '4%', containLabel: true }, xAxis: [ { type: 'category', data: ["旅游行业", "教育培训", "游戏行业", "医疗行业", "电商行业", "社交行业", "金融行业"], axisTick: { alignWithLabel: true }, //修改刻度标签相关样式 axisLabel: { color: "rgba(255,255,255,.6)", fontSize: "12" }, //不显示x坐标轴的线条 axisLine: { show: false } } ], yAxis: [ { type: 'value', //修改刻度标签相关样式 axisLabel: { color: "rgba(255,255,255,.6)", fontSize: 12 }, //y轴线条 axisLine: { lineStyle: { color: "rgba(255,255,255,.1)", width: 2 } }, //y轴分割线样式 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 } } ] }; //3.把配置项给实例对象 myChart.setOption(option); //4.图表自适应 window.addEventListener("resize", function () { myChart.resize(); }) })(); //柱状图2 (function () { //1.实例化对象 let myChart = echarts.init(document.querySelector(".bar2 .chart")); let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; //2.指定配置和数据 let option = { grid: { left: '10%', right: '22%', bottom: '10%', //containLabel: true }, xAxis: { //不显示x轴相关信息 show: false }, yAxis: [ { type: 'category', inverse: true, data: ["HTML5", "CSS3", "javascript", "VUE", "NODE"], //不显示y轴的线 axisLine: { show: false }, //不显示刻度 axisTick: { show: false }, //标签文字颜色 axisLabel: { color: "#fff" } }, { data: [702, 350, 610, 793, 664], inverse: true, // 不显示y轴的线 axisLine: { show: false }, // 不显示刻度 axisTick: { show: false }, axisLabel: { textStyle: { fontSize: 12, color: "#fff" } } } ], series: [ { name: '条', type: 'bar', data: [70, 34, 60, 78, 69], yAxisIndex: 0, itemStyle: { barBorderRadius: 20, //柱子颜色 color: function (params) { //params 传进来的是主子对象 //dataIndex 当前柱子的索引 return myColor[params.dataIndex]; } }, //柱子之间的距离 barCategoryGap: 50, //柱子宽度 barWidth: 10, //显示柱子内的文字 label: { show: true, position: "inside", //{c}会自动解析data中对应的数据 formatter: "{c}%" } }, { name: '框', type: 'bar', yAxisIndex: 1, barCategoryGap: 50, barWidth: 15, data: [100, 100, 100, 100, 100], itemStyle: { color: "none", borderColor: "#00c1de", borderWidth: 3, barBorderRadius: 15 } } ] }; //3.把配置给实例对象 myChart.setOption(option); // 4. 图表跟随屏幕自适应 window.addEventListener("resize", function () { myChart.resize(); }) })(); //折线图1 (function () { let yearData = [ { year: "2020", // 年份 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] ] }, { year: "2021", // 年份 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.实例化对象 let myChart = echarts.init(document.querySelector(".line .chart")); //2.指定配置 let option = { //修改折线颜色 color: ['#00f2f1', '#ed3f35'], tooltip: { trigger: 'axis' }, //图例组件 legend: { //data: ['新增粉丝', '新增游客'], series有name值时，此处的data不用写 //图例组件，文字颜色 textStyle: { color: '#4c9bfd', }, //这里的10%必须加引号 right: '10%' }, 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: '#4c9bfd' }, axisLine: { show: false //轴线 }, boundaryGap: false //轴内间距 }, yAxis: { type: 'value', axisTick: { show: false //刻度线 }, axisLabel: { color: '#4c9bfd' }, splitLine: { lineStyle: { color: '#012f4a' } } }, series: [ { name: '新增粉丝', type: 'line', smooth: true, //折线平滑显示 stack: '总量', data: yearData[0].data[0] }, { name: '新增游客', type: 'line', smooth: true, stack: '总量', data: yearData[0].data[1] } ] }; //3.把配置给实例对象 myChart.setOption(option); //4.图表跟随窗口自适应 window.addEventListener("resize", function () { myChart.resize(); }); //5.点击切换效果 $('.line h2').on('click', 'a', function () { //alert('hello'); //点击a之后，根据当前a的索引号，找到对应的yearData的相关对象 //console.log(yearData[$(this).index()]); let obj = yearData[$(this).index()]; option.series[0].data = obj.data[0]; option.series[1].data = obj.data[1]; //需要重新渲染 myChart.setOption(option); }); })(); //折线图2 (function () { //1.实例化对象 let myChart = echarts.init(document.querySelector(".line2 .chart")); //2.指定配置 let 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: [ { axisLabel: { textStyle: { color: "rgba(255,255,255,.6)", fontSize: 12 } }, //x轴线颜色 axisLine: { lineStyle: { color: "rgba(255,255,255,.2)", } }, type: 'category', boundaryGap: false, 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"] }, { 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: '播放量', smooth: true, type: 'line', lineStyle: { color: "#0184d5", width: 2 }, areaStyle: { 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)" }, //设置拐点为小圆点 symbol: "circle", //拐点大小 symbolSize: 5, //拐点颜色以及边框 itemStyle: { normal: { color: "#0184d5", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 } }, //开始不显示拐点，当鼠标经过时才显示 showSymbol: false, 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] }, { name: '转发量', type: 'line', stack: '总量', smooth: true, 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)" } }, //拐点 Symbol: "circle", //拐点大小 SymbolSize: 5, //拐点颜色及边框 itemStyle: { normal: { color: "#00d887", borderColor: "rgba(221, 220, 107, .1)", borderWidth: 12 } }, // 开始不显示拐点， 鼠标经过显示 showSymbol: false, 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], } ] }; //3.把配置给实例对象 myChart.setOption(option); //4.图表跟随窗口自适应 window.addEventListener("resize", function () { myChart.resize(); }); })(); //饼图1 (function () { //1.实例化对象 let myChart = echarts.init(document.querySelector(".pie .chart")); //2.指定配置 option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { //距离底部的距离 0% bottom: "0%", //小图标的宽度和高度 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', radius: ['50%', '50%'], //修改内圆半径和外圆半径（百分比是相对于容器来说的） radius: ["40%", "60%"], //不显示标签文字 label: { show: false }, //不显示连线 labelLine: { show: false }, avoidLabelOverlap: 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岁以上" } ], color: [ "#065aab", "#066eab", "#0682ab", "#0696ab", "#06a0ab", ], } ] }; //3.把配置给实例 myChart.setOption(option); //4.图表跟随窗口自适应 window.addEventListener("resize", function() { myChart.resize(); }) })(); //饼图2 (function () { //1.实例化对象 let myChart = echarts.init(document.querySelector(".pie2 .chart")); //2.指定配置 option = { color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'], tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { bottom: "0%", itemWidth: 10, itemHeight: 10, textStyle: { color: "rgba(255,255,255,.5)", fontSize: "12" } }, series: [ { name: '地区分布', type: 'pie', radius: ["10%", "70%"], center: ['50%', '50%'], roseType: 'radius', itemStyle: { borderRadius: 5 }, //文本标签控制饼形图文字的相关样式，它是一个对象 label: { fontSize: 10 }, labelLine: { //连接扇形的线段长度 length: 6, //连接文字的线段长度 length2: 8 }, 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: '湖北' } ] } ] }; //3.把配置给实力 myChart.setOption(option); //4.图表跟随窗口自适应 window.addEventListener("resize", function () { myChart.resize(); }) })(); //飞机地图模块 (function () { let myChart = echarts.init(document.querySelector(".map .chart")); let 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] }; let XAData = [ [{name:'西安'}, {name:'北京',value:100}], [{name:'西安'}, {name:'上海',value:100}], [{name:'西安'}, {name:'广州',value:100}], [{name:'西安'}, {name:'昆明',value:100}], [{name:'西安'}, {name:'银川',value:100}] ]; let XNData = [ [{name:'西宁'}, {name:'北京',value:100}], [{name:'西宁'}, {name:'上海',value:100}], [{name:'西宁'}, {name:'广州',value:100}], [{name:'西宁'}, {name:'西安',value:100}], [{name:'西宁'}, {name:'银川',value:100}] ]; let YCData = [ [{name:'银川'}, {name:'北京',value:100}], [{name:'银川'}, {name:'广州',value:100}], [{name:'银川'}, {name:'上海',value:100}], [{name:'银川'}, {name:'西安',value:100}], [{name:'银川'}, {name:'西宁',value:100}], ]; let 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'; let convertData = function (data) { let res = []; for (let i = 0; i < data.length; i++) { let dataItem = data[i]; let fromCoord = geoCoordMap[dataItem[0].name]; let 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; }; let color = ['#a6c84c', '#ffa022', '#46bee9'];//航线的颜色 let 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]) }; }) }); }); let 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; } } }, legend: { orient: 'vertical', top: 'bottom', left: 'right', data:['西安 Top3', '西宁 Top3', '银川 Top3'], textStyle: { color: '#fff' }, selectedMode: 'multiple' }, geo: { map: 'china', label: { emphasis: { show: true, color:'#fff' } }, //将地图放大1.2倍 zoom: 1.2, roam: true, itemStyle: { normal: { //地图省份背景颜色 areaColor: "rgba(20, 41, 87, 0.6)", borderColor: '#195BB9', borderWidth: 1, }, emphasis: { areaColor: '#2B91B7' } } }, series: series }; myChart.setOption(option); window.addEventListener("resize", function () { myChart.resize(); }) })();index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EChart</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <!--头部盒子--> <header> <h1>EChart 数据可视化</h1> <div class="showTime"></div> </header> <script> var t = null; t = setTimeout(time, 1000); function time(){ clearTimeout(t); //清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var d = dt.getDate(); var h = dt.getHours(); var m = dt.getMinutes(); var s = dt.getSeconds(); document.querySelector('.showTime').innerHTML = "当前时间：" + y + "-" + mt + "-" + d + " " + h + ":" + m + ":" + s; t = setTimeout(time,1000); //设定定时器，循环运行 } </script> <!--页面主体部分--> <section class="mainbox"> <div class="column"> <div class="panel bar"> <h2>柱状图-就业行业</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel line"> <h2>折线图-人员变化 <a href="javascript:;">2020</a> <a href="javacript:;"> 2021</a></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"> <!--no模块--> <div class="no"> <div class="no-hd"> <ul> <li>123456</li> <li>678910</li> </ul> </div> <div class="no-bd"> <ul> <li>前端需求人数</li> <li>市场供应人数</li> </ul> </div> </div> <!--地图模块--> <div class="map"> <div class="map1"></div> <!--map2在map1的下面，旋转动画会默认压住原来的球体--> <div class="map2"></div> <div class="map3"></div> <div class="chart"></div> </div> </div> <div class="column"> <div class="panel bar2"> <h2>柱状图-技能掌握</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel line2"> <h2>折线图-播放量</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> <div class="panel pie2"> <h2>饼图-地区分布</h2> <div class="chart"></div> <div class="panel-footer"></div> </div> </div> </section> <script src="js/flexible.js"></script> <script src="js/jquery.js"></script> <script src="js/echarts.min.js"></script> <script src="js/china.js"></script> <script src="js/index.js"></script> </body> </html>