echarts圖表中的點、柱形或者折線顯示不出來,但是有資料的問題解決(另附後臺返回資料例項程式碼)
阿新 • • 發佈:2019-02-04
附:程式碼例項
<script> var myChart; var eCharts; require.config({ paths : { 'echarts' : '/static/js/echart/echarts.min', 'echarts/chart/line' : '/static/js/echart/echarts.min', //對應線 'echarts/chart/bar' : '/static/js/echart/echarts.min' //對應柱形 } }); $(function(){ getCaseCheck(); }) function getCaseCheck(){ $.post("/caseCheck/getCaseCheck",function(rep){ console.log(rep.data.name); console.log(rep.data.count); require(['echarts', 'echarts/chart/bar'], DrawEChart); //建立ECharts圖表方法 function DrawEChart(ec) { eCharts = ec; myChart = eCharts.init(document.getElementById('totest')); myChart.showLoading({ text: "圖表資料正在努力載入..." }); //定義圖表options myChart.setOption( option = { color: ['#87CEEB'], tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器,座標軸觸發有效 type : 'line' // 預設為直線,可選為:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : rep.data.name,//直接把返回值填充進來,注意的是,請求後臺返回的值必須是jsonArray型別的 axisTick: { alignWithLabel: true } } ], yAxis : [ { max : rep.data.max+3, type : 'value' } ], series : [ { name:'', type:'bar', barWidth: '20%', data:rep.data.count } ] },true); myChart.hideLoading(); } }) } </script>