// 柱状图1模块 // (function() { // // 实例化对象 // var myChart = echarts.init(document.querySelector(".bar .chart")); // // 指定配置和数据 // var 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: { // 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)" // // width: 1, // // type: "solid" // } // }, // 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] } // ]; // $(".bar h2 ").on("click", "a", function() { // option.series[0].data = dataAll[$(this).index()].data; // myChart.setOption(option); // }); // })(); // 折线图定制 (数据离散率挖掘) (function() { var sortData = [{ data: [ [30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 200, 180, 79, 82, 64, 43, 60, 19, 82, 64, 43, 60, 19, 34], [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ], [400, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4] ] }]; var xData = function() { var data = []; for (var i = 1; i < 31; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".divergence .chart")); // 2.指定配置 var option = { color: [{ colorStops: [{ offset: 0, color: '#F9860C' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#07E1F1' // 0% 处的颜色 }, { offset: 1, color: '#0456CB' // 100% 处的颜色 }], }, { colorStops: [{ offset: 0, color: '#11F90C' // 0% 处的颜色 }, { offset: 1, color: '#3FC713' // 100% 处的颜色 }], } ], // color: ["#FF9C00", "#0096FF", "#11F90C"], // 通过这个color修改两条线的颜色 tooltip: { trigger: "axis", // backgroundColor: '#12DFE0', textStyle: { align: 'left' //图例左对齐 }, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, grid: { top: "0%", left: "1%", right: "1%", bottom: "10%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true // 包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { lineStyle: { color: 'rgba(255,255,255,.3)' } }, splitNumber: 8, splitLine: { show: false }, splitArea: { show: true, areaStyle: { color: ["rgba(250,250,250,0.05)", "rgba(250,250,250,0.0)"] } } }, yAxis: { type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#012f4a" // 分割线颜色 } } }, series: [{ symbol: "none", name: "方差", type: "line", data: sortData[0].data[0] }, { symbol: "none", name: "标准差", type: "line", data: sortData[0].data[1] }, { symbol: "none", name: "平均值", type: "line", data: sortData[0].data[2] } ] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })(); // 渗漏隐藏排查 (function() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.querySelector(".bar.hiddenCheck .chart")); option = { backgroundColor: 'transparent', color: ['rgba(0,150,255,.5)', 'rgba(255,156,0,.5)'], tooltip: { //提示框组件 trigger: 'axis', formatter: function(params) { var relVal = params[0].name; for (var i = 0, l = params.length; i < l; i++) { relVal += '
'; relVal += ''; relVal += params[i].seriesName + ' : ' + params[i].value; } return relVal; }, axisPointer: { type: 'shadow', }, textStyle: { color: '#fff', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, grid: { left: '0', right: '0', bottom: '30', top: '0', containLabel: true, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, xAxis: [{ type: 'category', // boundaryGap: true,//坐标轴两边留白 data: ['三层到四层', '四层到五层', '七层到八层', '八层到九层', '九层到十层'], axisLabel: { textStyle: { color: '#AADDFF', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, axisTick: { //坐标轴刻度相关设置。 show: false, }, axisLine: { //坐标轴轴线相关设置 }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, }, }, ], yAxis: [{ type: 'value', splitNumber: 5, axisLabel: false, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { show: true, lineStyle: { color: ['#204C6F'], opacity: 0.3, }, }, boundaryGap: ['0', '5%'], }], series: [{ name: '正常', type: 'bar', data: [400, 180, 40, 30, 31], barWidth: '11', itemStyle: { borderColor: "#0096FF", }, barGap: '50%', }, { name: '实际', type: 'bar', data: [500, 200, 50, 60, 36], barWidth: '11', itemStyle: { borderColor: "#FF9C00", }, }, ], }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })(); // 折线图定制 (跨设备数据关联) (function() { var sortData = [{ sortName: "喷淋末端与水泵启停关联", data: [ // 两个数组是因为有两条线 [24, 52, 60, 70, 80, 30, 95, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34], [40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 85, 80, 75, 70, 65, 60, 55, 50, 45, 40, 70, 80, 75, 70, 65, 60, 55, 50, 45, 40, ] ] }, { sortName: "试验消火栓与屋顶水箱液位关联", data: [ // 两个数组是因为有两条线 [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ], [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34, 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, ] ] } ]; var xData = function() { var data = []; for (var i = 1; i < 31; i++) { data.push(i); } return data; }(); // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".oldAnalysis .chart")); // 2.指定配置 var option = { color: ["#FF9C00", "#0096FF"], // 通过这个color修改两条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, grid: { top: "0%", left: "1%", right: "1%", bottom: "15%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: true // 包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { show: false // 去除轴线 } }, yAxis: { type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#012f4a" // 分割线颜色 } } }, series: [{ symbol: "none", name: "水泵启动", type: "line", smooth: true, // true 可以让我们的折线显示带有弧度 areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(255,156,0, 0.4)" }, { offset: 0.8, color: "rgba(255,156,0, 0.3)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[0] }, { symbol: "none", name: "水泵停止", type: "line", smooth: true, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(0,150,255,0.5)" }, { offset: 0.8, color: "rgba(0,150,255, 0.1)" } ], false ), shadowColor: "rgba(0, 0, 0, 0.1)" } }, data: sortData[0].data[1] } ] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); // 点击切换效果 $(".oldAnalysis .tab-line").on("click", "a", function() { $(this).addClass('active').siblings().removeClass('active') var obj = sortData[$(this).index()]; option.series[0].data = obj.data[0]; option.series[1].data = obj.data[1]; // 重新渲染 myChart.setOption(option); }); })(); // 折线图定制 (数据波动关联) (function() { var sortData = [{ data: [ [30, 70, 100, 120, 130, 190, 200, 230, 120, 100, 90, 80, 59, 30], ] }]; var xData = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层'] // var xData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, ] // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".hotAnalysis .chart")); // 2.指定配置 var option = { color: ["#FE92B3"], // 通过这个color修改三条线的颜色 tooltip: { trigger: "axis", textStyle: { align: 'left' //图例左对齐 }, backgroundColor: '#12DFE0', formatter: '{a0}: {c0}°C
{a1}: {c1}°C
{a2}: {c2}°C
时间2021年3月:{b}日' }, legend: false // { // // 如果series 对象有name 值,则 legend可以不用写data // itemGap: 20, // itemHeight: 2, // itemWidth: 15, // icon: 'rect', // textStyle: { // color: "#fff" // }, // top: "bottom", // } , grid: { top: "0%", left: "1%", right: "1%", bottom: "15%", show: true, // 显示边框 borderWidth: '0', //去除边框 containLabel: false, // 不包含刻度文字在内 }, xAxis: { type: "category", boundaryGap: false, data: xData, axisTick: { show: false // 去除刻度线 }, axisLabel: { color: "#AADDFF" // 文本颜色 }, axisLine: { show: false // 去除轴线 } }, yAxis: { type: "value", axisTick: { show: false // 去除刻度线 }, axisLabel: { show: false // 去除文本 }, axisLine: { show: false // 去除轴线 }, splitLine: { lineStyle: { color: "#012f4a" // 分割线颜色 } } }, series: [{ symbol: "none", name: "线缆温度", type: "line", smooth: true, areaStyle: { normal: { color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{ offset: 0, color: "rgba(255,147,180,.6)" }, { offset: 0.8, color: "rgba(255,147,180, 0.4)" } ], false ), } }, data: sortData[0].data[0] }] }; myChart.setOption(option); window.addEventListener("resize", function() { myChart.resize(); }); })(); // 饼形图定制 // 折线图定制 // (function() { // // 基于准备好的dom,初始化echarts实例 // var myChart = echarts.init(document.querySelector(".pie .chart")); // option = { // tooltip: { // trigger: "item", // formatter: "{a}
{b}: {c} ({d}%)", // position: function(p) { // //其中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(); // }); // // 点击切换显示数据 // $(".line h2").on("click", "a", function() { // // 点击a之后,根据当前的a的索引号,找到对应的yearData的数据 // var obj = yearData[$(this).index()]; // option.series[0].data = obj.data[0]; // option.series[1].data = obj.data[1]; // // 重新渲染数据 // myChart.setOption(option); // }); // })(); // 折线图 优秀作品 // (function() { // // 基于准备好的dom,初始化echarts实例 // 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() { // // 1. 实例化对象 // var myChart = echarts.init(document.querySelector(".pie1 .chart")); // // 2. 指定配置项和数据 // var option = { // legend: { // top: "90%", // itemWidth: 10, // itemHeight: 10, // textStyle: { // color: "rgba(255,255,255,.5)", // fontSize: "12" // } // }, // tooltip: { // trigger: "item", // formatter: "{a}
{b} : {c} ({d}%)" // }, // // 注意颜色写的位置 // color: [ // "#006cff", // "#60cda0", // "#ed8884", // "#ff9f7f", // "#0096ff", // "#9fe6b8", // "#32c5e9", // "#1d9dff" // ], // series: [{ // name: "点位统计", // type: "pie", // // 如果radius是百分比则必须加引号 // 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对象 // label: { // fontSize: 10 // }, // // 修饰引导线样式 // labelLine: { // // 连接到图形的线长度 // length: 10, // // 连接到文字的线长度 // length2: 10 // } // }] // }; // // 3. 配置项和数据给我们的实例化对象 // myChart.setOption(option); // // 4. 当我们浏览器缩放的时候,图表也等比例缩放 // window.addEventListener("resize", function() { // // 让我们的图表调用 resize这个方法 // myChart.resize(); // }); // })();