x axis is 5 yyyyMMdd format dates, but the page is displayed as a number, is there any way to solve it?
<!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}">
<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">
// domecharts
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>Page effect:
