echarts 柱状图 x轴数据为0占位情况多X轴展示

最新推荐文章于 2024-05-20 11:37:21 发布

丿寒灬夏丶

最新推荐文章于 2024-05-20 11:37:21 发布

阅读量4.7k

点赞数 1

文章标签： js jquery qt echart 绘图

本文链接：https://blog.csdn.net/weixin_44718234/article/details/107107121

版权

echarts 柱状图 x轴多维度显示不同数据源

在这里插入图片描述
echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象，如上图，如果不让显示空的，每个维度有几天就显示几条，那怎么解决呢？

想了两天终于想到了办法，那就是添加多个X轴的数据就可以，在这记录一下，如果哪位有更好的办法，请告知：
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {
   };
option = null;
var posList = [
    'left', 'right', 'top', 'bottom',
    'inside',
    'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
    'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];

app.configParameters = {
   
    rotate: {
   
        min: -90,
        max: 90
    },
    align: {
   
        options: {
   
            left: 'left',
            center: 'center',
            right: 'right'
        }
    },
    verticalAlign: {
   
        options: {
   
            top: 'top',
            middle: 'middle',
            bottom:

最低0.47元/天解锁文章

丿寒灬夏丶

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
5
评论
echarts 柱状图 x轴数据为0占位情况多X轴展示

echarts 柱状图 x轴多维度显示不同数据源echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象，如上图，那怎么解决呢？想了两天终于想到了办法，那就是添加多个X轴的数据就可以，在这记录一下，如果哪位有更好的办法，请告知：效果图：代码： app.configParameters = {rotate: {min: -90,max: 90},align: {options:
复制链接

扫一扫