vue设置Echarts自适应

Vue.js, 前端开发, 编程技术你是第1646个围观者 0条评论供稿者：陈建鑫标签：echarts, veu小技巧, vue添加charts

今天给elementUI 的element-admin 配置了echarts发现一直不能自适应，继续echarts应该有函数自己控制的，找了文档发现了，记录下，以便记忆和大家使用过

使用echarts只要添加代码：

Source code

:style="{height: '400px',width:'100%'}"

一直使用的style没有生效，发现原来自己错了

贴下完整代码：

Source code

<template>
 
 
            <div ref="initCharts" :style="{height: '400px',width:'100%'}"  ></div>
 
 
 
</template>
 
<script>
 
//全部引入
var echarts = require('echarts')
 
 
export default {
 
  name: 'DashboardEditor',
  components: { PanThumb },
  data() {
    return {
 
 
    }
 
  },
 
    mounted() {
        this.initCharts();
    },
    methods: {
        initCharts() {
            this.chart = echarts.init(this.$refs.initCharts);
            this.setOptions();
        },
        setOptions() {
            this.chart.setOption({
 
                tooltip: {},
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            })
        }
    },
    watch: {
 
    }
}
 
</script>

说说梦想，谈谈感悟，聊聊技术，有啥要说的来github留言吧 https://github.com/cjx2328

—— 陈建鑫

随机文章

vue设置Echarts自适应

标签云集