Vue+Echarts的基本使用方法

最新推荐文章于 2024-09-23 02:31:39 发布
最新推荐文章于 2024-09-23 02:31:39 发布
阅读量367 收藏
点赞数
分类专栏： Echarts Vue框架 文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43811753/article/details/130513153
版权
该文章描述了一个Vue.js组件中如何使用Echarts库初始化图表，动态加载和更新数据，实现屏幕尺寸变化时的自适应布局，以及通过定时器每隔3秒切换图表数据的过程。主要涉及的技术包括Echarts的实例创建、数据绑定、事件监听以及窗口resize事件处理。
摘要由CSDN通过智能技术生成
  1. 设置echarts的div容器，并设置宽高；
  2. 获取Echarts实例
  3. 请求服务端数据
  4. 初始化图表
  5. 更新图表
  6. 屏幕适配
  7. 定时切换数据
  8. 销毁定时器和监听屏幕resize

HTML

  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>

JavaScript

1.data数据

  data() {
    return {
      chartInstance: null, // echarts实例
      allData: [], // 存放图表数据
      currentPage: 1, //当前显示页数
      totalPage: 0, //一共多少页
      timerId: null, //定时器标识
    };
  },

2.mounted生命周期挂载数据

  • 初始化Echart对象
  • 请求数据
  • 当浏览器窗口大小发生改变时，自动调用屏幕自适应函数（screenAdapter）。
  • 在页面加载完成的时候, 主动进行屏幕的适配（调用screenAdapter函数）
  mounted() {
    // 初始化加载数据
    this.initChart();
    //请求数据
    this.getData();
    //浏览器窗口大小发生改变时，自动调用屏幕自适应函数
    window.addEventListener("resize", this.screenAdapter);
    // 在页面加载完成的时候, 主动进行屏幕的适配
    this.screenAdapter();
  },

3. methods中相关方法

请求数据

请求数据后调用updateChart()和startInterval()

   //获取服务器的数据
    async getData() {
      // const params = {
      //   // 这里放需要的参数
      // };
      // 调用api.js中的getData方法获取数据
      const ret = await api.getData();

      // 将获取到的数据赋值给allData
      this.allData = ret;

      // 打印allData数组
      console.log(this.allData, "==============2");

      // 根据value属性进行升序排序
      this.allData.sort((a, b) => {
        return a.value - b.value;
      });

      // 计算总页数，每页展示5条数据
      this.totalPage = Math.ceil(this.allData.length / 5);

      this.updateChart();
      this.startInterval();
    },

3.1 initChart初始化实例对象

    // 初始化chartInstance对象
    initChart() {
     // 获取echarts实例 
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "chalk");
      //initOption为初始化配置，不包含数据和字体，width相关自适应分辨率相关属性
      const initOption = {
        title: {
          text: "丨 商家销售统计",
          left: 20, //控制标题位置
          top: 10,
        },
        //grid控制图表坐标轴位置
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, //包含坐标轴文字
        },
        xAxis: {
          type: "value",
        },
        //y轴为类目轴
        yAxis: {
          type: "category",
        },
        //背景悬浮框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#2D3443",
            },
          },
        },
        series: [
          {
            type: "bar",
            //控制柱状条里面的label标签属性
            label: {
              show: true, //是否显示label标签
              position: "right", //label标签在柱状条中的位置
              textStyle: {
                color: "#fff", //控制标签颜色
              },
            },
            itemStyle: {
              // 指明颜色渐变的方向
              // 指明不同百分比之下颜色的值
              //x1.y1.x2.y2,从左往右（0，0，1，0）或者从右往左，只需要控制x1，x2，上下则控制y1,y2
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: "#5052EE",
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      };
      //设置图表配置项
      this.chartInstance.setOption(initOption);
      //对图标对象进行鼠标事件监听
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },

3.2 更新图表updateChart

配置数据项dataOption

   // 更新图表
    updateChart() {
      // 计算分页起始和结束位置
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      // 获取当前页要显示的数据
      const showData = this.allData.slice(start, end); // slice方法包含start，不包含end
      // 获取当前页要显示的商家名和销售额
      const sellerNames = showData.map((item) => {
        // 这里的showData不需要加this
        return item.name;
      });
      const sellerValues = showData.map((item) => {
        return item.value;
      });
      // 配置图表数据
      const dataOption = {
        // y轴为类目轴
        yAxis: {
          data: sellerNames,
        },
        series: [
          {
            data: sellerValues,
          },
        ],
      };
      // 设置图表数据
      this.chartInstance.setOption(dataOption);
    },

3.3 屏幕适配函数screenAdapter

   // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // offsetWidth获取窗口宽度计算文字大小
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      // 自适应分辨率配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize, //标题字体大小
          },
        },
        //背景悬浮框
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize, //控制柱状条粗细（宽）
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0], //左上，右上，右下，左下，上右下左控制柱状条的圆角
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },

3.4 每3秒切换数据

    //启动定时器tartInterval，每3秒切换
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    },
  1. destoryed生命周期函数
clearInterval(this.timerId);
window.removeEventListener("resize", this.screenAdapter);

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.com-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.com-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.com-chart {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

canvas {
  border-radius: 20px;
}
//设置border圆角

附全部完整代码

<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>
<script>
import api from "../api/registService.js";
export default {
  name: "Seller",
  data() {
    return {
      chartInstance: null,
      allData: [],
      currentPage: 1, //当前显示页数
      totalPage: 0, //一共多少页
      timerId: null, //定时器标识
    };
  },
  mounted() {
    // 初始化加载数据
    this.initChart();
    this.getData();
    window.addEventListener("resize", this.screenAdapter);
    // 在页面加载完成的时候, 主动进行屏幕的适配
    this.screenAdapter();
  },
  destroyed() {
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    //获取服务器的数据
    async getData() {
      // const params = {
      //   // 这里放需要的参数
      // };
      // 调用api.js中的getData方法获取数据
      const ret = await api.getData();

      // 将获取到的数据赋值给allData
      this.allData = ret;

      // 打印allData数组
      console.log(this.allData, "==============2");

      // 根据value属性进行升序排序
      this.allData.sort((a, b) => {
        return a.value - b.value;
      });

      // 计算总页数，每页展示5条数据
      this.totalPage = Math.ceil(this.allData.length / 5);

      this.updateChart();
      this.startInterval();
    },
    // 初始化chartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref, "chalk");
      //initOption为初始化配置，不包含数据和字体，width相关自适应分辨率相关属性
      const initOption = {
        title: {
          text: "丨 商家销售统计",
          left: 20, //控制标题位置
          top: 10,
          // textStyle: {
          //   //控制标题样式
          //   fontSize: 66,
          // },
        },
        //grid控制图表坐标轴位置
        grid: {
          top: "20%",
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true, //包含坐标轴文字
        },
        xAxis: {
          type: "value",
        },
        //y轴为类目轴
        yAxis: {
          type: "category",
        },
        //背景悬浮框
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            z: 0,
            lineStyle: {
              color: "#2D3443",
            },
          },
        },
        series: [
          {
            type: "bar",
            //控制柱状条里面的label标签属性
            label: {
              show: true, //是否显示label标签
              position: "right", //label标签在柱状条中的位置
              textStyle: {
                color: "#fff", //控制标签颜色
              },
            },
            itemStyle: {
              barBorderRadius: [0, 100, 100, 0], //控制柱状条圆角
              // 指明颜色渐变的方向
              // 指明不同百分比之下颜色的值
              //x1.y1.x2.y2,从左往右（0，0，1，0）或者从右往左，只需要控制x1，x2，上下则控制y1,y2
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 百分之0状态之下的颜色值
                {
                  offset: 0,
                  color: "#5052EE",
                },
                // 百分之100状态之下的颜色值
                {
                  offset: 1,
                  color: "#AB6EE5",
                },
              ]),
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
      //对图标对象进行鼠标事件监听
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on("mouseout", () => {
        this.startInterval();
      });
    },
    // 更新图表
    updateChart() {
      // 计算分页起始和结束位置
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      // 获取当前页要显示的数据
      const showData = this.allData.slice(start, end); // slice方法包含start，不包含end
      // 获取当前页要显示的商家名和销售额
      const sellerNames = showData.map((item) => {
        // 这里的showData不需要加this
        return item.name;
      });
      const sellerValues = showData.map((item) => {
        return item.value;
      });
      // 配置图表数据
      const dataOption = {
        // y轴为类目轴
        yAxis: {
          data: sellerNames,
        },
        series: [
          {
            data: sellerValues,
          },
        ],
      };
      // 设置图表数据
      this.chartInstance.setOption(dataOption);
    },

    //启动定时器tartInterval，每3秒切换
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    },
    beforeDestroy() {
      clearInterval(this.timerId);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // offsetWidth获取窗口宽度计算文字大小
      const titleFontSize = (this.$refs.seller_ref.offsetWidth / 100) * 3.6;
      // 自适应分辨率配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize, //标题字体大小
          },
        },
        //背景悬浮框
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        series: [
          {
            barWidth: titleFontSize, //控制柱状条粗细（宽）
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0], //左上，右上，右下，左下，上右下左控制柱状条的圆角
            },
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>
<style lang="less" scoped></style>
吉吉安
关注
专栏目录
Vue.js和ECharts使用教程
BkjqAws的博客
09-17 148
Vue.js是一种流行的JavaScript框架，用于构建交互式的Web应用程序。ECharts是一个功能强大的数据可视化库，它提供了丰富的图表和图形，可以帮助我们有效地展示和分析数据。本教程将介绍如何在Vue.js应用程序中集成和使用ECharts。
Vue项目中使用echarts教程
qq_20236937的博客
05-08 6730
/该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容。//此处的意思就是，对 demo 元素 进行图表初始化的相关操作。//使用echarts局部引入的方式（我这边的版本是5版本）//2. 基于准备好的dom，初始化echarts实例。//不加的话,当浏览器窗口缩小的时候,样式会出现问题。//import引入的组件需要注入到对象中才能使用。//4.使用刚指定的配置项和数据显示图表。//3. 指定图表的配置项和数据。//初始化echarts实例。// 调用setOption。
vue Echart使用
最新发布
m0_51492817的博客
09-23 427
echarts里面的数据都是数组，如何把name，num的属性值全部放到数组里面。这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里。在这个步骤中, 需要指明图表最终显示在哪里的DOM元素。给盒子起名字是建议使用id选择器。
如何在vue里使用echarts
takobee5411的博客
06-10 1万+
如何在vue里使用echarts
vue中使用Echarts
hxt的博客
08-12 568
安装echarts依赖 npm install echarts --save 代码实现 封装Echarts组件Echarts.vue： <template> <div :id="id" :style="styleObject" /> </template> <script> import * as echarts from "echarts"; import "echarts/lib/chart/pie"; import "echarts/lib/com
vue+echarts数据显示通用模板
05-31
`README.md` 文件通常包含项目的基本介绍、安装指南和使用方法，方便其他开发者理解和使用此模板。 总的来说，Vue+ECharts数据显示通用模板提供了一个高效的数据可视化开发环境，结合Vue的组件化特性和ECharts的...
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
毕业设计_基于Vue + ECharts的数据可视化系统的设计与实现（源码+PPT+视频+软件）
08-03
通过这个项目，学习者不仅可以掌握Vue.js和ECharts的基本用法，还能了解到数据可视化系统的整体设计流程，包括数据处理、UI设计、前后端交互等环节，对于提升实际开发能力大有裨益。无论是对于课程设计还是个人项目...
Sprinboot+Vue +Echarts+ElementUI
10-21
标题 "Sprinboot+Vue+Echarts+ElementUI" 暗示了这是一个关于构建Web应用的教程或项目，其中涉及了四个主要的技术栈：Spring Boot、Vue.js、ECharts和Element UI。这些技术分别用于后端开发、前端框架、数据可视化和...
基于vue+echarts 数据可视化大屏展示的方法示例
11-21
在Vue中引入ECharts，有两种常见的方法。一种是全局引入，通常在`main.js`中完成，但这种方法可能导致应用包体积过大，不推荐使用。另一种是按需引入，仅在需要使用ECharts的组件内部引入所需的部分，这样能有效减少...
Echarts通过Ajax实现动态数据加载
03-29
Echarts通过Ajax实现动态数据加载，Echarts通过Ajax实现动态数据加载。
vue.js中使用echarts实现数据动态刷新功能
10-17
主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下
vue+echarts实现动态绘制图表及异步加载数据的方法
10-17
vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。这篇文章主要介绍了vue+echarts 动态绘制图表及异步加载数据的相关知识,需要的朋友可以参考下
vue使用echarts的使用
fxxx_的博客
04-17 1144
echarts数据可视化 1.简介 1.什么是echarts？ ​ ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖canvas画布矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 2.echarts的特点？ 开源，运行在 PC 和移动设备，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefo
如何在vue中使用echart图表
热门推荐
前端探险家的博客
05-11 4万+
人狠话不多，先上效果图！ 以上都是在项目中经常使用到的图标，地图的引入下一期会特别介绍！ echarts中文官网 官网链接点击查看：ECharts 其实官网中有在项目中使用的详细步骤，大家也可以通过对官网的学习来使用echarts,毕竟人家比比我介绍的更详细更专业。 echarts在vue项目中实现的步骤 webpack 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。
vue项目的echarts的基本使用
weixin_44258964的博客
06-11 343
echarts图表的使用简介 常用易用整理
Vue使用Echarts图表
李木子的博客
04-24 717
【代码】Vue使用Echarts图表。
vue echart详细使用说明
一步一个脚印，踏实努力，向着目标前进
09-07 1726
在Vue组件中，你需要导入ECharts库，并创建一个ECharts实例来绘制图表。在Vue项目中使用ECharts之前，你需要先安装ECharts库。在Vue模板中，你需要创建一个用于显示图表的容器元素。对象中，你可以配置图表的类型、数据、样式等。
实现HTML+Vue+Echarts折线图中特定点闪烁效果
总结以上知识点，要实现一个HTML页面上的VUE组件与Echarts结合创建的折线图，并让其中一个点闪烁，需要熟悉HTML标签使用、Vue.js框架的基本原理、Echarts图表的配置方法，并且掌握JavaScript中的定时器操作以及事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

吉吉安

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

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

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

打赏作者

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

抵扣说明：

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

余额充值