fix：首页修改，交安事件联调，
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-17 11:34:00
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-28 09:50:01
|
||||
* @LastEditTime: 2024-10-29 09:40:35
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
|
||||
* @Description: 大屏首页
|
||||
-->
|
||||
@@ -83,7 +83,7 @@
|
||||
<!-- 左侧控制 -->
|
||||
<div class="road-select">
|
||||
<!-- 左上角病害筛查 -->
|
||||
<div class="road-div" v-if="mapClick === '2'" @click="clickImg">
|
||||
<div class="road-div" v-if="mapClick === 'defect'" @click="clickImg">
|
||||
<span>病害筛查</span>
|
||||
</div>
|
||||
<!-- 返回图片底图 -->
|
||||
@@ -119,9 +119,8 @@
|
||||
v-for="(item, index) in mapCareList"
|
||||
:key="`map-care-${index}`"
|
||||
:style="{ left: item.left, top: item.top }"
|
||||
@click="changeMap(false, item)"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<span @click="changeMap(false, item)">{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -129,6 +128,7 @@
|
||||
<fssm-map
|
||||
v-if="!showImgBk"
|
||||
ref="roadMap"
|
||||
@map-moveend="mapMoveend"
|
||||
@map-zoom="getZoom"
|
||||
@feature-select="featureSelect"
|
||||
></fssm-map>
|
||||
@@ -207,7 +207,11 @@ import TrafficEmergency from "./traffic-components/traffic-emergency.vue";
|
||||
import ImgDialog from "./components/img-dialog.vue";
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
import { selectTypeList } from "@/api/xj/screen/index";
|
||||
import {
|
||||
selectTypeList,
|
||||
mapPointList,
|
||||
mapPciList,
|
||||
} from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "BigScreen",
|
||||
components: {
|
||||
@@ -306,9 +310,9 @@ export default {
|
||||
// 切换地图图标类别按钮
|
||||
changeMapBtn: [
|
||||
{ name: "巡查车", click: "1" },
|
||||
{ name: "病害", click: "2" },
|
||||
{ name: "路产", click: "3" },
|
||||
{ name: "事件", click: "4" },
|
||||
{ name: "病害", click: "defect" },
|
||||
{ name: "路产", click: "equipment" },
|
||||
{ name: "事件", click: "event" },
|
||||
],
|
||||
/* 具体icon类别 */
|
||||
iconTypeList: [],
|
||||
@@ -441,23 +445,28 @@ export default {
|
||||
},
|
||||
/* 点击图片点位切换地图事件 */
|
||||
changeMap(boolen, value) {
|
||||
this.mapZoom = "";
|
||||
this.showImgBk = boolen;
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("1");
|
||||
if (!boolen) {
|
||||
// 默认点击的图标是巡查车
|
||||
this.changeIconType("defect");
|
||||
} else {
|
||||
this.mapClick = "";
|
||||
this.mapZoom = "";
|
||||
this.getZoom("10");
|
||||
}
|
||||
},
|
||||
/* 获取地图点位信息 */
|
||||
getCenterPiont() {
|
||||
this.centerPiont = [
|
||||
[123.30297096718999, 41.87942945541742],
|
||||
[123.08770760049077, 41.99409925522211],
|
||||
[123.6210023341045, 41.94237193236056],
|
||||
];
|
||||
this.drawPoint();
|
||||
// 如果当前已经有打点坐标
|
||||
if (!this.clusters) {
|
||||
mapPointList({ type: this.mapClick }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.centerPiont = data.map((item) => {
|
||||
return [item.geometry[0], item.geometry[1]];
|
||||
});
|
||||
this.drawPoint();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制地图点位 */
|
||||
drawPoint() {
|
||||
@@ -485,8 +494,8 @@ export default {
|
||||
features.push(feature);
|
||||
});
|
||||
const clusterSource = new Cluster({
|
||||
distance: 200,
|
||||
minDistance: 20,
|
||||
distance: 30,
|
||||
minDistance: 30,
|
||||
source: new VectorSource({
|
||||
features,
|
||||
}),
|
||||
@@ -527,21 +536,18 @@ export default {
|
||||
},
|
||||
/* 获取地图线段点位信息 */
|
||||
getLinePoint() {
|
||||
this.lineString = [
|
||||
[
|
||||
[123.32282646995006, 41.97498761493642],
|
||||
[123.35200891450947, 41.973156567233836],
|
||||
[123.37958916875502, 41.97956525514763],
|
||||
[123.39286432222431, 42.0021101177337],
|
||||
[123.40184182160729, 42.02952420024438],
|
||||
[123.4845914544503, 42.03583748930991],
|
||||
],
|
||||
[
|
||||
[122.5518798295274, 42.19039770874923],
|
||||
[123.7871925821671, 42.236903621119346],
|
||||
],
|
||||
];
|
||||
this.drawLine();
|
||||
if (!this.markLayerLines) {
|
||||
mapPciList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.lineString = data.map((item) => {
|
||||
return item.coordinates.split(";").map((it) => {
|
||||
return it.split(",").map(Number);
|
||||
});
|
||||
});
|
||||
this.drawLine();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制地图线段 */
|
||||
drawLine() {
|
||||
@@ -593,11 +599,17 @@ export default {
|
||||
this.mapClick = value;
|
||||
// 获取对应右上角icon类型
|
||||
this.getIconType(value);
|
||||
// 请求地图打点/绘制线段接口
|
||||
if (!this.mapZoom) {
|
||||
this.getZoom("10");
|
||||
} else {
|
||||
this.getZoom(this.mapZoom);
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 获取icon多选数据 */
|
||||
getIconType(value) {
|
||||
if (value === "2") {
|
||||
if (value === "defect") {
|
||||
this.iconTypeList = [
|
||||
{ name: "淤泥路面", value: "1" },
|
||||
{ name: "沥青路面", value: "2" },
|
||||
@@ -633,24 +645,30 @@ export default {
|
||||
getZoom(zoom) {
|
||||
if (zoom === "10") {
|
||||
// 绘制点位
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
});
|
||||
this.mapZoom = zoom;
|
||||
this.getCenterPiont();
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.markLayerLines);
|
||||
this.markLayerLines = null;
|
||||
});
|
||||
this.getCenterPiont();
|
||||
this.mapZoom = zoom;
|
||||
} else if (zoom === "9") {
|
||||
// 绘制线段
|
||||
if (this.mapZoom !== zoom) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
});
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.roadMap.instance.get("map");
|
||||
map.removeLayer(this.clusters);
|
||||
this.clusters = null;
|
||||
});
|
||||
this.getLinePoint();
|
||||
this.mapZoom = zoom;
|
||||
}
|
||||
},
|
||||
/* 地图缩放完成事件 */
|
||||
mapMoveend(zoom) {
|
||||
if (this.clusters && zoom > 13) {
|
||||
this.clusters.getSource().setDistance(1);
|
||||
} else if (this.clusters && zoom <= 13) {
|
||||
this.clusters.getSource().setDistance(30);
|
||||
}
|
||||
},
|
||||
/* 地图选中feature事件 */
|
||||
@@ -1092,7 +1110,8 @@ export default {
|
||||
background-size: 100% 100%;
|
||||
background-position: 50%;
|
||||
|
||||
span{
|
||||
span {
|
||||
height: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:12:55
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:38:45
|
||||
* @LastEditTime: 2024-10-28 13:35:47
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-emergency.vue
|
||||
* @Description: 交安事件大屏-交安突发事件
|
||||
-->
|
||||
@@ -27,7 +27,7 @@
|
||||
:key="`emergency-${index}`"
|
||||
>
|
||||
<div class="emergency-type">{{ item.type }}</div>
|
||||
<div class="emergency-name">{{ item.name }}</div>
|
||||
<div class="emergency-name">{{ item.segmentName }}</div>
|
||||
<div class="emergency-status"><a></a>{{ item.status }}</div>
|
||||
<div class="emergency-operation">操作</div>
|
||||
</div>
|
||||
@@ -38,7 +38,7 @@
|
||||
|
||||
<script>
|
||||
import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
|
||||
import { emergencyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficEmergency",
|
||||
components: { vueSeamlessScroll },
|
||||
@@ -56,45 +56,22 @@ export default {
|
||||
waitTime: 2000, // 单步运动停止的时间(默认值1000ms)
|
||||
},
|
||||
// 事件列表
|
||||
emergencyList: [
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
{
|
||||
type: "中分率植物缺死",
|
||||
name: "换成高速啊实打实的",
|
||||
status: "待核验",
|
||||
},
|
||||
],
|
||||
emergencyList: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取事件列表数据 */
|
||||
getData() {
|
||||
emergencyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.emergencyList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -31,32 +31,41 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { rankCount } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficRank",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 排名数据
|
||||
rankList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取排名数据 */
|
||||
getData() {
|
||||
this.rankList = [
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 456 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 356 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
{ name: "G4562(没开始快速打开看)", value: 556 },
|
||||
];
|
||||
rankCount({ type: this.select }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.rankList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,24 +2,46 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 09:59:32
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:29:30
|
||||
* @LastEditTime: 2024-10-28 11:42:15
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-safety.vue
|
||||
* @Description: 交安事件大屏-交安事件
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="content">
|
||||
<div class="traffic-left"><span>87</span></div>
|
||||
<div class="traffic-left"><span>{{today}}</span></div>
|
||||
<div class="traffic-right">
|
||||
<div class="right-sum"><span>261</span>个</div>
|
||||
<div class="right-rate"><span> 37 </span>%</div>
|
||||
<div class="right-sum"><span>{{all}}</span>个</div>
|
||||
<div class="right-rate"><span> {{scale}} </span>%</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { safetyData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficSafety",
|
||||
data() {
|
||||
return {
|
||||
today: 0,
|
||||
all: 0,
|
||||
scale: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
safetyData().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.today = data.today;
|
||||
this.all = data.all;
|
||||
this.scale = data.scale;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -75,7 +97,7 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
@@ -104,7 +126,7 @@ export default {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: 100% 50%;
|
||||
color:#AAC6C7;
|
||||
color: #aac6c7;
|
||||
font-size: 0.9rem;
|
||||
|
||||
span {
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:06:24
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-22 09:27:49
|
||||
* @LastEditTime: 2024-10-28 13:17:29
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
|
||||
* @Description: 交安事件大屏-交安事件统计
|
||||
-->
|
||||
@@ -40,35 +40,22 @@
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { statisticData } from "@/api/xj/screen/traffic-screen";
|
||||
export default {
|
||||
name: "TrafficStatistic",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉数据绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
currentList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
currentList: [],
|
||||
// 取色盘
|
||||
colorList: [
|
||||
"#18F7FF",
|
||||
@@ -115,14 +102,46 @@ export default {
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.currentList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取echart图数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
const data = {
|
||||
itemName: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
statisticData(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.echartList = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart图 */
|
||||
@@ -179,12 +198,12 @@ export default {
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontFamily:"DouYu",
|
||||
fontFamily: "DouYu",
|
||||
fontSize: 28,
|
||||
color: "rgba(255, 183, 89, 0.8)",
|
||||
},
|
||||
b: {
|
||||
fontFamily:"DinBm",
|
||||
fontFamily: "DinBm",
|
||||
fontSize: 12,
|
||||
color: "#ffffff",
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-21 10:03:08
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-21 15:59:07
|
||||
* @LastEditTime: 2024-10-28 13:47:21
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
||||
* @Description: 交安事件大屏-交安事件趋势
|
||||
-->
|
||||
@@ -28,50 +28,128 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDropList } from "@/api/xj/screen/disease-screen";
|
||||
import { eventLog } from "@/api/xj/screen/traffic-screen";
|
||||
import * as echarts from "echarts";
|
||||
export default {
|
||||
name: "TrafficTrend",
|
||||
props: {
|
||||
select: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 下拉框选中绑定
|
||||
itemSelect: "1",
|
||||
itemSelect: "",
|
||||
// 下拉框数据
|
||||
trafficList: [
|
||||
{
|
||||
label: "分公司",
|
||||
value: "1",
|
||||
},
|
||||
{
|
||||
label: "分公司2",
|
||||
value: "2",
|
||||
},
|
||||
{
|
||||
label: "分公3",
|
||||
value: "3",
|
||||
},
|
||||
{
|
||||
label: "分公司4",
|
||||
value: "4",
|
||||
},
|
||||
{
|
||||
label: "分公司5",
|
||||
value: "5",
|
||||
},
|
||||
],
|
||||
trafficList: [],
|
||||
// echart图表数据
|
||||
echartData: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
select: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
this.getCurrentList();
|
||||
this.getChartData();
|
||||
}
|
||||
},
|
||||
},
|
||||
itemSelect: {
|
||||
handler() {
|
||||
this.getChartData();
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取右上角下拉框数据 */
|
||||
getCurrentList() {
|
||||
getDropList({ type: this.select }).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
this.trafficList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 获取柱状图数据 */
|
||||
getChartData() {
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
const data = {
|
||||
id: this.itemSelect,
|
||||
type: this.select,
|
||||
};
|
||||
eventLog(data).then(({ data, code }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "ffff");
|
||||
this.echartData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制echart */
|
||||
drawChart() {
|
||||
const xData = this.echartData.map((item) => {
|
||||
return item.label;
|
||||
});
|
||||
const yData = this.echartData.map((item,index) => {
|
||||
if (index % 2 == 0) {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
...item,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
// backgroundColor: "#041139",
|
||||
@@ -95,7 +173,7 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
||||
data: xData,
|
||||
axisLabel: {
|
||||
color: "#808C9F",
|
||||
fontSize: 12,
|
||||
@@ -144,7 +222,7 @@ export default {
|
||||
series: [
|
||||
// 柱体
|
||||
{
|
||||
name: "人数",
|
||||
name: "数量",
|
||||
type: "bar",
|
||||
barWidth: 10,
|
||||
itemStyle: {
|
||||
@@ -155,9 +233,6 @@ export default {
|
||||
backgroundStyle: {
|
||||
color: "rgba(105,160,231,0.1)",
|
||||
},
|
||||
// itemStyle: {
|
||||
|
||||
// },
|
||||
label: {
|
||||
show: false, //每条柱状图是否显示数字
|
||||
formatter: "{c}",
|
||||
@@ -165,176 +240,7 @@ export default {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 15,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 25,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 35,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 45,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 55,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 65,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#033E43",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#00FFEA",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 75,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
type: "linear",
|
||||
global: false,
|
||||
colorStops: [
|
||||
{
|
||||
//第一节下面
|
||||
offset: 0,
|
||||
color: "#034299",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#35F0FF",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user