搜索到
98
篇与
的结果
-
模板语法 插值语法用于解析标签体内容，{{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件）例：v-bind:href="xxx" 或简写为:href="xxx"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <a v-bind:href="url">点我跳转</a> <a :href="url">你好，{{person.name}}</a> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川', url: 'https://www.wangchouchou.com', person: { name: '药水哥' } } }) </script> </body> </html> -
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>
-
Vue基础语法 Vue基础语法1、Vue模板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue模板</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { } }); </script> </body> </html>2、else if<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>else if</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <h1 v-if="type==='A'">A</h1> <h1 v-else-if="type==='B'">B</h1> <h1 v-else>C</h1> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { type: 'A' } }); </script> </body> </html>2、for循环<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <li v-for="(item,index) in items"> {{item.message}}--{{index}} </li> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { items:[ {message: '孙笑川'}, {message: '刘波'}, {message: 'Giao哥'} ] } }); </script> </body> </html>4、事件绑定<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <button v-on:click="sayHello">点我</button> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { message: "Hello World" }, methods:{ //方法必须定义在Vue的methods对象中,v-on:事件 sayHello: function () { alert(this.message); } } }); </script> </body> </html>5、双向绑定<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双向绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> 用户名：<input type="text" v-model="msg"> {{msg}} <br> 文本框：<textarea name="text" id="" cols="30" rows="10" v-model="msg1"></textarea>{{msg1}} <br> 性别： <input type="radio" name="sex" value="男" v-model="msg2"> 男 <input type="radio" name="sex" value="女" v-model="msg2"> 女 <span>选中的性别为：{{msg2}}</span> <br> 选择城市： <select v-model="msg3"> <option value="" disabled>--请选择--</option> <option >北京</option> <option>上海</option> <option>广州</option> </select> <span>{{msg3}}</span> </div> <script> var vm = new Vue({ el: '#app', data: { msg: "", msg1: "", msg2: "", msg3: "" } }); </script> </body> </html>6、组件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <!--组件：传递组件中的值：props--> <!--v-for遍历data中的值，v-bind绑定test01到item，接收遍历出来的值--> <test v-for="item in items" v-bind:test01="item"></test> </div> <script> //定义一个Vue组件component Vue.component("test",{ props: ['test01'], //接收参数 template: '<li>{{test01}}</li>' //模板 } ); var vm = new Vue({ el: '#app', data: { items: ["孙笑川","刘波","Giao哥"] } }); </script> </body> </html>7、vue-axios<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue-axios</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!--v-clock解决闪烁问题--> <style> [v-clock]{ display: none; } </style> </head> <body> <!--view层 模板--> <div id="app" v-clock> <div>{{info.name}}</div> <a v-bind:href="info.url">{{info.url}}</a> <div>{{info.page}}</div> <div>{{info.isNonProfit}}</div> <div>{{info.address.street}}</div> <div>{{info.address.city}}</div> <div>{{info.address.country}}</div> </div> <script> var vm = new Vue({ el: '#app', data(){ return{ //请求的返回参数格式必须和json字符串一样 info:{ name: null, url: null, page: null, isNonProfit: null, address:{ street: null, city: null, country: null }, links:[ { name: null, url: null }, { name: null, url: null }, { name: null, url: null }, ] } } }, mounted(){ //钩子函数 链式编程 axios.get('../data.json').then(response=>(this.info=response.data)); } }); </script> </body> </html>8、计算属性<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> <script> var vm = new Vue({ el: '#app', //model：数据 data: { msg: "Hello" }, methods: { currentTime1: function () { return Date.now(); //返回一个时间戳 } }, computed: { //计算属性，与mothods的方法名不能重名，如果重名，只会调用methods的方法 currentTime2: function () { this.msg; //类似于Mybatis缓存，一旦涉及到增删改，虚拟DOM重新计算 return Date.now(); //虚拟DOM } } }); </script> </body> </html>9、插槽slot<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot插槽</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items> </todo> </div> <script> //slot插槽 Vue.component("todo",{ template: '<div>' + '<slot name="todo-title"></slot>'+ '<ul>' + '<slot name="todo-items"></slot>'+ '</ul>'+ '</div>' }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item'], template: '<li>{{item}}</li>' }); var vm = new Vue({ el: '#app', data: { title: "科目", todoItems: ["Java","PHP","Vue"] } }); </script> </body> </html>10、自定义事件内容分发<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义事件内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> </head> <body> <!--view层 模板--> <div id="app"> <todo> <todo-title slot="todo-title" v-bind:title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in todoItems" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items> </todo> </div> <script> //slot插槽 Vue.component("todo",{ template: '<div>' + '<slot name="todo-title"></slot>'+ '<ul>' + '<slot name="todo-items"></slot>'+ '</ul>'+ '</div>' }); Vue.component("todo-title",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item','index'], //只能绑定当前组件的方法 template: '<li>{{index}}--{{item}} <button @click="remove">删除</button></li>', methods: { remove: function (index) { //自定义事件分发 this.$emit('remove',index); } } }); var vm = new Vue({ el: '#app', data: { title: "科目", todoItems: ["Java","PHP","Vue"] }, methods: { removeItems: function (index) { console.log("删除"+this.todoItems[index]+"成功！"); this.todoItems.splice(index,1); //一次删除一个元素 } } }); </script> </body> </html>
-
jQuery 引入<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jQuery--> <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>--> <script src="lib/jquery-3.5.1.js"></script> </head> <body> <!-- 公式：$(selector).action() --> <a href="" id="test">点我</a> <script> $('#test').click(function () { alert("Hello World"); }) </script> </body> </html>选择器//css中的选择器在jQuery中全都能用 $('p').click(); //标签选择器 $('#id').click(); //id选择器 $('.class').click(); //class（类）选择器文档工具站：https://jquery.cuishifeng.cn/事件获取鼠标当前坐标Demo：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/jquery-3.5.1.js"></script> <style> #divMove{ width: 800px; height: 800px; border: 1px solid black; } </style> </head> <body> <!--获取鼠标的当前坐标--> mouse:<span id="mouseMove"></span> <div id="divMove"> 移动鼠标试试 </div> <script> //当网页元素加载完毕之后，响应事件 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('x:'+ e.pageX + 'y:'+e.pageY); }) }); </script> </body> </html>操作DOM节点文本操作$('ul li[id=test02]').text(); //获取值（解析为文本） $('ul li[id=test02]').text('abc'); //设置值 $('ul li[id=test01]').html(); //同理（解析为html） $('ul li[id=test01]').html('<strong>abc</strong>');CSS操作$('ul li[id=test02]').css({"color","red"});元素的显示和隐藏：本质：更改display属性$('ul li[id=test02]').show(); //显示 $('ul li[id=test02]').hide(); //隐藏
-
操作表单（验证） 表单的目的：提交信息获得要提交的信息<form action="post"> <p> <span>用户名：</span><input type="text" id="username"> </p> <!--多选框的值就是定义好的value--> <p> <span>性别：</span> <input type="radio" name="sex" value="man" id="boy">男 <input type="radio" name="sex" value="woman" id="girl">女 </p> </form> <script> var input_text = document.getElementById('username'), boy_radio = document.getElementById('boy'), girl_radio = document.getElementById('girl'); //得到输入框的值 input_text.value; //修改输入框的值 input_text.value = 'test'; //对于单选框、多选框等，只能取到固定的值,例如：value boy_radio.value ---> man boy_radio.checked; //查看返回的结果，如果为true，则被选中，否则反之 girl_radio.checked = true; //赋值（当前选中的性别修改为女） </script>提交表单<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--md5工具类--> <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> </head> <body> <!-- 表单绑定提交事件 onsubmit 绑定一个提交检测的函数，true false 将这个结果返回给表单，使用onsubmit接收 --> <form action="" method="post" onsubmit="return test()"> <p> <span>用户名：</span><input type="text" name="username" id="username"> </p> <p> <span>密码：</span><input type="password" id="input-password"> </p> <input type="hidden" name="password" id="md5-pwd"> <button type="submit">提交</button> </form> <script> function test() { var uname = document.getElementById('username'), pwd = document.getElementById('input-password'), md5pwd = document.getElementById('md5-pwd'); //md5加密，同时通过hidden表单优化password框 md5pwd.value = md5(pwd.value); //校验表单内容，true通过，false阻止提交 return true; } </script> </body> </html>md5加密及表单优化：补充说明：1、通过md5加密提交的数据2、设置隐藏的input提交密码，优化用户体验，即：md5pwd.value = md5(pwd.value);将提交的password值赋值给隐藏的(hidden)input框，具体表现为：用户点击提交时，密码框中的字符串在页面跳转时不会突然变长
-
操作DOM对象 核心浏览器网页就是一个Dom树形结构更新：更新Dom节点遍历：得到Dom节点删除：删除一个Dom节点添加：添加一个新的节点注：要操作一个Dom节点，必须先获得这个Dom节点获得DOM节点var h1 = document.getElementsByTagName('h1'); var p1 = document.getElementById('test01'); var p2 = document.getElementsByClassName('test02'); var father = document.getElementById('father'); var childrens = father.children[index]; //获取父节点下的子节点 //father.firstChild;更新节点<div id="test"> </div> <script> var test = document.getElementById('test'); </script>操作文本test.innerText='abc' //修改文本的值 test.innerHTML='<strong>abc</strong>' 解析HTML文本标签操作JStest.style.color = 'red'; //属性使用字符串包裹 test.style.fontSize = '18px'; // font-size 转 fontSize驼峰命名 test.style.padding = '2em';删除节点步骤：先获取父节点，再通过父节点删除自己<div id="father"> <h1>标题</h1> <p id="test01">xxx</p> <p class="test02">xxxxx</p> </div> <script> var self = document.getElementById('test01'); var father = test01.parentElement; father.removeChild(self); </script>注：删除多个节点的时候，children是动态变化的插入节点在获得DOM节点时，如果这个节点已经存在元素，就不能再使用innerHTML操作，会产生覆盖。追加：<p id="test01">数学</p> <div id="list"> <p id="test02">语文</p> <p id="test03">英语</p> <p id="test04">美术</p> </div> <script> var test01 = document.getElementById('test01'), list = document.getElementById('list'); list.appendChild(test01); </script>追加前：追加后：创建一个新的标签实现插入var test01 = document.getElementById('test01'), list = document.getElementById('list'), //通过js创建一个新的节点 test05 = document.createElement('p'); //创建一个p标签 test05.id = 'test05'; test05.innerText = '体育'; list.appendChild(test05) //list.appendChild(test01); //创建一个标签节点 var script = document.createElement('script'); script.setAttribute('type','text/javascript'); list.appendChild(script); //创建一个style标签 var style = document.createElement('style'); //创建一个style标签 style.setAttribute('type','text/css'); style.innerHTML = 'body{background-color: yellow}'; //设置标签内容 document.getElementsByTagName('head')[0].appendChild(style);insertBeforevar test01 = document.getElementById('test01'); var test02 = document.getElementById('test02'); var list = document.getElementById('list'); //要包含的节点.insertBefore(newNode,targetNode) list.insertBefore(test01,test02);
-
操作BOM对象 Browser Object Model：浏览器对象模型windowwindow代表浏览器窗口window.alert("Hello World") undefined window.innerHeight 906 window.innerWidth 559 ……Navigator（不建议使用）Navigator封装了浏览器的信息navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36" navigator.platform "Win32" ……注：一般情况下不使用navigator,存在被人为修改的隐患screen代表屏幕规格screen.width 1920 screen.height 1080locationlocation代表当前页面的URL信息host:"www.bing.com" href:"https://www.bing.com" protocol:"https:" reload:ƒ reload() //重新加载，刷新网页 //设置新的地址 location.assign('https://xxx.com')documentdocument代表当前的页面，HTML DOM文档树获取具体的文档树节点<dl id="test"> <dt>JavaScript</dt> <dd>demo01</dd> <dd>demo02</dd> </dl> <script> var dl = document.getElementById('test'); </script>获取cookiedocument.cookie劫持cookie原理：通过js恶意代码在服务器端可以设置cookie：httpOnlyhistory（不建议使用）history代表浏览器的历史记录history.back() //后退 history.forward() //前进
-
面向对象编程（JavaScript） 原型对象var Student = { name: "孙笑川", age: 33, run:function () { console.log(this.name + "run ...") } } var sun = { name: "sun" } //原型对象 sun.__proto__ = Student;function Student(name){ this.name = name; } //给Student新增一个方法 Student.prototype.hello = function () { alert("hello") }class 继承classs关键字在ES6引入1、定义一个类class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } var sun = new Student("sun"); sun.hello()2、继承class Student{ constructor(name){ this.name = name; } hello(){ alert("hello") } } class highStudent extends Student{ constructor(name,score){ super(name); this.score = score; } myScore(){ alert("100分！") } } var sun = new highStudent("sun",100);本质：查看对象原型原型链
