vue中设置echarts宽度自适应的代码步骤

2024-03-24 00:14:35

问题描述

我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果

无自适应效果图

我们发现echarts图的宽度并没有随着页面宽度的变化而变化

有自适应效果图

很显然，这个才是我们想要的效果

代码步骤

echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas，从而实现对应自适应效果。请看代码中的注释步骤

<template>
  <div id="echart"></div>
</template>

<script>
// 第一步，引入echarts插件以供使用
import Echarts from "echarts";
export default {
  data() {
    return {
      myChart: null, // 定义变量用来存放echarts实例
      option: { // 配置项写在data里面方便管理
        title: {
          text: "ECharts 示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
    };
  },
  mounted() {
    // 第二步，在页面加载渲染的时候执行echarts画图方法
    this.drawEcharts();
  },
  methods: {
    drawEcharts() {
      // 第三步，通过echarts的init方法实例化一个echarts对象myChart，并，保存在data变量中
      this.myChart = Echarts.init(document.getElementById("echart"));
      // 第四步，执行myChart的setOption方法去画图，当然至于配置项，我们要提前配置好，这里的配置项
      //         写在data中，方便我们在一些事件中去修改对应配置项，比如点击按钮更改配置项数据
      this.myChart.setOption(this.option);
      // 第五步，在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
      //        如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
      //        我们一般使用这个事件去做窗口大小与对应元素的大小适配
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.myChart.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    beforeDestroy() {
      /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
      window.removeEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
#echart {
  width: 100%;
  height: 600px;
}
</style>

到此这篇关于vue中设置echarts宽度自适应的问题及解决方案的文章就介绍到这了,更多相关vue 宽度自适应内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue项目中vue-echarts讲解及常用图表实现方案(推荐)

目录 1.图表主题颜色的修改 2.XY轴体颜色和文本颜色修改 3.横向柱状图的显示 4.过滤xy轴文本内容 5.Y轴文本显示在轴线内 6.在柱状条头部添加标签内容 7.自定义图例修改 8.环比图中间显示内容图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者
Vue中使用Echarts可视化图表宽度自适应的完美解决方案

目录一.问题阐述: 二.解决思路: 三.最终效果: 一.问题阐述: 开发H5项目中应用到Echarts数据可视化,由于H5主要使用在手机,屏幕宽度大大限制了图表的展现,问题如下. 上图中x轴的数据是动态的,从2022年切换到2021年数据变化,此时如果x轴的数据过多就会显得格外拥挤. 二.解决思路: 我的解决方案是,在放置Echarts的容器(div)外层再套一层容器(div),外层容器宽度固定设置手机屏幕宽,并设置溢出显示滚动条(width: 100%;overflow: auto),内层E
Vue echarts模拟后端数据流程详解

目录 KOA2的使用安装 Koa app.js入口文件 KOA2的使用 KOA2是由Express 原班人马打造. 环境依赖 Node v7.6.0 及以上. 支持 async 和 await 洋葱模型的中间件写响应函数(中间件) 响应函数是通过use的方式才能产生效果, 这个函数有两个参数, ctx :上下文, 指的是请求所处于的Web容器,我们可以通过 ctx.request 拿到请求对象, 也可以通过 ctx.response 拿到响应对象 next :内层中间件执行的入口模拟服务
Vue echarts画甘特图流程详细讲解

vue项目中添加echarts,只需要增加echarts依赖,然后在main.js中引入echarts就可以使用了. 1.npm install echarts --save 2.修改main.js import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 3.具体页面使用: <template> <div class="about"> <h1>This is echart
vue中的echarts实现宽度自适应的解决方案

今天项目中需要使用到 echarts 为了自适应.找到了.以下解决方案. 效果图代码 <template>  <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="wi
Vue echarts实例项目地区销量趋势堆叠折线图实现详解

最终效果如图组件结构设计外部 Trendpage.vue  <template> <div class="comP1"> <Trend></Trend> </div> </template> <script> import Trend from "@/components/Trend"; export
Vue echarts实例项目商家销量统计图实现详解

目录组件结构设计发送请求获取对应的数据并进行相应操作当窗口尺寸发生变化时的操作总体效果如图组件结构设计 SellerPage.vue  <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle
vue中设置echarts宽度自适应的代码步骤

目录问题描述无自适应效果图有自适应效果图代码步骤问题描述我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果无自适应效果图我们发现echarts图的宽度并没有随着页面宽度的变化而变化有自适应效果图很显然,这个才是我们想要的效果代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行
在Vue中使用Echarts可视化库的完整步骤记录

前言由于最近项目需要做可视化数据展示,也就是用图表展示数据,他还有一个很高端的名字:"大数据可视化"(参考图一),首先考虑选择什么图表库来作为基础开发,目前被普遍认可的是Hcharts.Echarts.AntV. 介绍: Hcharts:国外的一款图表库,是图表库的领头羊 Echarts:百度开发的数据可视化库,国内图表库的 "领军人物" AntV:是蚂蚁金服开发的数据可视化库总结出以下几个优略点区别Echarts.Hcharts哪个比较合适: 1.学习容易程度
在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
iOS 中根据屏幕宽度自适应分布按钮的实例代码

下载demo链接:https://github.com/MinLee6/buttonShow.git 屏幕摆放的控件有两种方式,一种根据具体内容变化,一种根据屏幕宽度变化. 下面我分别将两个方式,用代码的方式呈现: 1:根据具体内容变化 // // StyleOneViewController.m // buttonShow // // Created by limin on 15/06/15. // Copyright © 2015年信诺汇通信息科技(北京)有限公司. All rights
vue中使用echarts制作圆环图的实例代码

vue使用echarts制作圆环图,代码如下所示: <div id="main"></div> <script type="text/ecmascript-6"> export default { //从父组件中接收到的数据 props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionD
在vue中实现echarts随窗体变化

<div id="myChart" :style="{width: '100%', height: '345px'}"></div> <script> export default { mounted(){ this.drawLine(); }, methods: { drawLine(){ var myChartContainer = document.getElementById('myChart'); //用于使chart自
在vue中使用echarts实现飞机航线水滴图词云图效果

目录 vue中引入echarts 飞机航线 html css 准备数据处理飞行数据获得起点和终点坐标起点和终点配置地图配置折线line和散点使用水滴图配置词云图配置 vue中引入echarts npm install echarts 在main.js中引用并挂载到vue上便于使用 import * as echarts from 'echarts' Vue.prototype.$echarts =echarts 飞机航线 html <template> <div clas
在vue中使用echarts(折线图的demo,markline用法)

公司最近在用vue开发项目,项目接近尾声了,趁休息时间写点demo-- vue引入echarts(折线图的demo) 主要是解决引入echarts,markline的使用(基准线) 这是demo的效果图: vue脚手架不多赘述 1.安装依赖 cnpm install echarts -S 2.在main.js中引入echarts import echarts from 'echarts' 3.在main.js中安装 Vue.prototype.echarts = echarts; 一般来说能正常

vue中设置echarts宽度自适应的代码步骤

目录

问题描述

无自适应效果图

有自适应效果图

代码步骤

相关推荐

随机推荐