echarts可视化图表

官网网址：https://echarts.apache.org/zh/index.html

vue3中的使用案例：

1. 下载引入echarts

npm install echarts --save
import * as echarts from 'echarts'

2. 下载引入vue3-count-to

npm install vue3-count-to --save
import { CountTo } from 'vue3-count-to'

如果出现echarts与vue3-count-to报错，在env.d.ts中添加以下代码：

declare module "js.cookie"
declare module "vue3-count-to"

项目案例：

<template>
  <div class="both" style="padding: 0px 40px;margin-top: 30px;">
      <div class="main">
          <el-row :gutter="20">
              <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                  <div class="box-bg">
                      <div class="elicon">
                          <el-icon :size="40" color="#40C9C6">
                              <Grid />
                          </el-icon>
                          <div hidden-xs-only hidden-sm-only hidden-sm-and-down>
                              <div>商品数量</div>
                              <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
                          </div>
                      </div>
                      <div class="elicon">
                          <el-icon :size="40" color="#36A3F7">
                              <ChatDotSquare />
                          </el-icon>
                          <div>
                              <div>未发货单</div>
                              <count-to :startVal="0" :endVal="waitStockCounts" :duration="3000"></count-to>
                          </div>
                      </div>
                  </div>
              </el-col>
              <!-- 柱形图 -->
              <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                  <div id="columnChart" ref="column"></div>
              </el-col>
          </el-row>
      </div>
      <div>
          <el-row>
              <!-- 折线图 -->
              <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                  <div id="lineChart" ref="line"></div>
              </el-col>
              <!-- 饼状图 -->
              <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                  <div id="pieChart" ref="pie"></div>
              </el-col>
              <!-- 饼状图2 -->
              <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
                  <div id="pieCharts" ref="pies"></div>
              </el-col>
          </el-row>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { Grid, ChatDotSquare } from '@element-plus/icons-vue';
import * as echarts from 'echarts'
import { CountTo } from 'vue3-count-to'
import { ref, onBeforeUnmount } from 'vue';
import { post } from '@/utils/http';//引入封装好的axios
type EChartsOption = echarts.EChartsOption
const quantity = ref()        //商品数量
const waitStockCounts = ref()  //未发货单
//定义初始化类型
let column: echarts.ECharts | undefined = undefined
let line: echarts.ECharts | undefined = undefined
let pie: echarts.ECharts | undefined = undefined
let pies: echarts.ECharts | undefined = undefined
const king = () => {
  let data = {//请求参数
      _gp: 'admin.dashboard',
      _mt: 'integral'
  }
  post(data).then((res) => {//数据请求
      console.log(res);
      let { daysOrder, channel, area, daysSum, goodsCount, waitStockCount } = res.data
     //获取数据进行结构赋值赋值
      quantity.value = goodsCount
      waitStockCounts.value = waitStockCount
      // 柱形图
      let columnChart = document.getElementById('columnChart')!;
      column = echarts.init(columnChart);
      // 折线图
      let lineChart = document.getElementById('lineChart')!;
      line = echarts.init(lineChart);
      // 饼状图
      let pieChart = document.getElementById('pieChart')!;
      pie = echarts.init(pieChart);
      // 饼状图2
      let pieCharts = document.getElementById('pieCharts')!;
      pies = echarts.init(pieCharts);

      // 柱形图
      let columnOption: EChartsOption = {
          title: {
              text: '七日订单',
              subtext: '订单数',
              left: 'left'
          },
          legend: {
              data: ['订单数'],
              left: 'right'
          },
          xAxis: {
              type: 'category',
              data: daysOrder[0]    //日期
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name: '订单数',
                  type: 'bar',
                  barWidth: '40%',       //柱子大小
                  color: ['#3EA6F7'],   //柱子颜色
                  emphasis: { focus: 'series' },
                  data: daysOrder[1]    //数据
              },
          ]
      };
      // 折线图
      let lineOption: EChartsOption = {
          title: {
              text: '7日成交金额',
              subtext: '订单数',
              left: 'left'
          },
          legend: {
              data: ['订单数'],
              left: 'right'
          },
          xAxis: {
              type: 'category',
              data: daysSum[0]    //日期
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
                  name: '订单数',
                  type: 'line',
                  emphasis: {
                      focus: 'series'
                  },
                  data: daysSum[1]    //数据
              },
          ]
      };
      //饼状图
      let pieOption = {
          title: {
              text: '订单地区分布',
              left: 'left'
          },
          legend: {
              data: ['地区分布'],
              left: 'right'
          },
          tooltip: {
              trigger: 'item'
          },
          series: [
              {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: area,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };

      //饼状图2
      let pieOptions = {
          title: {
              text: '订单渠道分布',
              left: 'left'
          },
          tooltip: {
              trigger: 'item'
          },
          series: [
              {
                  name: 'Access From',
                  type: 'pie',
                  radius: '50%',
                  data: channel,
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      };
      // 柱形图
      columnOption && column.setOption(columnOption);
      // 折线图
      lineOption && line.setOption(lineOption);
      //饼状图
      pieOption && pie.setOption(pieOption);
      //饼状图2
      pieOptions && pies.setOption(pieOptions);
      window.onresize = function () {
          // echarts图表自适应resize方法
          if (column && line && pie && pies) {
              column.resize();
              line.resize();
              pie.resize();
              pies.resize();
          }

      };
  }).catch((err) => {

  });
}
king()
//清除上一次的数据以防加载显示不出
onBeforeUnmount(() => {
  if (column) {
      column.dispose()
      column = undefined
  }
  if (line) {
      line.dispose()
      line = undefined
  }
  if (pie) {
      pie.dispose()
      pie = undefined
  }
  if (pies) {
      pies.dispose()
      pies = undefined
  }
})
</script>

<style lang="less" scoped>
.box-bg {
  height: 340px;

  .elicon {
      height: 80px;
      padding: 0px 20px;
      margin-top: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0px 0px 20px 0px #e3e2e2;
  }
}

// 柱形图
#columnChart {
  width: 80%;
  margin: auto;
  height: 340px;
}

// 折线图
#lineChart {
  width: 100%;
  height: 300px;
}

// 饼图
#pieChart {
  width: 100%;
  height: 300px;
}

// 饼图2
#pieCharts {
  width: 100%;
  height: 300px;
}
</style>