echarts地图怎么与后台进行交互?用例只是给出iphone,怎么与数据库连接改成其他的统计?本人首次用

echarts地图怎么与后台进行交互?用例只是给出iphone,怎么与数据库连接改成其他的统计?本人首次用,第1张

//设置ajax访问后台填充饼图

function setChartPie(url,id){

var Chart=require('echarts').init(document.getElementById(id))

Chart.showLoading({text: '正在努力的读取数据中...' })

var label=[]

var value=[]

$.ajax({

url:url,

dataType:"json",

success:function(data){

$.each(data,function(i,p){

label[i]=p['label']

value[i]={'name':p['label'],'value':p['value']}

})

Chart.hideLoading()

optionPie.legend.data=label

optionPie.series[0]['data']=value

optionPie.series[0]['radius']=[0,100]

Chart.setOption(optionPie)

}

})

}

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/10028490.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-04
下一篇 2023-05-04

发表评论

登录后才能评论

评论列表(0条)

保存