ajax+echarts实现数据可视化

在项目开发中,我们往往会有将数据可视化展现的功能,于是学会echarts的使用就成为了一件刻不容缓的事情。在echarts官网的实例中,可以大概知道echarts有两种方法实现图表,首先是通过ajax和后台实现jsonarray以及jsonobject等类型的传输,具体传输格式需要参考ehcarts中的示例代码,另外一种方法则是生成.json文件,通过在前端用$.get获取文件中的json数据。其实两种方法内在的实现都基本一样,都是前端得到json数据的过程。所以这里就主要讲讲第一种方法的前后台具体实现。

一、首先举一个最简单的例子—— 一个简单的饼状图【链接】。

这里面有两组数据:

1、第一个为

 data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
可以知道在jsonarray中放了五个字符串,在后台用一个jsonarray拿到这五个字符串就可以直接搞定。效果如下



2、第二个为

data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]

是在一个jsonarray放了五个jsonobject。在jsonarray分别add五个已经加了不同的value和name属性的jsonobject,即可实现,效果如下。


具体实现传值需要用ajax,实现如下(我们返回了一个jsonarray,第一个存的是第一组数据,第二个存的是第二组数据)

<div id="main" style="width: 700px;height:400px;"></div><%--<td >设置当前显示图表的模块,id应init中一致</td>--%>
  <script type="text/javascript">
                //数据纯属虚构
                var myChart = echarts.init(document.getElementById('main'));
 $.ajax({
                    type : "post",
                    async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
                    url : "Servlet3",    //请求发送到相应的servlet
                    dataType : "json",        //返回数据形式为json
                    success : function(data) {
                        //请求成功时执行该函数内容,result即为服务器返回的json对象
                        if (data) {
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data:data[0]
//返回的jsonarray中的第一组数据
},  series: [
        {
            name             :'访问来源',
            type             :'pie',
            radius           : ['50%', '70%'],
            avoidLabelOverlap: false,
            label            : {
            normal           : {
            show             : false,
            position         : 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data[1]
        }
    ]
};} }, 
error : function(errorMsg) { 
//没做出错处理 //请求失败时执行该函数 alert("图表请求数据失败!"); 
} 
})
</script>
二、然后是一个比较常用的的例子—— 一个比较基础的地图【链接】。
这个里面需要一组data如下
var data = [{
        name: '北京',
        value: 5.3
    },
    {
        name: '天津',
        value: 3.8
    },
    {
        name: '上海',
        value: 4.6
    },
    {
        name: '重庆',
        value: 3.6
    },
    {
        name: '河北',
        value: 3.4
    },
    {
        name: '河南',
        value: 3.2
    },
    {
        name: '云南',
        value: 1.6
    },
    {
        name: '辽宁',
        value: 4.3
    },
    {
        name: '黑龙江',
        value: 4.1
    },
    {
        name: '湖南',
        value: 2.4
    },
    {
        name: '安徽',
        value: 3.3
    },
    {
        name: '山东',
        value: 3.0
    },
    {
        name: '新疆',
        value: 1
    },
    {
        name: '江苏',
        value: 3.9
    },
    {
        name: '浙江',
        value: 3.5
    },
    {
        name: '江西',
        value: 2.0
    },
    {
        name: '湖北',
        value: 2.1
    },
    {
        name: '广西',
        value: 3.0
    },
    {
        name: '甘肃',
        value: 1.2
    },
    {
        name: '山西',
        value: 3.2
    },
    {
        name: '内蒙古',
        value: 3.5
    },
    {
        name: '陕西',
        value: 2.5
    },
    {
        name: '吉林',
        value: 4.5
    },
    {
        name: '福建',
        value: 2.8
    },
    {
        name: '贵州',
        value: 1.8
    },
    {
        name: '广东',
        value: 3.7
    },
    {
        name: '青海',
        value: 0.6
    },
    {
        name: '西藏',
        value: 0.4
    },
    {
        name: '四川',
        value: 3.3
    },
    {
        name: '宁夏',
        value: 0.8
    },
    {
        name: '海南',
        value: 1.9
    },
    {
        name: '台湾',
        value: 0.1
    },
    {
        name: '香港',
        value: 0.1
    },
    {
        name: '澳门',
        value: 0.1
    }
];

可以看出传来的数据为一个jsonarray中嵌套了多个jsonobject。在这个例子中不用把所有的地名写出来,只用写有变化的那几个就ok,其他地区的数据默认为零,最终前端代码如下:

<div class="info_head">
                    <h4>对外投资分布图</h4>
                    <div id="main1" style="width: 700px;height:400px;"></div>
                </div>
            </div>


            <script type="text/javascript">
                //数据纯属虚构
                var myChart = echarts.init(document.getElementById('main1'));
                //数据纯属虚构
                $.ajax({
                    type : "post",
                    async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
                    url : "Servlet3",    //请求发送到相应的servlet
                    dataType : "json",        //返回数据形式为json
                    success : function(data) {
                        //请求成功时执行该函数内容,result即为服务器返回的json对象
                        if (data) {

                            // alert(data);

                            var yData = [];

                            data.sort(function(o1, o2) {
                                if (isNaN(o1.value) || o1.value == null) return -1;
                                if (isNaN(o2.value) || o2.value == null) return 1;
                                return o1.value - o2.value;
                            });

                            for (var i = 0; i < data.length; i++) {
                                yData.push(data[i].name);
                            }

                            var option = {
                                title: {
                                    text: '',
                                    textStyle: {
                                        fontSize: 30
                                    },
                                    x: 'center'
                                },
                                tooltip: {
                                    show: true,
                                    formatter: function(params) {
                                        return params.name + ':' + params.data['value'] + '%'
                                    },
                                },
                                visualMap: {
                                    type: 'continuous',
                                    text: ['', ''],
                                    showLabel: true,
                                    seriesIndex: [0],
                                    min: 0,
                                    max: 7,
                                    inRange: {
                                        color: ['#edfbfb', '#b7d6f3', '#40a9ed', '#3598c1', '#215096', ]
                                    },
                                    textStyle: {
                                        color: '#000'
                                    },
                                    bottom: 30,
                                    left: 'left',
                                },
                                grid: {
                                    right: 10,
                                    top: 80,
                                    bottom: 30,
                                    width: '20%'
                                },
                                xAxis: {
                                    type: 'value',
                                    scale: true,
                                    position: 'top',
                                    splitNumber: 1,
                                    boundaryGap: false,
                                    splitLine: {
                                        show: false
                                    },
                                    axisLine: {
                                        show: false
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        margin: 2,
                                        textStyle: {
                                            color: '#aaa'
                                        }
                                    }
                                },
                                yAxis: {
                                    type: 'category',
                                    nameGap: 16,
                                    axisLine: {
                                        show: false,
                                        lineStyle: {
                                            color: '#ddd'
                                        }
                                    },
                                    axisTick: {
                                        show: false,
                                        lineStyle: {
                                            color: '#ddd'
                                        }
                                    },
                                    axisLabel: {
                                        interval: 0,
                                        textStyle: {
                                            color: '#999'
                                        }
                                    },
                                    data: yData
                                },
                                geo: {
                                    roam: true,
                                    map: 'china',
                                    left: 'left',
                                    right:'300',
                                    layoutSize: '80%',
                                    label: {
                                        emphasis: {
                                            show: false
                                        }
                                    },
                                    itemStyle: {
                                        emphasis: {
                                            areaColor: '#fff464'
                                        }
                                    },
                                    regions: [{
                                        name: '南海诸岛',
                                        value: 0,
                                        itemStyle: {
                                            normal: {
                                                opacity: 0,
                                                label: {
                                                    show: false
                                                }
                                            }
                                        }
                                    }],
                                },
                                series: [{
                                    name: 'mapSer',
                                    type: 'map',
                                    roam: false,
                                    geoIndex: 0,
                                    label: {
                                        show: false,
                                    },
                                    data: data
                                }, {
                                    name: 'barSer',
                                    type: 'bar',
                                    roam: false,
                                    visualMap: false,
                                    zlevel: 2,
                                    barMaxWidth: 20,
                                    itemStyle: {
                                        normal: {
                                            color: '#40a9ed'
                                        },
                                        emphasis: {
                                            color: "#3596c0"
                                        }
                                    },
                                    label: {
                                        normal: {
                                            show: false,
                                            position: 'right',
                                            offset: [0, 10]
                                        },
                                        emphasis: {
                                            show: true,
                                            position: 'right',
                                            offset: [10, 0]
                                        }
                                    },
                                    data: data
                                }]
                            };

                            myChart.setOption(option);
                            // myChart1.showLoading();
                        }
                    },
                    error : function(errorMsg) { //没做出错处理
                        //请求失败时执行该函数
                        alert("图表请求数据失败!");
                        myChart2.hideLoading();
                    }
                })
ydata部分为右边栏的部分,在这里用了
yData.push(data[i].name);
将传过来的省份名字传到ydata项。


提示:

1、在echarts网站上可以实时改代码,可以自己修改代码中的一些参数(颜色、形状、大小等等)来达到自己想要的效果。

2、在使用echarts需要导入它的js到项目中比较常用的例如:

<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>

具体见官方文档:点击打开链接

3、在js中创建实例时(echarts.init)一定要避免容器id重复,不然重复的话图就不会出来。


注:(之后还会补充其他类型echart的使用方法,其实最好学习的方法还是看官方文档,本文也是基于官方文档给出自己的具体运用)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值