vue中Echarts图表宽度没占满的问题

目录
  • vue Echarts图表宽度没占满
    • 解决方法
  • vue Echarts图表宽度自适应，亲测有效
    • 实现宽度自适应语句

vue Echarts图表宽度没占满

显示效果：

经过测试，当把宽度写成固定px的时候，就能正确渲染。

解决方法

1、宽高写成固定px，针对宽度不需要自适应的大屏。

2、当宽度需要自适应，父元素需要设置宽高，可以使用$nextTick 当元素宽度发生改变，只需要等待DOM渲染完成在渲染图表，这样就不会出现问题了。

相似案例：

当点击按钮使用v-if进行图表切换，同样会使出现宽高不占满情况。

mounted() {
	this.$nextTick( () => {
	  this.drawBar();
	})
}

vue Echarts图表宽度自适应，亲测有效

实现宽度自适应语句

//实现自适应部分
 window.onresize = () => {
     // 基于准备好的dom，初始化echarts实例
    let myChart = this.$echarts.init(document.getElementById('newEcharts'));
    myChart.resize();
};

代码使用如下：

<template>
  <el-row>
     <el-col :xs="24" :sm="24" :md="24" :lg="24">
       <div id="newEcharts" style="width:100%;height:400px;padding-top:40px"></div>
     </el-col>
  </el-row>
</template>
<script>
   export default {
    data() {
      return {
        newVisible: false,
        newDialogFormVisible: false,
       
      };
    },
    mounted () {
      this.initEcharts()
      //实现自适应部分
      window.onresize = () => {
      // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('newEcharts'));
        myChart.resize();
        };
    },
    methods: {
      // 创建方法
      initEcharts() {
        var echarts = require('echarts');
 
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(document.getElementById('newEcharts'));
        // 绘制图表
         const option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option)
      },
    },
  }
</script>

效果如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3封装echarts组件最佳形式详解

    目录 思路 目录结构 组件代码 v-charts.vue useCharts.ts type.d.ts options/bar.ts 项目中使用 index.vue /hooks/useStatisDeviceByUserObject.ts 思路 项目中经常用到echarts,不做封装直接拿来使用也行,但不可避免要写很多重复的配置代码,封装稍不注意又会过度封装,丢失了扩展性和可读性.始终没有找到一个好的实践,偶然看到一篇文章,给了灵感.找到了一个目前认为用起来很舒服的封装. 结合项目需求,针对不

  • vue3+Echarts页面加载不渲染显示空白页面的解决

    目录 vue3 Echarts页面加载不渲染显示空白页面 个人认为造成这个问题的原因 解决这个问题的方法 vue Echarts白屏或等一会才出现 原因 解决方法 vue3 Echarts页面加载不渲染显示空白页面 在父组件获取到数据后传递给子组件并没有及时的更新渲染图表. 在本地开发环境是没有一点问题,但发布到测试环境上每次页面加载都不渲染,点击浏览器刷新按钮后才会去渲染图表. 个人认为造成这个问题的原因 页面加载子组件dom元素此时还没有加载完成,所以看到的就是空白,只有刷新一下才可以. 解

  • vue3+ts+echarts实现按需引入和类型界定方式

    目录 vue3+ts+echarts实现按需引入和类型界定 vue3按需引入echarts问题及使用 vue3+ts+echarts实现按需引入和类型界定 一直想系统学习一下echarts,无奈今天在引入上就犯了难,现记录一下我的解决方案 为了减少体积和使用的便利,我想实现一个按需和全局的引入 本来是想在main.ts当中直接import * as echarts from 'echarts',然后把这个echarts挂载在app的实例上,但是以我现有的经验,这可能要涉及到this的问题,vue

  • Vue 项目中Echarts 5使用方法详解

    Vue 项目中Echarts 5使用方法详解

    目录 前言 创建项目 基本使用 安装 使用方法 柱状图 动态排序柱状图 前言 Echarts 是一个纯JavaScript的图表库,兼容绝大部分的浏览器,底层依赖轻量级的canvas类库ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表. 创建项目 先使用vue-cli创建一个新的项目,配置按照自己的需要选择,默认的也可 vue create vue_echarts cd vue_echarts npm run serve 基本使用 安装 首先安装echarts npm i

  • vue中Echarts使用动态数据的两种实现方式

    vue中Echarts使用动态数据的两种实现方式

    目录 Echarts使用动态数据的两种方式 1.通过computed 2.在data中定义option vue Echarts几种常用图表动态数据切换 1.柱状图 2.平滑折线面积图 3.折线图堆叠 4.饼状图 Echarts使用动态数据的两种方式 在使用Echarts时我们数据一般不是静态写死的,而是通过后端接口动态获取的,在此总结两种在vue框架下Echarts使用动态数据的方式. 1.通过computed computed: {     options() {       let that

  • vue3中echarts的tooltip组件不显示问题及解决

    vue3中echarts的tooltip组件不显示问题及解决

    目录 vue3 echarts的tooltip组件不显示 解决办法 Echarts|tooltip提示框组件参数 vue3 echarts的tooltip组件不显示 data() { return { chartInstance: '' } }, mounted() { if(!this.chartInstance) this.chartInstance = echarts.init(this.$refs.myChart) this.chartInstance.setOption(option)

  • vue中Echarts图表宽度没占满的问题

    vue中Echarts图表宽度没占满的问题

    目录 vue Echarts图表宽度没占满 解决方法 vue Echarts图表宽度自适应,亲测有效 实现宽度自适应语句 vue Echarts图表宽度没占满 显示效果: 经过测试,当把宽度写成固定px的时候,就能正确渲染. 解决方法 1.宽高写成固定px,针对宽度不需要自适应的大屏. 2.当宽度需要自适应,父元素需要设置宽高,可以使用$nextTick 当元素宽度发生改变,只需要等待DOM渲染完成在渲染图表,这样就不会出现问题了. 相似案例: 当点击按钮使用v-if进行图表切换,同样会使出现宽

  • vue中echarts图表大小适应窗口大小且不需要刷新案例

    我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')) //根据窗口的大小变动图表 --- 重点 window.onresize = function(){ myChart.resize(); //myChart1.resize(); //若有多个图表变动,可多写 } 代码如下: mounted() { con

  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }

  • Vue实现Echarts图表宽高自适应的实践

    目录 1. 安装并引入 2. 定义防抖函数 3.  绘制图表代码 init 方法 resize 方法官网解释 1. 安装并引入 npm install echarts --save //main.js // import echarts from 'echarts'; import * as echarts from 'echarts'; // 如果安装的是echarts 5以上版本,则需此种方式引入 Vue.prototype.$echarts = echarts 2. 定义防抖函数 传送门:

  • vue使用echarts图表的详细方法

    vue使用echarts图表的详细方法

    本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli  脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro

  • vue中echarts引入中国地图的案例

    如下所示: <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div> mounted() { this.drawLine(); }, drawLine(){ // 基于准备好的dom,初始化echarts实例 var myChartContainer = document.getElementById('myChartChina'); var resizeM

  • vue使用echarts图表自适应的几种解决方案

    vue使用echarts图表自适应的几种解决方案

    1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活): let myChart1 = echarts.init(document.getElementById(dom1)) let m

  • Vue使用Echarts图表多次初始化报错问题的解决方法

    Vue使用Echarts图表多次初始化报错问题的解决方法

    目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex

  • vue中echarts关系图动态增删节点以及连线方式

    vue中echarts关系图动态增删节点以及连线方式

    目录 echarts关系图动态增删节点及连线 echarts关系图vue完整代码 echarts关系图动态增删节点及连线 首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接! 下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多. 我是用的关系图是力引导图 更新后不会重新渲染,只是动态增加的效果 //假设你已经渲染了关系图 test() { let option = this.chart.getOption() //获取option配置项 //S

随机推荐