ljclw-ui/src/views/cardIot/components/OfCarUseNum.vue

<template>
  <div class="lun-main">
    <div style="padding: 10px 10px">
      <span style="color: #000; font-size: 18px">用车次数</span>
      <div style="margin-top: 60px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">168</div>
        <div style="color: #000; font-size: 14px">总体用车次数</div>
      </div>
      <div style="margin-top: 20px; width: 100px; text-align: center">
        <div style="margin: 10px 0; color: #3eb2e8; font-size: 20px">13</div>
        <div style="color: #000; font-size: 14px">本机构用车次数</div>
      </div>
    </div>
    <div style="padding: 10px 10px 10px 0">
      <div style="display: flex;">
        <a-radio-group name="radioGroup" :default-value="1">
          <a-radio :value="1"> 日 </a-radio>
          <a-radio :value="2"> 周 </a-radio>
          <a-radio :value="3"> 月 </a-radio>
          <a-radio :value="4"> 年 </a-radio>
        </a-radio-group>
        <a-range-picker
        :value="[startDate,endDate]"
        disabled
        style="width: 100%"
        v-model="daterangeCreateTime"
        valueFormat="YYYY-MM-DD"
        format="YYYY-MM-DD"
        allow-clear
      />
      </div>
    
      <div ref="chart" class="item" style="width: 380px; height: 260px" />
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import moment from 'moment';
export default {
  data() {
    return {
      daterangeCreateTime: [],
      dateFormat:'YYYY-MM-DD',
      startDate :'2023-08-28',
      endDate:'2023-08-28',
      moment: moment
    }
  },
  mounted() {
    // 获取dom容器
    const chartDom = this.$refs.chart
    // 初始化图表实例
    this.chart = echarts.init(chartDom)
    this.initChart()
    // console.log("da======ta", this.processData, this.maxNum);
  },
  methods: {
    initChart() {
      const data = [220, 182, 191, 234, 290, 330, 310]
      const sideData = data.map((item) => item + 4.5)
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b} : {c}',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        xAxis: {
          data: [
            '两江支队',
            '鸳鸯消防救援站',
            '翠云消防救援站',
            '龙头寺消防救援站',
            '大竹林特勤站',
            '礼嘉消防救援站',
            '奥园消防救援站',
          ],
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8',
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 30,
            textStyle: {
              color: '#3eb2e8',
              fontSize: 12,
            },
          },
        },
        yAxis: {
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#000',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#ccc',
            },
          },
        },
        series: [
          {
            name: 'a',
            tooltip: {
              show: false,
            },
            type: 'bar',
            barWidth: 14.5,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#0B4EC3', // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#138CEB', // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#17AAFE', // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            data: data,
            barGap: 0,
          },
          {
            type: 'bar',
            barWidth: 0,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: '#09337C', // 0% 处的颜色
                    },
                    {
                      offset: 0.6,
                      color: '#0761C0', // 60% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#0575DE', // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
            barGap: 0,
            data: sideData,
          },
          //   {
          //     name: 'b',
          //     tooltip: {
          //       show: false,
          //     },
          //     type: 'pictorialBar',
          //     itemStyle: {
          //       borderWidth: 1,
          //       borderColor: '#0571D5',
          //       color: '#1779E0',
          //     },
          //     symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
          //     symbolSize: ['30', '12'],
          //     symbolOffset: ['0', '-11'],
          //     //symbolRotate: -5,
          //     symbolPosition: 'end',
          //     data: data,
          //     z: 3,
          //   },
        ],
      }

      this.chart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.lun-main {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  //   background-color: aqua;
  border-left: 1px solid #ccc;
  pointer-events: all;
  padding-right: 10px;
}
</style>