feat:交通安全形势研判分析图表

ZhangXianQiang

2024-02-28 7c0e34f7919fe3bc70a4df726cd5304006f3b1c0

feat:交通安全形势研判分析图表

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

@@ -9,19 +9,112 @@
      </div>
    </template>
    <template #content>
      <div id="analysisChart"></div>
      <div class="charts-container">
        <div id="analysisChart" ref="analysisChart"></div>

      </div>
    </template>
  </RightTitle>
</template>

<script setup>
import RightTitle from "@/components/right-title";
import { ref } from 'vue';

import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
const analysisChart = ref(null);
const selectItems = ref([
  { itemIndex: 1, name: '时间统计', isActive: false },
  { itemIndex: 2, name: '街道统计', isActive: true },
]);

const testData = ref([
  { name: '奎光塔街道', state1: 972, state2: 2124, state3: 1500 },
  { name: '蒲阳街道', state1: 972, state2: 2124, state3: 1500 },
  { name: '聚源镇', state1: 972, state2: 2124, state3: 1500 },
  { name: '银杏街道', state1: 972, state2: 2124, state3: 1500 },
  { name: '石羊镇', state1: 972, state2: 2124, state3: 1500 },
  { name: '龙池镇', state1: 972, state2: 2124, state3: 1500 },
  { name: '天马镇', state1: 972, state2: 2124, state3: 1500 },
  { name: '玉堂街道', state1: 972, state2: 2124, state3: 1500 },
  { name: '灌口街道', state1: 972, state2: 2124, state3: 1500 },
]);


const echartsConfig = {
  legend: {
    right: '0',
    textStyle: {
      color: 'rgba(77, 118, 176, 1)'
    },
  },
  tooltip: {},
  grid: {
    left: 0,
    right: 0,
    bottom: 0,
    top: '15%',
    containLabel: true
  },
  dataset: {
    dimensions: ['name', 'state1', 'state2', 'state3'],
    source: testData.value
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [
    {
      type: 'bar',
      name: '醉驾',
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 32, 54, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(0, 168, 217, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
    {
      type: 'bar',
      name: '酒驾',
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 31, 53, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(207, 178, 73, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
    {
      type: 'bar',
      name: '其他',
      itemStyle: {
        // 设置渐变色
        color: new echarts.graphic.LinearGradient(
          0, 1, 0, 0,
          [
            { offset: 0, color: 'rgba(14, 31, 53, 1)' },    // 0% 处的颜色
            { offset: 1, color: 'rgba(43, 176, 109, 1)' }     // 100% 处的颜色
          ]
        )
      },
    },
  ]
}



onMounted(() => {
  const myChart = echarts.init(analysisChart.value);
  myChart.setOption(echartsConfig);
})
</script>

<style lang="scss" scoped>
@@ -41,4 +134,18 @@
.item:last-child {
  margin-right: 0;
}

.charts-container {
  width: 100%;
  height: 306px;
  padding: 20px;
  background-color: rgba(17, 34, 58, 0.6);
  border: 1px solid rgba(47, 91, 157, 0.8);
}

#analysisChart {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>