409 lines
9.9 KiB
Vue
409 lines
9.9 KiB
Vue
<!--
|
|
* @Author: SunTao 328867980@qq.com
|
|
* @Date: 2024-10-21 10:03:08
|
|
* @LastEditors: SunTao 328867980@qq.com
|
|
* @LastEditTime: 2024-10-21 15:59:07
|
|
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-trend.vue
|
|
* @Description: 交安事件大屏-交安事件趋势
|
|
-->
|
|
|
|
<template>
|
|
<div class="content">
|
|
<div class="traffic-select">
|
|
<el-select
|
|
:popper-append-to-body="false"
|
|
v-model="itemSelect"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in trafficList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</div>
|
|
<div ref="trafficChart" class="traffic-echart"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
export default {
|
|
name: "TrafficTrend",
|
|
data() {
|
|
return {
|
|
// 下拉框选中绑定
|
|
itemSelect: "1",
|
|
// 下拉框数据
|
|
trafficList: [
|
|
{
|
|
label: "分公司",
|
|
value: "1",
|
|
},
|
|
{
|
|
label: "分公司2",
|
|
value: "2",
|
|
},
|
|
{
|
|
label: "分公3",
|
|
value: "3",
|
|
},
|
|
{
|
|
label: "分公司4",
|
|
value: "4",
|
|
},
|
|
{
|
|
label: "分公司5",
|
|
value: "5",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
created() {
|
|
this.getChartData();
|
|
},
|
|
methods: {
|
|
/* 获取柱状图数据 */
|
|
getChartData() {
|
|
this.$nextTick(() => {
|
|
this.drawChart();
|
|
});
|
|
},
|
|
/* 绘制echart */
|
|
drawChart() {
|
|
const chart = echarts.init(this.$refs.trafficChart);
|
|
chart.setOption({
|
|
// backgroundColor: "#041139",
|
|
tooltip: {
|
|
trigger: "item",
|
|
backgroundColor: "rgba(9, 24, 48, 0.5)",
|
|
borderColor: "rgba(75, 253, 238, 0.4)",
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: "#808C9F",
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
left: "10%",
|
|
right: 0,
|
|
bottom: "20%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
data: ["fdfs", "frffs", "wdwe", "10-1", "asdasd", "asd", "fdfs"],
|
|
axisLabel: {
|
|
color: "#808C9F",
|
|
fontSize: 12,
|
|
interval: 0,
|
|
},
|
|
axisLine: {
|
|
show: false, //不显示x轴
|
|
lineStyle: {
|
|
color: "rgba(53,65,95,1)",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false, //不显示刻度
|
|
},
|
|
boundaryGap: true,
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: "数量",
|
|
nameTextStyle: {
|
|
color: "#C7DAF2",
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: false, //不显示x轴
|
|
lineStyle: {
|
|
color: "rgba(53,65,95,1)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: "#808C9F",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
// 柱体
|
|
{
|
|
name: "人数",
|
|
type: "bar",
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
borderColor: "#08B4A6",
|
|
borderWidth: 1,
|
|
},
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: "rgba(105,160,231,0.1)",
|
|
},
|
|
// itemStyle: {
|
|
|
|
// },
|
|
label: {
|
|
show: false, //每条柱状图是否显示数字
|
|
formatter: "{c}",
|
|
position: "top",
|
|
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",
|
|
},
|
|
],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
chart.resize();
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
|
|
.traffic-select {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 0;
|
|
top: 0.2rem;
|
|
|
|
::v-deep .el-select {
|
|
width: 6.5rem;
|
|
|
|
.el-input .el-select__caret {
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.el-input--medium .el-input__inner {
|
|
height: 1.5rem;
|
|
background-color: transparent;
|
|
color: #89c5e8;
|
|
border-color: #6991cd;
|
|
}
|
|
|
|
.el-select-dropdown {
|
|
background-color: #102649;
|
|
border-color: #08204f;
|
|
.el-scrollbar {
|
|
.el-select-dropdown__wrap {
|
|
.el-scrollbar__view {
|
|
.el-select-dropdown__item:hover {
|
|
background-color: #2b4c7e;
|
|
}
|
|
|
|
.el-select-dropdown__item.selected {
|
|
background-color: #2b4c7e;
|
|
}
|
|
|
|
.el-select-dropdown__item.hover {
|
|
background-color: #2b4c7e;
|
|
}
|
|
}
|
|
|
|
.el-select-dropdown__list {
|
|
background-color: #102649;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.traffic-echart {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style> |