Echarts连接mysql数据的实例

var myChart

        //创建ECharts图表方法

        function DrawEChart(ec) {

            //--- 折柱 ---

            myChart = ec.init(document.getElementById('main'))

            //图表显示提示信息

            myChart.showLoading({

                text: "图表数据正在努力加载..."

            })

            //定义图表options

            var options = {

                title: {

                    text: "通过Ajax获取数据呈现图标示例",

                    subtext: "www.stepday.com",

                    sublink: "http://www.stepday.com/myblog/?Echarts"

                },

                tooltip: {

                    trigger: 'axis'

                },

                legend: {

                    data: []

                },

                toolbox: {

                    show: true,

                    feature: {

                        mark: false

                    }

                },

                calculable: true,

                xAxis: [

                    {

                        type: 'category',

                        data: []

                    }

                ],

                yAxis: [

                    {

                        type: 'value',

                        splitArea: { show: true }

                    }

                ],

                series: []

            }

            //通过Ajax获取数据

            $.ajax({

                type: "post",

                async: false, //同步执行

                url: "/Ajax/GetChartData.aspx?type=getData&count=12",

                dataType: "json", //返回数据形式为json

                success: function (result) {

                    if (result) {                        

                        //将返回的category和series对象赋值给options对象内的category和series

                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式

                        options.xAxis[0].data = result.category

                        options.series = result.series

                        options.legend.data = result.legend

                        myChart.hideLoading()

                        myChart.setOption(options)

                    }

                },

                error: function (errorMsg) {

                    alert("不好意思，大爷，图表请求数据失败啦!")

                }

            })

        }

参考：http://www.stepday.com/topic/?906

1.进行表格数据的变形把原始表格数据进行转换为如图的形式。数据与数据之间有间隔，和图表的柱形一样有梯度。2.图表的制作选中变形的数据区域——点击插入——推荐的图表。3.点击所有图表——堆积柱形图。4.数据柱子——设置数据系列格式——分类间距（调整为0）。5.添加标题和数据来源——根据表格需要，添加标题，标题尽量简洁，且能够反映表格内容，突出你想表达的观点。字体（衬线字体：线条粗细不同，适合小号字体使用，投影时清晰度不高，无衬线字体：粗细相同，更适合大号字体时使用，投影时美观）中文字体：微软雅黑，黑体6.添加背景设——以单色调为主。

在echarts的官网上面去下载一个了小的案例了，

注意事项：就是导入echarts包的路径了，现在的版本有3个了，一个是最大版、一般的，缩减版本，我下的是最大了，反正也没多大啊，

juqery还是导入吧

代码很简单的了，很少了，

注意一点就是要按照这个顺序来了，我由于没有没有按照这个顺序了，居然报错，没有找到这个dom(main)

运行成功了

---