1. 程式人生 > >echarts圖表中的點、柱形或者折線顯示不出來,但是有資料的問題解決(另附後臺返回資料例項程式碼)

echarts圖表中的點、柱形或者折線顯示不出來,但是有資料的問題解決(另附後臺返回資料例項程式碼)

附:程式碼例項
<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>