feat:道路数据接口

ZhangXianQiang

2024-03-15 b3d89f70b2fefd7438eec61f7662da30ff8923c1

 src/views/daoAnOffice/right/analysis/index.vue

@@ -1,4 +1,5 @@
<!-- 交通安全形势研判分析 -->

<template>
  <RightTitle title="交通安全形势研判分析">
    <template #top>
@@ -9,11 +10,12 @@
        </div>
      </div>
    </template>

    <template #content>
      <div class="charts-container">
        <div id="analysisChart" ref="analysisChart"></div>
        <div class="type-select-container" v-show="isShowSelect">
          <el-select v-model="typeValue" class="select-style" @change="setConfig">
          <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig">
            <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </div>
@@ -46,6 +48,7 @@
  { itemIndex: 2, name: '街道统计', isActive: false },
]);

// 柱状图数据
const testData = ref([
  { name: '奎光塔街道', state1: 1400, state2: 3533, state3: 2316 },
  { name: '蒲阳街道', state1: 1820, state2: 4281, state3: 3064 },
@@ -58,38 +61,61 @@
  { name: '灌口街道', state1: 972, state2: 2124, state3: 1500 },
]);

// 折线数据
const testData1 = ref([
  {
    name: '都江堰市',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2312, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '奎光塔街道',
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224,'2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 21, '2023-2': 12, '2023-3': 224, '2023-4': 662, '2023-5': 71 },
    state2: { '2023-1': 12312, '2023-2': 21, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '蒲阳街道',
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233,'2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2131, '2023-3': 1233, '2023-4': 2132, '2023-5': 3211 },
    state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '聚源镇',
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111,'2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 500, '2023-3': 1111, '2023-4': 2132, '2023-5': 2999 },
    state2: { '2023-1': 12312, '2023-2': 2222, '2023-3': 2111, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '银杏街道',
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233,'2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123,'2023-4': 321, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233, '2023-4': 2132, '2023-5': 12 },
    state2: { '2023-1': 1231, '2023-2': 121, '2023-3': 123, '2023-4': 321, '2023-5': 2999 }
  },
  {
    name: '石羊镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233,'2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241,'2023-4': 2132, '2023-5': 2999 }
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '龙池镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '天马镇',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '玉堂街道',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0, '2023-6': 123, '2023-7': 21 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999 }
  },
  {
    name: '灌口街道',
    state: { '2023-1': 1000, '2023-2': 8334, '2023-3': 1233, '2023-4': 123, '2023-5': 0 },
    state2: { '2023-1': 12312, '2023-2': 512, '2023-3': 241, '2023-4': 2132, '2023-5': 2999, '2023-6': 61, '2023-7': 12 }
  },
]);

// 当前选项
let acitveData = ref(testData1.value[0]);


@@ -123,7 +149,30 @@
    ]

  },
  tooltip: {},
  tooltip: {
    show: true,
    trigger: 'axis',
    backgroundColor: '#000001cc',
    borderWidth: 0,
    textStyle: {
      color: '#4D76B0',
      fontSize: 16
    },
    axisPointer: {
      type: 'shadow',
      lable: {
        color: '#000000'
      }
    },
    padding: [20, 25],
    formatter: function (params) {
      let temp = params[0].name + '<br/>';
      params.forEach(element => {
        temp += element.seriesName + ':' + `<span style="color:${getColor(element.componentIndex)}">${element.value[`state${element.componentIndex + 1}`]}</span>` + '<br/>';
      });
      return temp;
    }
  },
  grid: {
    left: 0,
    right: 0,
@@ -135,8 +184,31 @@
    dimensions: ['name', 'state1', 'state2', 'state3'],
    source: testData.value
  },
  xAxis: { type: 'category', axisTick: false },
  yAxis: {},
  xAxis: {
    type: 'category',
    axisTick: false,
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
      margin: 15
    },
    axisLine: {
      lineStyle: {
        color: '#4d76b033'
      }
    }
  },
  yAxis: {
    axisLabel: {
      fontSize: 14,
      color: '#4D76B0',
    },
    splitLine: {
      lineStyle: {
        color: '#4d76b033'
      }
    }
  },
  series: [
    {
      type: 'bar',
@@ -255,9 +327,25 @@
    tooltip: {
      show: true,
      trigger: 'axis',
      backgroundColor: '#000001cc',
      borderWidth: 0,
      textStyle: {
        color: '#4D76B0',
        fontSize: 16
      },
      axisPointer: {
        type: 'shadow',

        lable: {
          color: '#000000'
        }
      },
      padding: [20, 25],
      formatter: function (params) {
        let temp = params[0].name + '<br/>';
        params.forEach(element => {
          temp += element.seriesName + ':' + `<span style="color:${element.componentIndex === 1 ? '#2bb06d' : '#cfb249'}">${element.value}</span>` + '<br/>';
        });
        return temp;
      }
    },
    grid: {
@@ -269,10 +357,31 @@
    },
    xAxis: {
      type: 'category',
      data: Object.keys(acitveData.value.state)
      data: Object.keys(acitveData.value.state),
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0',
        margin: 15
      },

      axisTick: false,
      axisLine: {
        lineStyle: {
          color: '#4d76b033'
        }
      }
    },
    yAxis: {
      type: 'value'
      type: 'value',
      axisLabel: {
        fontSize: 14,
        color: '#4D76B0'
      },
      splitLine: {
        lineStyle: {
          color: '#4d76b033'
        }
      }
    },
    series: [
      {
@@ -299,6 +408,12 @@
}


// 颜色
const getColor = (index) => {
  let colorList = ['#00a8d9', '#cfb249', '#2bb06d'];
  return colorList[index % colorList.length];
}

// 挂载
onMounted(() => {
  echartObject = echarts.init(analysisChart.value);
@@ -320,6 +435,7 @@
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
  font-family: 'PingFang SC';
}

.select-active {
@@ -362,4 +478,32 @@
  .el-input__inner {
    color: #4481DD;
  }
}</style>
}
</style>

<style lang="scss">

.el-popper {
  background-color: rgba(21, 56, 105, 0.8) !important;
  border-color: transparent  !important;
}
.el-popper.is-light .el-popper__arrow::before {
  background-color: rgba(21, 56, 105, 0.8) !important;
  border-color: transparent  !important;
}
.el-scrollbar__view {
  padding: 0 !important;
}
.el-select-dropdown__item {
  color: #5B83BD;
}

.el-select-dropdown__wrap {
  padding: 0 !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #203f64 !important;
}
</style>