vue中的echarts实现宽度自适应的解决方案

今天项目中需要使用到 echarts 为了自适应。找到了。以下解决方案、

效果图

代码

<template>
 <!-- 这是图表开始 -->
    <div class="chart">
      <div
        ref="main1"
        style="width: 600px;height:400px;"
      ></div>
      <div
        ref="main2"
        style="width: 600px;height:400px;"
      ></div>
    </div>
    <!-- 这是图表结束 -->
</template>
<script>
// 导入echarts
import echarts from 'echarts'

export default {
  name: 'HomeIndex',
  components: {

  },
  props: {},
  data () {
    return {
    }
  },
  computed: {

  },
  watch: {

  },
  created () {

  },
  mounted () {
    var myChart1 = echarts.init(this.$refs.main1)
    var myChart2 = echarts.init(this.$refs.main2)
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
      }]
    }
    myChart1.setOption(option)
    myChart2.setOption(option)
    window.addEventListener('resize', () => { myChart1.resize() })
    window.addEventListener('resize', () => { myChart2.resize() })
    window.onresize = () => {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
      }, 300)
    }
  },
  methods: {

  }
}
</script>

补充：下面看下VUE+ECharts 自适应宽度

card的边框，chart divwidth: '100%'

代码：

 <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart1" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart2" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart3" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart4" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="5" style="padding-top: 0px">
      <el-col :span="12">
        <el-card>
          <div id="myChart5" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="myChart6" :style="{ width: '100%', height: '260px' }"></div>
        </el-card>
      </el-col>
    </el-row>

以上内容转载链接：https://www.cnblogs.com/xiaosheng1989/p/16415660.html

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

赞 (0)

相关推荐

  • Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    Vue echarts实例项目地区销量趋势堆叠折线图实现详解

    最终效果如图 组件结构设计 外部 Trendpage.vue <!--针对于/trendpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Trend></Trend> </div> </template> <script> import Trend from "@/components/Trend"; export

  • Vue echarts画甘特图流程详细讲解

    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可视化图表宽度自适应的完美解决方案

    Vue中使用Echarts可视化图表宽度自适应的完美解决方案

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

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

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

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

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

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

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

  • Vue echarts实例项目商家销量统计图实现详解

    Vue echarts实例项目商家销量统计图实现详解

    目录 组件结构设计 发送请求获取对应的数据并进行相应操作 当窗口尺寸发生变化时的操作 总体效果如图 组件结构设计 SellerPage.vue <!--针对于/sellerpage 这条路径显示 测试显示组件--> <template> <div class="comP1"> <Seller></Seller> </div> </template> <script> import Selle

  • Vue echarts模拟后端数据流程详解

    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 为了自适应.找到了.以下解决方案. 效果图 代码 <template> <!-- 这是图表开始 --> <div class="chart"> <div ref="main1" style="width: 600px;height:400px;" ></div> <div ref="main2" style="wi

  • 在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实现飞机航线水滴图词云图效果

    目录 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的实例代码（3种图）

    在Vue中使用echarts的实例代码（3种图）

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

  • 在Vue中使用Echarts可视化库的完整步骤记录

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

  • vue中使用echarts的示例

    vue中使用echarts的示例

    1:首先要用到echarts 2:在vue中安装这个依赖 3:引入要用的页面 import echarts from 'echarts'; 4:然后初始化 <template> <a-col span="12" style="min-height:343px;width:100%;background:#fff" ref="getwidth" :style="'display:'+ model"> &l

  • vue中使用echarts实现动态数据绑定以及获取后端接口数据

    vue中使用echarts实现动态数据绑定以及获取后端接口数据

    目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数

  • 在Vue中使用echarts的方法

    上篇文章给大家介绍了 在 webpack 中使用 ECharts的实例详解,可以点击查看. 1. 使用NPM安装(全局引入) 执行下面的命令: npm install echarts--save 引入echarts模块 在Vue项目的main.js中引入echarts模块,即是写入如下代码: import echarts from 'echarts' Vue.prototype.$echarts = echarts: 2. 按需引入 上面全局引入会将所有的echarts图表打包,导致体积过大,我

随机推荐