Vue3【五】集成Echarts

已于 2024-03-25 09:02:37 修改
阅读量307 收藏
点赞数 2
分类专栏： 前端 文章标签： echarts 前端 javascript
于 2023-12-26 15:00:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SpringHASh/article/details/135222312
版权

先安装echarts依赖

npm install echarts --save

功能代码

<template>
    <div class="app-container ">
      <el-row >
        <el-col :span="6">
          <el-card shadow="always">
            <div class="statistics-item-wrapper">
              <div class="statistics-item-detail">
                <span>Total Accounts</span>
              </div>
              <div class="statistics-item-num">
                <span>{{state.countData.totalAccountCount}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="statistics-item-wrapper">
              <div class="statistics-item-detail">
                <span>Total Boats</span>
              </div>
              <div class="statistics-item-num">
                <span>{{state.countData.totalBoatCount}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="statistics-item-wrapper">
              <div class="statistics-item-detail">
                <span>Total Engines</span>
              </div>
              <div class="statistics-item-num">
                <span>{{state.countData.totalEngineCount}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div class="statistics-item-wrapper">
              <div class="statistics-item-detail">
                <span>Total Devices</span>
              </div>
              <div class="statistics-item-num">
                <span>{{state.countData.totalDeviceCount}}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="12">
          <el-card shadow="always">
            <div class="chart-title-wrapper">
              <div class="chart-title">
                <span>Accounts</span>
              </div>
              <div class="chart-date-wrapper">
                <div class="chart-date-week" :class="{active: state.isAccountWeekActive}" @click="showChartByWeek('account-chart')">
                  <span  >Week</span>
                </div>
                <div class="chart-date-month" :class="{active: state.isAccountMonthActive}" @click="showChartByMonth('account-chart')">
                  <span  >Month</span>
                </div>
              </div>
            </div>
            <div class="chart-body-wrapper">
              <div class="chart-body" id="account-chart">
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <div class="chart-title-wrapper">
              <div class="chart-title">
                <span>Boats</span>
              </div>
              <div class="chart-date-wrapper">
                <div class="chart-date-week" :class="{active: state.isBoatWeekActive}" @click="showChartByWeek('boat-chart')">Week</div>
                <div class="chart-date-month" :class="{active: state.isBoatMonthActive}" @click="showChartByMonth('boat-chart')">Month</div>
              </div>
            </div>
            <div class="chart-body-wrapper">
              <div class="chart-body" id="boat-chart">
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row >
        <el-col :span="12">
          <el-card shadow="always">
            <div class="chart-title-wrapper">
              <div class="chart-title">
                <span>Engines</span>
              </div>
              <div class="chart-date-wrapper">
                <div class="chart-date-week" :class="{active: state.isEngineWeekActive}" @click="showChartByWeek('engine-chart')">Week</div>
                <div class="chart-date-month" :class="{active: state.isEngineMonthActive}" @click="showChartByMonth('engine-chart')">Month</div>
              </div>
            </div>
            <div class="chart-body-wrapper">
              <div class="chart-body" id="engine-chart">
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <div class="chart-title-wrapper">
              <div class="chart-title">
                <span>Devices</span>
              </div>
              <div class="chart-date-wrapper">
                <div class="chart-date-week" :class="{active: state.isDeviceWeekActive}" @click="showChartByWeek('device-chart')">Week</div>
                <div class="chart-date-month" :class="{active: state.isDeviceMonthActive}" @click="showChartByMonth('device-chart')">Month</div>
              </div>
            </div>
            <div class="chart-body-wrapper">
              <div class="chart-body" id="device-chart">
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </div>
</template>


<script setup>
import { reactive } from "vue";
import * as api from '@/api/system/dashboard';
import * as echarts from 'echarts';
const state = reactive({
  dashboardChart: {
    account:null,
    boat:null,
    engine:null,
    device:null,
  },
  isAccountWeekActive: false,
  isAccountMonthActive: false,
  isBoatWeekActive: false,
  isBoatMonthActive: false,
  isEngineWeekActive: false,
  isEngineMonthActive: false,
  isDeviceWeekActive: false,
  isDeviceMonthActive: false,
  loading: false,
  countData: {
    totalAccountCount: 0,
    totalBoatCount: 0,
    totalEngineCount: 0,
    totalDeviceCount: 0,
  },
});

function totalCount() {
  state.loading = true;
  api
      .totalCount()
      .then((res) => {
        state.countData = res;
      })
      .finally(() => {
        state.loading = false;
      });
}

function statisticsChart(){
  state.loading = true;
  api
      .statisticsChart()
      .then((res) => {
        state.dashboardChart = res;
        initChartByWeek('account-chart', state.dashboardChart.account);
        initChartByWeek('boat-chart', state.dashboardChart.boat);
        initChartByWeek('engine-chart', state.dashboardChart.engine);
        initChartByWeek('device-chart', state.dashboardChart.device);
        state.isAccountWeekActive=true;
        state.isBoatWeekActive=true;
        state.isEngineWeekActive=true;
        state.isDeviceWeekActive=true;
      })
      .finally(() => {
        state.loading = false;
      });
}


function getDataByElId(elId, dateType) {
  let data;
  if (elId === 'account-chart') {
    data = state.dashboardChart.account;
    if('week' === dateType){
      state.isAccountWeekActive=true;
      state.isAccountMonthActive=false;
    }else{
      state.isAccountWeekActive=false;
      state.isAccountMonthActive=true;
    }
  } else if (elId === 'boat-chart') {
    data = state.dashboardChart.boat;
    if('week' === dateType){
      state.isBoatWeekActive=true;
      state.isBoatMonthActive=false;
    }else{
      state.isBoatWeekActive=false;
      state.isBoatMonthActive=true;
    }
  } else if (elId === 'engine-chart') {
    data = state.dashboardChart.engine;
    if('week' === dateType){
      state.isEngineWeekActive=true;
      state.isEngineMonthActive=false;
    }else{
      state.isEngineWeekActive=false;
      state.isEngineMonthActive=true;
    }
  } else if (elId === 'device-chart') {
    data = state.dashboardChart.device;
    if('week' === dateType){
      state.isDeviceWeekActive=true;
      state.isDeviceMonthActive=false;
    }else{
      state.isDeviceWeekActive=false;
      state.isDeviceMonthActive=true;
    }
  }
  return data;
}

function initChartByWeek(elId, data){
  let rawData = {
    xData: [],
    yData: [],
  }
  if (data && data.weekList && data.weekList.length > 0) {
    data.weekList.forEach(weekData => {
      rawData.xData.push(weekData.date);
      rawData.yData.push(weekData.value);
    });
  }
  showChart(rawData, elId);
}

function showChartByWeek(elId){
  let data = getDataByElId(elId, 'week');
  let rawData = {
    xData: [],
    yData: [],
  }
  if (data && data.weekList && data.weekList.length > 0) {
    data.weekList.forEach(weekData => {
      rawData.xData.push(weekData.date);
      rawData.yData.push(weekData.value);
    });
  }
  showChart(rawData, elId);
}

function showChartByMonth(elId){
  let data = getDataByElId(elId, 'month');
  let rawData = {
    xData: [],
    yData: [],
  }
  if (data && data.monthList && data.monthList.length > 0) {
    data.monthList.forEach(monthData => {
      rawData.xData.push(monthData.date);
      rawData.yData.push(monthData.value);
    });
  }
  showChart(rawData, elId);
}

function showChart(rawData, elId) {
  let myChart = echarts.init(document.getElementById(elId));
  let option = {
    xAxis: {
      type: 'category',
      data: rawData.xData
    },
    tooltip: {
      trigger: 'axis'
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      x: 45,
      y: 30,
      x2: 15,
      y2: 35
    },
    series: [
      {
        data: rawData.yData,
        type: 'line',
        smooth: true
      }
    ]
  };
  myChart.setOption(option);
}

totalCount();
statisticsChart();

</script>

<style scoped lang="scss">
.active{
  border-color: #009143e6;
  background-color: #009143e6;
}
.app-container {
  .statistics-item-wrapper{
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .statistics-item-detail{
      font-size: 20px;
      font-weight: bold;
    }
    .statistics-item-num{
      font-size: 27px;
      font-weight: bold;
    }

  }
  .el-card.is-always-shadow {
    margin: 10px;
    border-radius: 10px;
    box-shadow: 0px 10px 18px #dde2e7;
    :deep .el-card__body {
    }
  }
  .chart-title-wrapper{
    display: flex;
    justify-content: space-between;
    margin: 0 10px;

    .chart-date-wrapper{
      display: flex;
      justify-content: space-between;
      .chart-date-week, .chart-date-month{
        border-radius: 8px;
        height: 30px;
        width: 70px;
        line-height: 30px;
        text-align: center;
        border: 1px solid #cbcfd3;
        cursor: pointer;
      }

    }
  }

  .chart-body-wrapper {
    height: 280px;
    margin: 0 10px;

    .chart-body {
      height: 260px;
      width: 100%;
    }
  }

}
</style>
宁漂打工仔
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts与vue3的结合
qq_42264793的博客
06-22 1136
echarts的引用 1. 通过 npm 获取 echarts； npm install echarts --save； 2. 通过 CDN 引入； 通过标签方式直接引入构建好的 echarts 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"&g
在 Vue 3 中集成 ECharts：打造交互式数据可视化
qbit2coding的博客
03-27 1383
通过以上步骤，您已经成功地在 Vue 3 项目中集成了 ECharts。现在，您可以利用 ECharts 的强大功能来创建丰富多样的数据可视化图表，为您的应用程序提供更加直观的数据展示和分析能力。继续探索和实践，让您的 Vue 3 应用更加生动和高效。
Vue 3 中集成 ECharts(附一些案例)
jieyucx的博客
07-05 7962
在现代Web开发中，Vue 3以其卓越的性能和灵活的Composition API赢得了广泛的关注。而ECharts，作为开源的一个使用JavaScript实现的强大可视化库，以其丰富的图表类型和高度可定制性成为了数据可视化的首选工具之一。今天，我们将结合Vue 3的语法糖和ECharts，来详细探讨如何在Vue 3项目中集成ECharts，并不仅仅局限于折线图，而是展示一个通用的集成方法。
vue3使用echarts
m0_72189003的博客
07-23 244
第二步使用echatrs：（使用示例）
Vue3集成Echarts详解
qq_68512683的博客
12-23 1992
Vue3集成Echarts详解
Vue3 集成 echarts 三种方式
u014212540的博客
04-24 5662
文章目录步骤一: 安装echarts步骤二：引入方式不能采用的方式 步骤一: 安装echarts yarn add echarts -S 或 npm i ecahrts -S 步骤二：引入方式 1. Es6 import 方式 <template> <div class="hello"> <div id="myEchart" ref="myEchart" style="width: 200px;height:200px" ></div>
在vue3 中使用echarts
web18224617243的博客
03-06 5110
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from 'echarts' export default { name: "data_page", setup() { onMounted(() => {//需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getEle
Vue项目中集成Echarts
技术无止境，人生仍探索。
07-23 4043
Vue项目中集成Echarts 这里主要使用两个封装Echarts的库： v-charts和Vue-Echarts v-charts github地址 v-charts官网 使用 安装 npm i v-charts echarts -S 结合Element一起使用 <template> <div id="charts"> <el-tabs v-model="activeName" @tab-click="handleClick"> &
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
Vue快速集成ECharts数据可视化教程
最新发布
08-27
作为前端开发的两大热门框架与库，Vue.js以其响应式的数据绑定和组件化的开发模式赢得了广泛的认可，而ECharts则以其丰富的图表类型、灵活的配置项和强大的数据可视化能力著称。本《Vue与ECharts整合开发指南》文档...
详解vue文件中使用echarts.js的两种方式
10-17
在Vue项目中集成ECharts.js，通常有两种常见的方式：一种是通过组件的形式，另一种是直接在Vue文件中引入。这两种方法都有其优缺点，适用于不同的项目需求。 首先，我们来看第一种方式，即以组件的形式使用ECharts...
在vue中实现清除echarts上次保留的数据(亲测有效)
10-14
此外，补充一点关于Vue.js和ECharts结合使用的知识：在Vue中使用`vue-echarts`库可以方便地将ECharts图表与Vue组件集成。在上述代码中，我们创建了一个名为`view`的组件，它使用`IEcharts`组件来渲染ECharts图表，...
Vue3集成echarts
若鱼的专栏
05-29 239
vue3集成echarts
vue3集成echarts最佳实践
三劫散仙
08-08 394
在组件中使用，这种方式可能会出现不能识别类型警告，需要加@ts-ignore。在 App.vue种注入。在 tsx 页面中使用。
项目中的echarts配置及使用
小白的博客
04-07 538
标题项目中的echarts配置及使用 根据此命令下载echarts npm或cnpm install echarts --save main.js中配置 // 引入echarts import * as echarts from 'echarts'; Vue.prototype.$echarts=echarts; 在项目中使用 <template> <div id="main" style="width: 750px;height:400px;"></div> &l
Vue3整合Apache ECharts实战笔记
IQ_Kuo的博客
12-29 1294
Vue3整合Apache ECharts实战笔记
深入浅出--vue3封装echarts组件
Ja_dream的博客
07-17 1211
ECharts，作为一款强大的图表库，提供了丰富的图表类型和高度定制化的选项，深受开发者喜爱。本文将会深入浅出的，带你封装一个高效、可复用的Echarts组件
Vue项目中集成Echarts实战指南
在Vue项目中集成ECharts是一个常见的需求，它可以帮助我们实现丰富的数据可视化效果。以下是详细的操作步骤： 1. 创建模块： 首先，你需要在Vue组件中创建一个用于展示ECharts图表的区域。这通常通过在`<template>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁漂打工仔

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值