echarts横轴数据显示异常

x轴是5个yyyyMMdd格式的日期,但是页面显示的时候都显示成了一个个数字,有什么办法解决吗?

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;margin-top:30px;border:1px solid red;"></div>
<p id="result1" th:text="${result}"></p>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.common.js"></script>

<script type="text/javascript">

        // 基于准备好的dom,初始化echarts图表
        var main = echarts.init(document.getElementById('main'));
        var result1 = document.getElementById('result1').innerHTML;
        console.log(result1)
        //显示加载动画
        // main.showLoading();
        var result = JSON.parse(result1);
        console.log("result="+result)
        var valueData = result.valueData;
        console.log("valueData="+valueData)
        var categoryData = result.categoryData;
        console.log("categoryData="+categoryData)
        //隐藏加载动画
        // main.hideLoading();
        main.setOption({
            //提示框组件
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: result.categoryData,
                axisLabel:{
                    interval:0,//横轴信息全部显示
                    rotate:-30,//-30度角倾斜显示
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'条数',
                data: result.valueData,
                type: 'bar'
            }]

        });
</script>
</body>
</html>

页面效果:

clipboard.png

clipboard.png

阅读 2.3k
2 个回答

你的 result.categoryData 这个值是不是一个字符串? 你将他转换为数组看看

@duolalu 说的对,你的 result.categoryData是个json字符串,转换一下 JSON.parse(result.categoryData) 试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题