最近做的项目中有一个需求，有9个板块，根据登录用户权限的不同显示对应的板块的表格。我起初的代码是这样写的。

<div class="layui-col-md4" id="echartBox1" style="display:none">
    *
</div>

也就是用display属性把9个板块都隐藏了，然后js里写if判断，需要哪个就用jquery的show方法把它显示出来。

$("#echartBox1").show();
echarts_1();

后面的echarts_1()就是绘表格函数。

但是这种方法能让div显示出来，但是div中的表格死活显示不出来。控制台也没有error报错。

后来把display:none样式去掉了，改成用jquery的hide方法来隐藏div，结果就可以了。

$("#echartBox1").hide();

原因：axios的异步问题，
解决方法：必须先获取到数据再进行画图
解决部分代码：

this.getRes().then(res=>{
                    // console.log(res)
                    if(res.code==200){
                        this.factorRes = res.data.data.factorRes;
                        this.factorRes.forEach(item => {
                            this.factorX.push(item.factorName)
                            this.factorY.push(item.factorScore)
                        })
                        this.option.xAxis.data = this.factorX;
                        this.option.series[0].data = this.factorY;
                        // console.log(this.option)
                        var myChart = echarts.init(document.getElementById('echart'));
                        // 绘制图表
                        myChart.setOption(this.option, true);
                    }
                })

完全代码：

<template>
    <div>
        <el-card style="margin: 20px 40px 0px 40px">
            <div style="text-align: center;"><h2 style="margin-top: 0px">{{this.scale.scaleName}}测评报告</h2></div>
            <div style="justify-content: center;display: flex">
                <span style="float: right;font-size: 14px">测试日期：{{this.record.redTime}}</span>
            </div>
            <div>
                <el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
                测评结果
            </div>
            <div style="margin-top: 20px;">
                <div style="margin-left: 20px">您的量表总得分为：{{this.record.redScore}}</div>
                <div style="margin-left: 20px;margin-top: 10px">具体因子得分为:</div>

                <el-table :data="factorRes" border stripe style="width: 500px;margin: 20px auto"
                          :header-cell-style="getRowClass">
                    <el-table-column prop="factorName" label="因子名称"></el-table-column>
                    <el-table-column prop="factorScore" label="因子得分"></el-table-column>
                </el-table>
                <template>
                    <div id="echart" style="width:600px;height:400px;margin:0 auto"></div>
                </template>

            </div>
            <div>
                <el-icon class="el-icon-s-opportunity" style="color: #0a76a4"></el-icon>
                得分说明
            </div>
            <div style="margin-top: 20px;margin-left: 10px">
                <b>【量表结果解释】：</b>{{this.scale.scaleRes}}
            </div>
            <div style="margin-top: 20px;margin-left: 10px" v-for="item in this.factorRes" :key="item.fcId">
                <b>【{{item.factorName}}】：</b>{{item.factorInfo}}
            </div>

        </el-card>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import moment from 'moment'
    import * as echarts from 'echarts'

    export default {
        name: "StudentRes",
        data() {
            return {
                redId: '',
                factorRes: [],
                factorX: [],
                factorY: [],
                record: {},
                scale: {},
                option: {
                    tooltip: {},
                    xAxis: {
                        type:'category',
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true, //y轴线显示
                        }
                    },
                    series: [
                        {
                            type: 'bar',
                            data: [],
                            barWidth: '20%',
                            barGap:1,
                            label:{
                                show:true,
                                position:'top'
                            }
                        },
                    ]
                }
            }
        },
        created() {
            this.redId = this.$route.params.redId;
            // console.log(this.redId)
            this.getRes();

        },
        mounted() {
            this.draw()
        },
        methods: {
            draw() {
                // 基于准备好的dom，初始化echarts实例
                this.getRes().then(res=>{
                    // console.log(res)
                    if(res.code==200){
                        this.factorRes = res.data.data.factorRes;
                        this.factorRes.forEach(item => {
                            this.factorX.push(item.factorName)
                            this.factorY.push(item.factorScore)
                        })
                        this.option.xAxis.data = this.factorX;
                        this.option.series[0].data = this.factorY;
                        // console.log(this.option)
                        var myChart = echarts.init(document.getElementById('echart'));
                        // 绘制图表
                        myChart.setOption(this.option, true);
                    }
                })

            },
            //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据

            async getRes() {
                const res = await request.get(`${this.GLOBAL.BASE_URL}/scale/res/${this.redId}`);
                // console.log(res)
                if (res.code !== 200) return this.$message.error("获取测评结果失败！")

                this.record = res.data.data.record;
                this.record.redTime = moment(this.record.redTime).format("yyyy年MM月DD日 HH:mm:ss")
                const res1 = await request.get(`${this.GLOBAL.BASE_URL}/scale/${this.record.scaleId}`);
                if (res1.code !== 200) return this.$message.error("获取量表信息失败！")
                this.scale = res1.data.data.scale
                return res
            },
            // eslint-disable-next-line no-unused-vars
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background:#87CEEB'
                } else {
                    return ''
                }
            }
        }
    }
</script>

<style scoped>

</style>

最近我在做一个小项目，需要绘制一个折线图。说干就干，我在echarts官网上找到折线图绘制的代码，放到了自己建的html文件中，环境以及需要的js文件也都准备好了，正当我满怀期待的希望看到折线图时，界面上竟然只显示了一个有底色的div框，于是刚接触前端可视化的我陷入了沉思，并开始尝试各种能想到的办法......还好最后问题解决啦！现将代码和效果图贴上。

一开始的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>

</head>
<body>
    <div class="t_container">

        <div id="chart_11" class="echart" style="width: 600px; height: 400px; position: absolute; top: 100px; left: 550px; background-color: #60A2D7"></div>
    
    </div>

     <script>
    $(function () {
    echart_11();

    function echart_11() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_11'));
        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        option = {
            xAxis:{
                type:'category',
                data:xDataArr
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    type:'line',
                    data:yDataArr
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

</script>

</body>

</html>

效果图：

 经过一番折腾，尝试了各种方法之后，这个问题终于得以解决

正确的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
     <script>

    function echart_11() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_11'));
        var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
        option = {
            xAxis:{
                type:'category',
                data:xDataArr
            },
            yAxis:{
                type:'value'
            },
            series:[
                {
                    type:'line',
                    data:yDataArr
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

</script>
</head>
<body>
    <div class="t_container">

        <div id="chart_11" class="echart" style="width: 600px; height: 400px; position: absolute; top: 100px; left: 550px; background-color: #60A2D7"></div>
        <script>
            echart_11();
        </script>
    </div>



</body>

</html>

我想要的显示效果：

 仅个人学习记录，如有不当之处，欢迎批评指正！！！