现在位置首页 / 前端开发 /正文

百度echarts使用:饼图柱状图demo

作者: IT小兵 | 2016年10月27日| 热度:℃ | 评论: |参与:

前一段时间公司做了舆情相关的软件,舆情用到了大量的图表,相当大的数据交互。当时没有整理下来,昨天有一次用到这些东西,所以准备记录下来,方便以后使用。

百度echart算是百度针对数据展示做的一个图表插件吧,一般我们使用都不是问题,主要还是对于对动态数据的解析。我这里使用饼状图,和柱状图为例:

首先,我们需要定义一个绘图的容器:(class是我自己定义的,这个容器用一个div就可以)

<div class="fm_box pd-10 border-grey" id="shanxing" style="height: 500px;"></div>
  <div class="fm_box pd-10 border-grey" id="zhuzhuang" style="height: 500px;"></div>

然后需要引入我们的echart.min.js.

准备工作做好后,下面就是我们初始化图表的时候了。

首先我们需要定义两个mychart分别作为我们的扇形图和柱状图

var myChart = echarts.init(document.getElementById('shanxing'));
var myChart2 = echarts.init(document.getElementById('zhuzhuang'));

然后分别定义option:就是数据格式的写入:(这里因为有两个图,数据分别用option ,option2来表示)

option = {
        title : {
            text: '某站点用户访问来源',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
//            '直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '55%'],
                data:[
//                    {value:335, name:'直接访问'},
//                    {value:310, name:'邮件营销'},
//                    {value:234, name:'联盟广告'},
//                    {value:135, name:'视频广告'},
//                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    option2 = {
        title : {
            text: '某地区蒸发量和降水量',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['项目数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'项目',
                type:'bar',
                data:[],
            }
        ]
    };

大家可以看到,我把series里面的data注释掉,或者删除了,因为图表我们一般用来展示动态数据,监控数据变化,固定的图表就没有我写这个博文的意义了。

好的接下来,我们模拟一个json文件。用作我们的数据。很简单的数据格式。

{"result":1,"msg":null,"object":[["网站","微博","微信","论坛","新闻","政务","报刊"],[10,20,180,995,450,250,360]],"totalPage":0,"sum":0}

这个json是一个普通的数据。我们比方说,在后台拿到的就是这么一串json、接下来就是如何解析,并且放入图表绘制的方法中。

 

我们需要先做请求。

$.ajax({
        type: "get",
        async: true, //同步执行
        url: "tets.json",
        dataType: "json", //返回数据形式为json
        success: function(data){
            console.log(data.object[0].length);
            for(var i= 0,len=data.object[0].length;i<len;i++){
                var json={};
                var data2=data.object[0];
                json.name=data.object[0][i];
                json.value=data.object[1][i];
                option.series[0].data[i]=json;
                option.legend.data=data.object[0];
                option2.xAxis[0].data=data.object[0];
                option2.series[0].data=data.object[1];
            }
            myChart.clear();
            myChart.hideLoading();
            myChart.setOption(option);
            myChart2.clear();
            myChart2.hideLoading();
            myChart2.setOption(option2);// 使用刚指定的配置项和数据显示图表。
        },
        error: function(errorMsg) {
            alert("图表请求数据失败啦!");
        }
    });

其中的url是我们请求数据的接口,当我们请求到数据之后,对数据进行遍历。大家可能看到我在其中定义了一个对象,因为我们根据请求到的数据来看,并不太符合我们的要求,所以我们需要进行数据的转换。

详细的不再多说,自己参考。

我们来说说myChart.clear();myChart.hideLoading();myChart.setOption(option);

第一个是在每一次绘制图标前,做一次初始化,清空画布,目的是为了防止数据没有清理干净,会存在缓存或者什么。这样会影响绘图效果。

第二个是图片绘制的时候一个类似加载的动画效果。还有个myChart.showLoading();

第三个是绘制!相当于调用所有的配置,开始绘制。上边的容器,数据的写入,都是为了准备,而myChart.setOption();才是真正的绘制,使用刚指定的配置项和数据显示图表。

 

 

下边是除了容器,配置的完整代码:

//echart
    var myChart = echarts.init(document.getElementById('qinggan'));
    var myChart2 = echarts.init(document.getElementById('bar'));
    option = {
        title : {
            text: '某站点用户访问来源',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:[]
//            '直接访问','邮件营销','联盟广告','视频广告','搜索引擎'
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '50%',
                            funnelAlign: 'left',
                            max: 1548
                        }
                    }
                },
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '55%',
                center: ['50%', '55%'],
                data:[
//                    {value:335, name:'直接访问'},
//                    {value:310, name:'邮件营销'},
//                    {value:234, name:'联盟广告'},
//                    {value:135, name:'视频广告'},
//                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart.hideLoading();
    myChart.setOption(option);
    option2 = {
        title : {
            text: '某地区蒸发量和降水量',
            subtext: '纯属虚构'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['项目数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'项目',
                type:'bar',
                data:[],
            }
        ]
    };
    //情感分析图
    $.ajax({
        type: "get",
        async: true, //同步执行
        url: "tets.json",
        dataType: "json", //返回数据形式为json
        success: function(data){
            console.log(data.object[0].length);
            for(var i= 0,len=data.object[0].length;i<len;i++){
                var json={};
                var data2=data.object[0];
                json.name=data.object[0][i];
                json.value=data.object[1][i];
                option.series[0].data[i]=json;
                option.legend.data=data.object[0];
                option2.xAxis[0].data=data.object[0];
                option2.series[0].data=data.object[1];
            }
            myChart.clear();
            myChart.hideLoading();
            myChart.setOption(option);
            myChart2.clear();
            myChart2.hideLoading();
            myChart2.setOption(option2);// 使用刚指定的配置项和数据显示图表。
        },
        error: function(errorMsg) {
            alert("图表请求数据失败啦!");
        }
    });


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询