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>
页面效果:
你的 result.categoryData 这个值是不是一个字符串? 你将他转换为数组看看