解决echarts用官方例子不显示图形，只有两个坐标轴显示的问题

最新推荐文章于 2024-04-29 22:09:50 发布

weixin_43991257

最新推荐文章于 2024-04-29 22:09:50 发布

阅读量1.4k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_43991257/article/details/124665703

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这个问题真的很无语，首先自己是用官网的例子，但是奇怪的是照搬到自己的代码里面都没有显示。因为自己用的是axios请求过来的数据，所有一开始怀疑自己封装的数据有问题，但是并不是，因为我试了不管是请求来的数据还是静态数据都一样不显示图形。
用的官网例子如下：
在这里插入图片描述

照搬上图两个的实例都是图形空白的结果！！！！！！！！！
如下显示：只有两根坐标线。

后来在想可能是官网写法不支持，所以改用了serise里面写数据，结果通了！
代码如下：

option = {
            title: {
                text: '(次)'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ["进","出"],
                right: 1,
            },
            grid: {
                left: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data:["天河停车场","南沙停车场","越秀停车场","白云停车场"],
                axisLabel:{
                    show:true,
                    align:'left',
                    interval:0,
                    rotate:-25,
                    margin:14,
                },
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    name: "进",
                    type: 'bar',
                    data: [32,24,65,34],
                    barWidth: 16,//柱子粗细
                    barGap:0,//柱子间距
                    itemStyle:{
                        normal:{
                            color:'#c7f9b9'
                        },
                    },
                    smooth: true,
                },
                {
                    name: "出",
                    type: 'bar',
                    barWidth: 16,//柱子粗细
                    data: [18,45,32,43],
                    itemStyle:{
                        normal:{
                            color:'#ff5454'
                        },
                    },
                    smooth: true,
                }
            ]

        };