vue 使用echarts 一个小案例 宽度自适应

 

 

 

 

 

 

 

以组件的形式引入项目中

组件：

 

<template>
    <div>
        <div :class="className" :id="id" :style="{height:height,width:width}"></div>
    </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
//分类标题
require("echarts/lib/component/legend");

export default {
    props:['sourse'],
    data() {
        return {
            className: "echarts",
            id: "main",
            height: "360px",
            width: "100%",
            option: {
                legend: {},
                // color: ["#3C90F7", "#E05667", "#1AB394", "#F4CD49"],
                color: ["green", "yellow", "red", "#ab0"],
                dataset: {
                    source:this.sourse,
                },
                xAxis: {
                    type: "category",
                    axisTick: {
                        show: false,
                    },
                },
                tooltip:{
                    show:true
                },
                yAxis: {},
                series: [
                    {
                        type: "bar",
                        seriesLayoutBy: "row",
                    },
                    {
                        type: "bar",
                        seriesLayoutBy: "row",
                    },
                    {
                        type: "bar",
                        seriesLayoutBy: "row",
                    },
                    {
                        type: "bar",
                        seriesLayoutBy: "row",
                    },
                ],
            },
        };
    },
    mounted() {
        var myChart = echarts.init(document.getElementById("main"));
        // console.log(myChart);
        this.$nextTick(_=>{
            myChart.setOption(this.option);
        })
        window.addEventListener('resize',this.resize())
    },
    methods:{
　　//自适应宽度
        resize(){
            let that = this;
            let timer = null;
            return function(){
                if(timer){
                    clearTimeout(timer)
                }
                timer=setTimeout(()=>{
                    var myChart = echarts.init(document.getElementById("main"));
                    myChart.resize();
                })
            }
        }
    }
};
</script>

<style lang='scss' scoped>
</style>

 

 

 

父组件：

引用：

<bar :sourse='sourse'></bar>

　　数据：

sourse: [["type", "一组", "二组","三组","四组"],
                       ["月初", 320, 332, 301, 334],
                       ["月末", 220, 182, 191, 234],
                       ["离职", 150, 232, 201, 154],
           ],

 

　　注： 上文echarts 自适应宽度，转载自https://blog.csdn.net/gobacka/article/details/89183993