feat:折线图表选择切换数据

ZhangXianQiang

2024-02-29 3e9d420384e8c076b03be439b6410878f1f6f373

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

@@ -3,7 +3,8 @@
  <RightTitle title="交通安全形势研判分析">
    <template #top>
      <div class="select-container flex">
        <div class="item whitespace-no-wrap cursor-pointer" v-for="item in selectItems" :key="item.itemIndex">
        <div class="item whitespace-no-wrap cursor-pointer" :class="{'select-active': item.isActive}" v-for="item in selectItems" :key="item.itemIndex"
          @click="changeChart(item)">
          {{ item.name }}
        </div>
      </div>
@@ -11,6 +12,11 @@
    <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-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </div>
      </div>
    </template>
  </RightTitle>
@@ -20,7 +26,21 @@
import RightTitle from "@/components/right-title";
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';

// dom
const analysisChart = ref(null);

// echart实例
let echartObject = null;

// type选择
const typeValue = ref('');

// 是否显示下拉框
const isShowSelect = ref(true);



const selectItems = ref([
  { itemIndex: 1, name: '时间统计', isActive: false },
  { itemIndex: 2, name: '街道统计', isActive: true },
@@ -38,8 +58,19 @@
  { name: '灌口街道', state1: 972, state2: 2124, state3: 1500 },
]);

const testData1 = ref([
  { name: '都江堰市', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '奎光塔街道', state: { '2023-1': 1000, '2023-2': 6000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '蒲阳街道', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '聚源镇', state: { '2023-1': 1000, '2023-2': 8000, '2023-3': 12233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '银杏街道', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 1233 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
  { name: '石羊镇', state: { '2023-1': 1000, '2023-2': 2000, '2023-3': 12313 }, state2: { '2023-1': 12312, '2023-2': 23123, '2023-3': 2111 } },
]);
let acitveData = ref(testData1.value[0]);

const echartsConfig = {

// 圆柱图表
const barConfig = ref({
  legend: {
    right: '0',
    icon: 'circle',
@@ -82,8 +113,6 @@
  },
  xAxis: { type: 'category', axisTick: false },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
@@ -152,13 +181,105 @@
      },
    },
  ]
});


// line配置
const lineConfig = ref(null);



// 图表更换
const changeChart = (selectItem) => {
  selectItems.value.map(item => item.isActive = false);
  selectItem.isActive = true;
  if (selectItem.itemIndex == 1) {
    echartObject.setOption(lineConfig.value, true);
    isShowSelect.value = true;
  } else {
    echartObject.setOption(barConfig.value, true);
    isShowSelect.value = false;
  }
}

// 配置数据
const setConfig = () => {
  acitveData.value = testData1.value.find((item) => item.name === typeValue.value);
  lineConfig.value = {
    legend: {
      right: '12%',
      icon: 'circle',
      textStyle: {
        color: 'rgba(77, 118, 176, 1)'
      },
      data: [
        {

          name: '酒驾',
          itemStyle: {
            color: 'rgba(207, 178, 73, 1)'
          }
        },
        {
          name: '其他',
          itemStyle: {
            color: 'rgba(43, 176, 109, 1)'
          }
        },
      ],
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',

      }
    },
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: Object.keys(acitveData.value.state)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '酒驾',
        data: Object.entries(acitveData.value.state).map(([key, value]) => value),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: 'rgba(207, 178, 73, 1)'
        }
      },
      {
        name: '其他',
        data: Object.entries(acitveData.value.state2).map(([key, value]) => value),
        type: 'line',
        smooth: true,
        itemStyle: {
          color: 'rgba(43, 176, 109, 1)'
        }
      }
    ]
  }
  echartObject.setOption(lineConfig.value, true);
}



// 挂载
onMounted(() => {
  const myChart = echarts.init(analysisChart.value);
  myChart.setOption(echartsConfig);
  echartObject = echarts.init(analysisChart.value);
  typeValue.value = testData1.value[0].name;
  setConfig();
})
</script>

@@ -174,8 +295,11 @@
  background: rgba(67, 102, 155, 0.4);
  border: 1px solid rgba(47, 91, 157, 0.8);
  flex-shrink: 0;
  color: #5B83BD;
}

.select-active {
 color: #fff; 
}
.item:last-child {
  margin-right: 0;
}
@@ -186,6 +310,15 @@
  padding: 20px;
  background-color: rgba(17, 34, 58, 0.6);
  border: 1px solid rgba(47, 91, 157, 0.8);
  position: relative;
}

.type-select-container {
  position: absolute;
  right: 20px;
  top: 14px;
  width: 120px;
  height: 23px;
}

#analysisChart {
@@ -193,4 +326,15 @@
  height: 100%;
  box-sizing: border-box;
}

::v-deep .el-input.el-input--suffix {
  .el-input__wrapper {
    background: rgba(67, 102, 155, 0.4) !important;
    border: 1px solid rgba(47, 91, 157, 0.8);
  }

  .el-input__inner {
    color: #4481DD;
  }
}
</style>