let loadingFunnel = () => { //title标示文字,标示线 loadingFunnel.title = (text, top, left, color, fontStyle, fontFamily, fontSize) => { return { text: text, top: top, left: left, textStyle: { color: color, fontStyle: fontStyle, fontFamily: fontFamily, fontSize: fontSize, } } }; loadingFunnel.arrData = [20, 40, 60, 80, 100]; var myChart = echarts.init(document.querySelector(".bar .chart")); option = { title: [ loadingFunnel.title('指标二', '25%', '21%', '#d1ecff', 'normal', 'sans-serif', '14'), loadingFunnel.title('40', '32%', '21%', '#EFC302', 'normal', 'Digital', '20'), loadingFunnel.title('指标一', '18%', '52%', '#d1ecff', 'normal', 'sans-serif', '14'), loadingFunnel.title('20', '24%', '55%', '#A5E104', 'normal', 'Digital', '20'), loadingFunnel.title('指标四', '43%', '16%', '#d1ecff', 'normal', 'sans-serif', '14'), loadingFunnel.title('80', '50%', '16%', '#0FE6BE', 'normal', 'Digital', '20'), loadingFunnel.title('指标三', '33%', '65%', '#d1ecff', 'normal', 'sans-serif', '14'), loadingFunnel.title('60', '39%', '68%', '#FF5A00', 'normal', 'Digital', '20'), loadingFunnel.title('指标五', '56%', '75%', '#d1ecff', 'normal', 'sans-serif', '14'), loadingFunnel.title('100', '62%', '78%', '#0078FF', 'normal', 'Digital', '20') ], color: ['#bb0004', '#FFD48A'], tooltip: { show: true, formatter: function(params, ticket, callback) { switch (params.name) { case "指标一": return "指标一 : " + loadingFunnel.arrData[0] break; case "指标二": return "指标二 : " + loadingFunnel.arrData[1] break; case "指标三": return "指标三 : " + loadingFunnel.arrData[2] break; case "指标四": return "指标四 : " + loadingFunnel.arrData[3] break; default: return "指标五 : " + loadingFunnel.arrData[4] } } }, grid: { // containLabel: true, left: '10%', top: "19%", bottom: "15%", }, xAxis: { show: false, data: [ '一季度', '二季度', '三季度', '四季度' ], axisTick: { show: false }, axisLabel: { color: '#5EA2ED', interval: 0 }, axisLine: { lineStyle: { color: '#1B5BBA', } } }, yAxis: { show: false, splitLine: { show: false }, axisLine: { lineStyle: { color: '#1B5BBA', } }, axisLabel: { color: '#5EA2ED', interval: 0 }, }, series: [{ type: 'pictorialBar', data: [{ name: '指标一', z: 100, value: 20, symbolSize: ['100%', '63%'], symbolPosition: 'center', symbolOffset: [152, '-600%'], symbol: 'image://../images/summary-bg.png', }, { name: '指标二', z: 90, value: 40, symbolSize: ['200%', '33%'], symbolPosition: 'center', symbolOffset: [-9.5, '-400%'], symbol: 'image://../images/summary-bg.png', }, { name: '指标三', z: 80, value: 60, symbolSize: ['225%', '33%'], symbolPosition: 'center', symbolOffset: [-6, '-145%'], symbol: 'image://../images/summary-bg.png', }, { name: '指标四', z: 70, value: 80, symbolSize: ['275%', '33%'], symbolPosition: 'center', symbolOffset: [-179, '-10%'], symbol: 'image://../images/summary-bg.png', }, { name: '指标五', z: 60, value: 100, symbolSize: ['335%', '33%'], symbolPosition: 'center', symbolOffset: [-175, '75%'], symbol: 'image://../images/summary-bg.png', }] }] }; 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")); var xData = ['三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层', '九到十层', '三到四层', '四到五层', '七到八层', '八到九层']; var 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: { fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, grid: { left: '0', right: '0', bottom: '40', top: '0', containLabel: true, }, legend: { // 如果series 对象有name 值,则 legend可以不用写data itemGap: 20, itemHeight: 2, itemWidth: 15, icon: 'rect', textStyle: { color: "#fff" }, top: "bottom", }, //添加横线滚动条 dataZoom: { start: 0, //默认为0 end: 100 - 1500 / 18, //默认为100 type: 'slider', show: true, xAxisIndex: [0], handleSize: 0, //滑动条的 左右2个滑动条的大小 height: 4, //组件高度 left: 20, //左边的距离 right: 20, //右边的距离 bottom: 30, //右边的距离 handleColor: '#CBBCDB', //h滑动图标的颜色 handleStyle: { borderColor: "#CBBCDB", borderWidth: "1", shadowBlur: 2, background: "#CBBCDB", shadowColor: "#CBBCDB", }, textStyle: { color: "#fff" }, backgroundColor: 'rgba(37, 46, 100, 0.45)', //两边未选中的滑动条区域的颜色 showDataShadow: false, //是否显示数据阴影 默认auto // showDetail: false, //即拖拽时候是否显示详细数值信息 默认true filterMode: 'filter', }, xAxis: [{ type: 'category', // boundaryGap: true,//坐标轴两边留白 data: xData, axisLabel: { interval: 0, // rotate: 340, // formatter: function(val) { // return val.split("").join("\n"); // }, //横轴信息文字竖直显示 textStyle: { color: '#AADDFF', fontStyle: 'normal', fontFamily: '微软雅黑', fontSize: 12, }, }, axisTick: { //坐标轴刻度相关设置。 show: false, }, axisLine: { //坐标轴轴线相关设置 }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, }, }, ], yAxis: [{ type: 'value', axisLabel: false, axisLine: { show: false, }, axisTick: { show: false, }, splitLine: { show: true, lineStyle: { color: ['#204C6F'], opacity: 0.3, }, }, boundaryGap: ['0', '10%'], }], series: [{ name: '正常', type: 'bar', data: [400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31, 400, 180, 40, 30, 31], barMaxWidth: '11', itemStyle: { borderColor: "#0096FF", }, barGap: '50%', }, { name: '实际', type: 'bar', data: [500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36, 500, 200, 50, 60, 36], barMaxWidth: '11', itemStyle: { borderColor: "#FF9C00", }, }, ], }; if (xData.length < 4) { delete option.dataZoom } // 使用刚指定的配置项和数据显示图表。 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 = ['一到二层', '二到三层', '三到四层', '四到五层', '五到六层', '六到七层', '七到八层', '八到九层', '九到十层', '十到十一层', '十一到十二层', '十二到十三层'] // 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}
{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(); // }); // })();