Echarts 柱状图 X 轴坐标显示混乱? 数据转换方法是关键!

Echarts 柱状图 X 轴坐标显示混乱?  数据转换方法是关键!

echarts 柱状图数据显示紊乱:解决之道

在使用 echarts 将从后台获取的数据呈现在柱状图时,您遇到 x 轴坐标显示混乱的问题,这可能是因为您的数据转换方式存在问题。下面为您提供解决该问题的答案。

首先,您需要为 echarts 创建一个带有 id(例如 shuju)的 div 容器:

<div id="shuju" style="width: 550px;height: 255px;position: absolute;top: -6%;left: 32%;"></div>
登录后复制

然后,将 echarts 选项配置复制到该 div 容器中,并将其初始化为 mychart:

var mychart = echarts.init(document.getelementbyid('shuju')); //关键代码 option = {   // 这里配置省略 }; mychart.setoption(option);
登录后复制

确保 x 轴数据格式正确,种类是 ‘category’,具体示例如下:

xAxis: [   {     type: 'category',     data: ['待审核重大隐患', '挂牌中重大隐患', '逾期未整改隐患', '一般隐患', '梅溪镇', '溪龙乡', ..., '天荒坪镇'],     axisTick: {       alignWithLabel: true     }   } ]
登录后复制

请检查您的数据转换方式,确保它正确地将数据转换为 echarts 所需的格式。按照上述步骤操作,您应该可以解决 x 轴坐标混乱的问题,并在柱状图上正确显示数据。

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容