echart3图表的实际应用与简单示例

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("数据加载失败！");
                    }
                });
            }

这段代码展示了如何用ajax获取数据并用echart展示，希望大家看了能有所收获。