vue3统计图折线图扇形图柱状图

npm install echarts --save

局部使用

<template>

  <div>
    <el-row>
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户注册统计</span>
              <div style="float: right;">

                <el-date-picker
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    v-model="year_month5"
                    type="month"
                    placeholder="选择月份"
                />
                <el-button type="primary" @click="getReg">
                  <el-icon>
                    <Search/>
                  </el-icon>
                  搜索
                </el-button>
              </div>

            </div>
          </template>

          <div ref="chartDom5" style="width:100%; height: 400px"></div>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>用户性别统计</span>


            </div>
          </template>

          <div ref="chartDom6" style="width:100%; height: 400px"></div>

        </el-card>
      </el-col>
    </el-row>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>朋友圈统计</span>
          <div style="float: right;">

            <el-date-picker
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-model="year_month"
                type="month"
                placeholder="选择月份"
            />
            <el-button type="primary" @click="getPyq">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
          </div>

        </div>
      </template>

      <div ref="chartDom" style="width:100%; height: 400px"></div>

    </el-card>


    <el-card>
      <template #header>
        <div class="card-header">
          <span>商品统计</span>
          <div style="float: right;">

            <el-date-picker
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-model="year_month3"
                type="month"
                placeholder="选择月份"
            />
            <el-button type="primary" @click="getSp">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
          </div>

        </div>
      </template>

      <div ref="chartDom3" style="width:100%; height: 400px"></div>

    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>商品订单统计</span>
          <div style="float: right;">

            <el-date-picker
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-model="year_month4"
                type="month"
                placeholder="选择月份"
            />
            <el-button type="primary" @click="getDd">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
          </div>

        </div>
      </template>

      <div ref="chartDom4" style="width:100%; height: 400px"></div>

    </el-card>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>跑腿统计</span>
          <div style="float: right;">

            <el-date-picker
                format="YYYY-MM"
                value-format="YYYY-MM"
                v-model="year_month2"
                type="month"
                placeholder="选择月份"
            />
            <el-button type="primary" @click="getPt">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
          </div>

        </div>
      </template>

      <div ref="chartDom2" style="width:100%; height: 400px"></div>

    </el-card>
  </div>

</template>
<script setup>
import * as echarts from 'echarts'
import {HTTP_URL, dealresult} from "@/api/common";
import {onMounted, ref} from "vue";
import axios from 'axios'
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router'
import {Search} from "@element-plus/icons-vue";

const router = useRouter()
const lander = ref({})


const chartDom = ref(null)
const chartDom2 = ref(null)
const chartDom3 = ref(null)
const chartDom4 = ref(null)
const chartDom5 = ref(null)
const chartDom6 = ref(null)
const year_month = ref('')
const year_month2 = ref('')
const year_month3 = ref('')
const year_month4 = ref('')
const year_month5 = ref('')


const getYearMonth = () => {
  let myDate = new Date();
  let y = myDate.getFullYear();
  let m = myDate.getMonth() + 1;

  if (parseInt(m) < 10) m = "0" + m;
  return y + "-" + m;
}
const getPyq = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjpyq',
    method: 'get',
    params: {year_month: year_month.value},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {
      let days = res.data.obj.days;
      let nums = res.data.obj.nums;

      const chart = echarts.init(chartDom.value)
      chart.setOption({
        title: {text: '朋友圈发布量每日统计'},
        legend: {
          data: ['发布量']
        },
        tooltip: {},
        xAxis: {
          data: days
        },
        yAxis: {},
        series: [{
          name: '发布量',
          type: 'line',
          data: nums
        }]
      })
    }

  })

}
const getReg = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjreg',
    method: 'get',
    params: {year_month: year_month5.value},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {
      let days = res.data.obj.days;
      let nums = res.data.obj.nums;

      const chart = echarts.init(chartDom5.value)
      chart.setOption({
        title: {text: '注册每日统计'},
        legend: {
          data: ['注册量']
        },
        tooltip: {},
        xAxis: {
          data: days
        },
        yAxis: {},
        series: [{
          name: '注册量',
          type: 'line',
          data: nums
        }]
      })
    }

  })

}
const getSex = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjsex',
    method: 'get',
    params: {},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {


      let data=[];
      data.push({value: res.data.obj.girlnum, name: '女性'})
      data.push({value: res.data.obj.boynum, name: '男性'})

      const chart = echarts.init(chartDom6.value)
      chart.setOption({
        title: { text: '用户性别占比' },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)' // 具体a b c d 代表的属性看下面注释啦
        },
        series: [
          {

            name: '比例', // formatter 中的a
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data:  data, // data 中的name为formatter中的 b；data中的value呢就是formatter中c；至于d就是Echarts计算出来的百分比啦；itemStyle:为饼图每个扇形的颜色；label为指示线后面的文字的样式，labelLine为指示线的颜色
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontWeight: 400,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{b} \n {c}个' // 这里为指示线后面的提示信息，这里的换行要用\n 与上面tooltips中的formatter换行不同滴
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })

    }

  })

}
const getSp = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjsp',
    method: 'get',
    params: {year_month: year_month3.value},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {
      let days = res.data.obj.days;
      let nums = res.data.obj.nums;

      const chart = echarts.init(chartDom3.value)
      chart.setOption({
        title: {text: '商品发布量每日统计'},
        legend: {
          data: ['发布量']
        },
        tooltip: {},
        xAxis: {
          data: days
        },
        yAxis: {},
        series: [{
          name: '发布量',
          type: 'line',
          data: nums
        }]
      })
    }

  })

}
const getPt = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjpt',
    method: 'get',
    params: {year_month: year_month2.value},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {
      let days = res.data.obj.days;
      let nums0 = res.data.obj.nums0;
      let nums2 = res.data.obj.nums2;
      let nums1 = res.data.obj.nums1;
      let nums_1 = res.data.obj.nums_1;
      let nums_all = res.data.obj.nums_all;

      const chart = echarts.init(chartDom2.value)
      chart.setOption({
        title: {text: '跑腿毎日统计'},
        legend: {
          data: ['待接单', '进行中', '已完成', '已取消', '总订单量']
        },
        tooltip: {},
        xAxis: {
          data: days
        },
        yAxis: {},
        series: [
          {name: '待接单', type: 'bar', data: nums0},
          {name: '进行中', type: 'bar', data: nums2},
          {name: '已完成', type: 'bar', data: nums1},
          {name: '已取消', type: 'bar', data: nums_1},
          {name: '总订单量', type: 'bar', data: nums_all},
        ]
      })
    }

  })

}
const getDd = () => {

  axios({
    url: HTTP_URL + '/val/tj/tjdd',
    method: 'get',
    params: {year_month: year_month4.value},
    headers: {
      token: lander.value.token
    }
  }).then(res => {
    dealresult(res);

    if (res.data.status == 1) {
      let days = res.data.obj.days;
      let nums0 = res.data.obj.nums0;
      let nums2 = res.data.obj.nums2;
      let nums1 = res.data.obj.nums1;
      let nums999 = res.data.obj.nums999;
      let nums_all = res.data.obj.nums_all;

      const chart = echarts.init(chartDom4.value)
      chart.setOption({
        title: {text: '商品订单毎日统计'},
        legend: {
          data: ['待接货', '申请退款', '已完成', '已退款', '总订单量']
        },
        tooltip: {},
        xAxis: {
          data: days
        },
        yAxis: {},
        series: [
          {name: '待接货', type: 'bar', data: nums0},
          {name: '申请退款', type: 'bar', data: nums2},
          {name: '已完成', type: 'bar', data: nums1},
          {name: '已退款', type: 'bar', data: nums999},
          {name: '总订单量', type: 'bar', data: nums_all},
        ]
      })
    }

  })

}
onMounted(() => {

  lander.value = JSON.parse(localStorage.getItem("loginUser"));

  year_month.value = getYearMonth();
  year_month2.value = getYearMonth();
  year_month3.value = getYearMonth();
  year_month4.value = getYearMonth();
  year_month5.value = getYearMonth();

  getPyq();
  getPt();
  getSp();
  getDd();
  getReg();
  getSex();

})


</script>
<style scoped lang="scss">

</style>