精华内容
下载资源
问答
  • Echarts图表不显示
    万次阅读 多人点赞
    2019-04-12 00:47:39

    Echarts图表不显示

    div标签的style属性设置有问题

     <div id="chart-user" style="width:500px; height:500px" ></div>
    
    更多相关内容
  • 最近做的项目中有一个需求,有9个板块,根据登录用户...也就是用display属性把9个板块都隐藏了,然后js里写if判断,需要哪个就用jquery的show方法把它显示出来。 $("#echartBox1").show(); echarts_1(); 后面的echa

    最近做的项目中有一个需求,有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();

     

    展开全文
  • { tooltip: {}, xAxis: { type:'category', data: [] }, yAxis: { type: 'value', axisLine: { show: true, //y轴线显示 } }, series: [ { type: 'bar', data: [], barWidth: '20%', barGap:1, label:{ show:true, ...

    原因: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绘图不显示问题终于解决了!

    最近我在做一个小项目,需要绘制一个折线图。说干就干,我在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>

    我想要的显示效果:

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

    展开全文
  • 主要介绍了解决echarts图表使用v-show控制图表显示不全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • echarts图形界面无法显示或者刷新页面后才显示的可能原因及解决办法
  • 踩坑记录echarts图显示隐藏后不显示 ...那么问题来了,当返回空数据时,先把图隐藏起来,当再次请求到数据并把图进行实例化时,图怎么都显示不出来,控制台上也不报错 Markdown将文本转换为 HTML。 ...
  • 主要介绍了解决Echarts2竖直datazoom滑动后显示数据全的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Echarts入门实例显示不出办法

    千次阅读 2021-07-27 09:05:33
    我使用的是官方的实例,但是复制代码之后,不显示图表 在这行代码 <div id="main" style="width: 600px;height:400px;"></div> 下面拷贝下面的这行代码: <script type="text/javascript" src=...
  • vue 工程中加入 echarts 图表不显示的问题 一、问题原因 vue 引用 echarts 方式错误,高版本采用了低版本的引用方式 二、vue工程使用echarts vue官方教程 1. 安装 echarts 组件 # 方法一 下载到工程目录的 node_...
  • echarts 地图json数据全国省市(区县不显示), 精确到市级。
  • echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据echarts地图散点悬浮显示多条数据
  • echarts在vue项目中不显示的问题

    千次阅读 2021-03-21 20:17:35
    写项目时遇见了一个小问题,写篇博客记录一下,233。 写项目时有两个dom中需要用到echarts图表,写的时候没注意两个页面的id都写...两个页面我用的都是main这个id,导致页面里的第二个echarts图表不显示,控制台里也
  • thinkPHP5动态读取mysql温湿度烟雾浓度时间数据在echarts显示折线图
  • 解决Vue打包echarts无法显示的问题

    千次阅读 2022-03-13 15:07:26
    跟着我的步骤做,就不会出现打包后无法显示的情况。 1、采用CDN引入echarts,在项目的public中的index.html中引入CDN <!-- 引入echarts CDN脚本 --> <script src=...
  • vue项目当中echarts不显示

    万次阅读 2018-07-09 20:01:15
    1.在vue里面的echarts图表始终不出来,先熟悉哈页面解构 vue的代码: &amp;lt;!--为echarts准备一个具备大小的容器dom--&amp;gt; &amp;lt;div id=&quot;attendanceData&quot; style...
  • echarts圆环中间显示文字.docx
  • echarts markLine 不显示

    千次阅读 2022-04-21 10:30:28
    引入组件时少引入了marlLine组件 require("echarts/lib/component/markLine");
  • 原因在于如果加限制 使用echarts 绘图的js有很大机率先于dom初始完成之前运行,造成图表不显示。 解决: 使用setTimeout函数延迟运行绘图的js.时间在400毫秒左右 paintObj={ init:()=>setTimeout("paint()",400...
  • echarts图表不显示

    千次阅读 2021-02-07 13:44:33
    vue中使用echarts折线图,需要点击获取数据然后显示对应的折线图 问题描述: 显示折线图时发现太小,只能显示一部分,图表大小并没有自适应,初始化时已经给了resize this.linechart = echarts.init(this.$refs....
  • 有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必可少的KaTeX数学...
  • 众所周知,我们在项目中如果能够按需引入模块,这将大大缩小项目体积,避免不必要的性能耗费。本文介绍如何解决按需引入 ECharts 后图例不显示的问题。
  • 2.echarts使用方法是否正确(当然这个方法我是很确定的,因为只有在标签切换的时候才会出现这样的问题) 3.在多种加载方式中,查看该情况下的区别,然后终于找到了问题原因,希望能解决你的问题。 echarts的原理...
  • echarts legend不显示

    千次阅读 2021-06-25 09:44:15
    60,70,60,80] } ] } myCharts.setOptions(options) 2、情况二,如果legend中的data是动态加入的,就会不显示 解决办法:能单独添加data,要将legend一起整体添加 var options = { series:[ { name:"2018...
  • 版本可以理解,因为引用的echarts.js版本比价低,导致我所画的图出来;后来换了最新版本的js就好了,直接取官网下载就行; 第二种情况是我对这个api根本熟悉,只为了完成任务,也没认真看;  require.config...
  • echarts图例不显示

    千次阅读 2020-08-26 17:44:08
    第二次遇到这个问题,又找了半天,忽然开窍想到了上次是如何解决的:name赋值与曲线图的name赋值一致导致的。 官方说明:图例项的名称,应等于某系列的name值(如果是饼图,也可以是饼图单个数据的name) ...
  • 由于我是在echarts官网下载的精简版的插件,但发现下载的js里缺少了部分代码,所有果断换成正常比较全的js包,然后重新biuld在预览小程序即可,希望对遇到同样问题的小伙伴有所帮助 不要使用精简版echarts.js ...
  • 效果图: type: 'pie', label: { normal: { position: "inside" } }, Ps:如果这是把显示文字放在饼图内部,也可以避免数据超过显示区域的问题,但是有点空旷,视觉效果不是太好 ...
  • 【vue】解决:vue调用echarts时mounted起作用页面不显示 问题:图像不显示;mounted灰色起作用。 解决:mounted可以写在methods里,生命周期钩子的函数需要写在methods外部。调用相应的echarts画图的函数即可...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,937
精华内容 15,974
关键字:

echarts显示不出来