diff --git a/pages/investigation/task.vue b/pages/investigation/task.vue index c2c82de..99d98ef 100644 --- a/pages/investigation/task.vue +++ b/pages/investigation/task.vue @@ -67,7 +67,7 @@ - {{ formData.roadType }} @@ -136,10 +136,15 @@ - + + + + 交通流量 + + @@ -190,8 +195,35 @@ + + + + 违法情况 + + + 违法数量 + + + 暂无数据 + + 违法占比 + + + 暂无数据 + + + + 事故情况 + + + 事故数量 + + + 暂无数据 + + 重点排查 @@ -419,6 +451,7 @@ }, onReady() { this.getChartsData(); + this.getChartsData2() }, onLoad(e) { this.boxHeight = uni.getSystemInfoSync().windowHeight; @@ -519,10 +552,10 @@ required: true, errorMessage: '请选择道路类型', }, - + ] }, - + }, describe: { bigCategory: "", @@ -535,6 +568,44 @@ chartData: {}, //您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数,如都是默认参数,此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式,达到页面简洁的需求。 opts: { + color: [ + "#1890FF", + "#FAC858", + "#91CB74", + "#EE6666", + "#73C0DE", + "#3CA272", + "#FC8452", + "#9A60B4", + "#ea7ccc", + ], + padding: [0, 15, 15, 15], + enableScroll: false, + legend: { + icon: "rect", + position: "top", + float: "right", + padding: 10, + }, + xAxis: { + disableGrid: true, + }, + yAxis: { + gridType: "dash", + dashLength: 2, + }, + extra: { + area: { + type: "straight", + opacity: 0.2, + addLine: true, + width: 2, + gradient: true, + activeType: "hollow", + }, + }, + }, + opts2: { color: [ "#1890FF", "#FAC858", @@ -552,7 +623,8 @@ icon: "rect", position: "top", float: "right", - padding: 15, + padding: 10, + show: false, }, xAxis: { disableGrid: true, @@ -572,6 +644,39 @@ }, }, }, + chartData2: {}, + opts3: { + color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", + "#ea7ccc" + ], + padding: [5, 5, 5, 5], + enableScroll: false, + legend: { + show: true, + position: "right", + lineHeight: 25 + }, + extra: { + rose: { + type: "radius", + minRadius: 50, + activeOpacity: 0.5, + activeRadius: 10, + offsetAngle: 0, + labelWidth: 15, + border: true, + borderWidth: 2, + borderColor: "#FFFFFF", + linearType: "custom" + } + } + }, + chartData3: { + series: [] + }, + chartData4: { + series: [] + }, showProblem: false, showProblemTreeSelect: false, problemTreeSelect: 0, @@ -1156,9 +1261,8 @@ getChartsData() { //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接 let res = { - categories: ["01", "02", "03", "04", "05", "06","07", "08", "09", "10", "11", "12"], - series: [ - { + categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], + series: [{ name: "总量", legendShape: "line", data: [], @@ -1166,7 +1270,7 @@ { name: "大车", legendShape: "line", - data: [], + data: [], }, { name: "小车", @@ -1177,6 +1281,14 @@ }; this.chartData = JSON.parse(JSON.stringify(res)); }, + getChartsData2() { + //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接 + let res = { + categories: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"], + series: [], + }; + this.chartData2 = JSON.parse(JSON.stringify(res)); + }, // 删除图片 deletePic(event, key) { this[key].splice(event.index, 1); @@ -1241,7 +1353,7 @@ ); } }, - bottomButtonTwo(){ + bottomButtonTwo() { // if(!this.formData.roadType){ // return this.$.toast("请输入道路类型"); // } @@ -1843,6 +1955,7 @@ align-items: center; height: 110rpx; font-size: 30rpx; + font-weight: 600; .border { background-color: #2663BF; @@ -1852,6 +1965,18 @@ } } + .label-box2 { + height: 100rpx; + + + } + + .label-box-small { + font-size: 28rpx; + margin-top: -25rpx; + font-weight: 500; + } + .border-bottom { border-bottom: 1px #eee solid; } @@ -1859,7 +1984,16 @@ .border-top { border-top: 1px #eee solid; } + // .uni-forms-item__labe{ // width: ; // } + .nodata { + width: 100%; + text-align: center; + height: 300rpx; + line-height: 300rpx; + font-size: 28rpx; + color: #ccc; + } \ No newline at end of file