echart是百度團隊推出的一個純js的圖示庫，現在已經到了3.0版本，這個庫的綜合能力是非常強大的，上手也不困難，目前在我的專案上會用到一些基本的圖表，在此記錄下來，以便於日後檢視。下面是一段js程式碼，用來展示一個常規的柱狀圖是如何形成的：

// 指定圖表的配置項和資料
             function initialize1(date) {
                //初始化前先銷燬
                echarts.dispose(document.getElementById('chart1'));//容器id
                var myChart = echarts.init(document.getElementById('chart1'));//容器id
 


                //圖表
                myChart.showLoading({
                    text: "載入中...請等待"
                });
                $.ajax({
                    type: 'POST',
                    url: encodeURI(此處為後臺資料的獲取地址),
                    async: true,
                    dataType: "json", //返回資料形式為json  
                    contentType: "application/json; charset=utf-8",
                    success: function(result) {
                        if (result) {
                            //將返回的xAxis和series物件賦值給options物件內的category和series
                            var option = {
                                title: {
                                    text: '圖表標題',
                                    textStyle: {
                                        color: '#666',
                                        fontSize: 15
                                    }
                                },
                                tooltip: {},
                                legend: {
                                    data: result.legend
                                },
                                xAxis: {
                                    data: result.xAxis, //等待賦值
                                    axisLabel: {
                                        interval: 0, //橫軸資訊全部顯示
                                        rotate: 30
                                    }
                                },
                                yAxis: {},
                                series: [{
                                name: "圖例1",
                                    type: "bar",
                                    data: result.series[0].data,
                                    itemStyle:  {
                                    normal:     {
                                        color: '#1ea7f0'
                                                }
                                                }
                                }, {
                                name: "圖例2",
                                    type: "bar",
                                    data: result.series2[0].data,
                                    itemStyle:  {
                                        normal: {
                                        color: '#F48a33'
                                                }
                                                }
                                }]

                            };
                            myChart.hideLoading();
                            myChart.setOption(option);
                        }
                    },
                    error: function(errorMsg) {
                        alert("資料載入失敗！");
                    }
                });
            }