diff --git a/css/dataAnalysis/dataAnalysis.css b/css/dataAnalysis/dataAnalysis.css index 5dd6b33..f01b73d 100644 --- a/css/dataAnalysis/dataAnalysis.css +++ b/css/dataAnalysis/dataAnalysis.css @@ -21,11 +21,44 @@ body { } #left-box { - width: 30%; + width: 21.25%; background: url(../../img/alarmMge/select.png) no-repeat 0 0 / 100% 100%; - height: 100%; - padding-top: 0.85%; + height: 99%; box-sizing: border-box; } -#right-box {} \ No newline at end of file +#right-box { + width: 75.85%; + height: 99%; + background: url(../../img/alarmMge/alarm.png) no-repeat 0 0 / 100% 100%; + box-sizing: border-box; +} + +#one-echarts { + width: 100%; + height: 100%; +} + +.ul-box { + width: 100%; + height: 100%; + padding: 10% 0 0 0; + box-sizing: border-box; +} + +.ul-box li { + width: 96%; + margin: 0 2%; + height: 40px; + margin-bottom: 10px; + font-size: 16px; + cursor: pointer; +} + +.check { + background: url(../../img/alarmMge/bright.png) no-repeat 0 0 / 100% 100%; +} + +.nocheck { + background: url(../../img/alarmMge/dark.png) no-repeat 0 0 / 100% 100%; +} \ No newline at end of file diff --git a/js/pages/dataAnalysis/dataAnalysis.js b/js/pages/dataAnalysis/dataAnalysis.js index e69de29..30de7d8 100644 --- a/js/pages/dataAnalysis/dataAnalysis.js +++ b/js/pages/dataAnalysis/dataAnalysis.js @@ -0,0 +1,68 @@ +let myChart = echarts.init(document.getElementById("one-echarts")); +initEcharts(); + +/* 切换数据 */ +function changeData(that, type) { + $(".ul-box li").each(function () { + if ($(this).hasClass("check")) { + $(this).removeClass("check").addClass("nocheck"); + } + }); + $(that).removeClass("nocheck").addClass("check"); + myChart.dispose(); + myChart = echarts.init(document.getElementById("one-echarts")); + initEcharts(); +} + +/* 初始化echarts */ +function initEcharts(nameList, valueList) { + let fontSize = "16", + fontFamily = "Alibaba PuHuiTi R", + fontColor = "#fff"; + var option = { + grid: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + title: { + text: "", + x: "center", + }, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c} ({d}%)", + }, + legend: { + show: false, + // orient: 'vertical', + // left: 'left', + data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"], + }, + series: [ + { + name: "城市管理（社会治理网格）", + type: "pie", + radius: "65%", + center: ["50%", "50%"], + label: { + show: true, + + formatter: "{b} {d}%", + }, + data: [ + { value: 335, name: "直接访问" }, + { value: 310, name: "邮件营销" }, + { value: 234, name: "联盟广告" }, + { value: 135, name: "视频广告" }, + { value: 1548, name: "搜索引擎" }, + ], + }, + ], + }; + myChart.setOption(option, true); + window.addEventListener("resize", function () { + myChart.resize(); + }); +} diff --git a/pages/dataAnalysis/dataAnalysis.html b/pages/dataAnalysis/dataAnalysis.html index dfec70e..d549b72 100644 --- a/pages/dataAnalysis/dataAnalysis.html +++ b/pages/dataAnalysis/dataAnalysis.html @@ -21,10 +21,20 @@
- +
- +