Echarts繪製多條折線圖

我們想繪製什麼類型圖表，可以在百度官方示例中找。然後參考寫就objk了。

示例鏈接地址：

http://echarts.baidu.com/examples/

貼下圖表示例:

一、引入echarts的JS文件

#這個是百度的csdn
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

二、html代碼

#這個div中就是包裹着圖表，而且dailyChart這個是定義div的高度和寬度
 <div id="dailyChart" class="dailyChart">

  </div>

三、後臺拼接好要顯示的多條折線條數據，大概代碼

foreach ( $this->targetMap as $k=>$v ) {
      $seriesAllSum[] = ['name'=>$v.'累計用戶','type'=>'line','data'=>$daily['all_num_'.$k],'smooth'=>true];
      $seriesActiveNum[] = ['name'=>$v.'月活用戶','type'=>'line','data'=>$daily['month_active_num_'.$k],'smooth'=>true];
}

 $this->response['data'] = ['legend_all_sum'=>$legendAllSum,'legend_active_num'=>$legendActiveNum,'xAxis'=>$daily['xAxis'],'series_all_sum'=>$seriesAllSum,'series_active_num'=>$seriesActiveNum];
 $this->ajaxReturn($this->response);

四、js代碼顯示後端數據

#這個ajax回調函數繪製
    initDailyChart(json.data);


    /**
     * 加載以天爲單位的新增用戶數折線圖
     * @param {type} data 數據
     */
    function initDailyChart(data) {
        chart = echarts.init(document.getElementById('dailyChart'), 'light');
        option = {
            title: {
                text: '累計用戶數'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: data.legend
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.xAxis    #橫座標
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: data.series_all_sum   #這個多條數據系列列表
        };
        chart.setOption(option,true);  #注意，這個true參數，可以重新加載數據會重新繪製圖表，否則不生效！
    }