trike-datav/src/view/index/components/centerItem2.vue

<script setup>
import { onMounted, reactive, ref } from "vue";
import * as echarts from 'echarts';
import border from "../../../components/border.vue"
import { orderRanking } from "@/api/index.js"
import { useAppStore } from "@/store/app.js"

const appStore = useAppStore();

const xData2 = ref([]);
const data1 = ref([]);
const data_bottom = ref([]);
const orderCount = ref(0);

const echartsRef = ref(null);
const initMap = () => {

  // 基于DOM元素初始化echarts实例
  const chart = echarts.init(echartsRef.value);

  let option = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(91, 219, 246, 0.7)',
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: 60,
      bottom: 50
    },
    xAxis: {
      data: xData2.value,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        // interval: 0,
        textStyle: {
          color: '#fff',
          fontSize: 10,
        },
        margin: 20, //刻度标签与轴线之间的距离。
        formatter: function (value) {
          return value.split("").slice(0, 3).join("\n"); // 将文字逐个字符换行显示
        }
      },

    },
    yAxis: {
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(0, 156, 255, 0.10)'   // 设置分隔线颜色
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 10,
        },
      }
    },
    series: [
      {//三个最低下的圆片
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [10, 4],
        "symbolOffset": [0, 2],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0E60B2' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#5BDBF6'// 100% 处的颜色
            }], false)
          }
        },
        "data": data_bottom.value
      },


      //下半截柱状图
      {
        name: '2020',
        type: 'bar',
        barWidth: 10,
        barGap: '-100%',
        itemStyle: {//lenged文本
          opacity: .7,
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0E60B2' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#5BDBF6'// 100% 处的颜色
            }], false)
          }
        },

        data: data1.value
      },

      { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: 'bar',
        barWidth: 10,
        barGap: '-100%',
        stack: '广告',
        itemStyle: {
          color: 'transparent'
        },
        data: data1.value
      },

      {
        "name": "",
        "type": "pictorialBar",
        "symbolSize": [10, 4],
        "symbolOffset": [0, -2],
        "z": 12,
        itemStyle: {
          opacity: 1,
          color: function (params) {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#0E60B2' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#5BDBF6'// 100% 处的颜色
            }], false)
          }
        },
        "symbolPosition": "end",
        "data": data1.value
      },


    ]
  }

  // 使用配置项显示图表
  chart.setOption(option);
}

const loadOrderList = () => {
  orderRanking({
    areaCode: appStore.address.areaCode,
    streetCode: appStore.address.streetCode,
    type: 2, // 1表示今日, 2表示总计
  }).then((res) => {
    orderCount.value = res.data.orderCount;
    res.data.townOrderList.forEach(e => {
      xData2.value.push(e.street_name);
      data1.value.push(e.order_count);
      data_bottom.value.push(1)
    })
    setTimeout(() => {
      initMap()
    })
  })
}

onMounted(() => {
  loadOrderList();
})
</script>

<template>
  <border>
    <div class="box">
      <div class="title">订单总数</div>
      <div class="box-c">
        <div class="left">
          <div class="img">
            <div class="text">{{ orderCount }}</div>
          </div>
          <div>订单总数</div>
        </div>
        <div class="map" ref="echartsRef"></div>
      </div>
    </div>
  </border>
</template>

<style scoped lang="scss">
.box {
  height: 88%;
  padding: 20px;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 40px);
  .title {
    width: 100%;
    background-image: url(../../../assets/img/title2.png);
    background-size: 100% 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ifonts";
    font-size: 1.2rem;
  }
  .box-c {
    flex: 1;
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    justify-content: space-between;
    .left {
      width: 11rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .img {
        color: #5bdbf6;
        font-family: "ifonts";
        width: 10.2rem;
        height: 10.5rem;
        background-image: url(../../../assets/img/order_ball.png);
        background-size: 100% 100%;
        position: relative;
        margin-top: 2rem;
        .text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding-bottom: 2rem;
          font-size: 1.4rem;
        }
      }
    }
    .map {
      flex: 1;
      height: 100%;
    }
  }
}
</style>