分享几个用Echarts做的图表

原创 2016年08月29日 15:42:40

1.双饼图

/**
 * @author huangteng
 * @describe 实现良有教育页面Echarts图
 * @type {string}
 */

var IP = "http://"+window.location.host+"/xz/xz/tongji/huibao/yanshiAction!";
//获取页面传过来的区县
var area="";
/*样式*/
var labelTop = {
    normal : {
        color:'rgba(2,132,168,0.8)',
        borderWidth: 2,
        borderColor: '#01b6ed',
        label : {
            show : true,
            formatter:'总人数',
            position : 'center',
            textStyle: {
                baseline :'bottom',
                color:'#01b6ed',
                fontSize:6
            }
        },
        labelLine : {
            show : false
        }
    }
};
/*-------------------------------初始化---------------------------------------*/
$(window).load(function(){
    /*初始化数据*/
    initcjr_ht();//ajax请求数据的方法
});
function initcjr_ht(){
    /*学有良教模块*/
    $.ajax({
        url:IP+'getlyxzData.do',
        dataType:'json',
        type:'POST',
        data:'',
        success:function(data){
            var obj = eval(data);
            if(obj==null || obj==""){
                alert("暂无数据");
                return;
            }
            education(area,'bar-content',obj);
            primaryandhigh(area,'pic_two_mid',obj);
        }
    });
}
/*-------------------------------Echarts图方法----------------------------------------*/

/**
 * 柱状图
 */
function education(area,oneline,obj){
    //获取全市数据
    var data = obj.data;
    var cd_data=data[0];//成都市数据

    //柱图部分
    var myChart= echarts.init(document.getElementById(oneline));
    option = {
        title : {
            text: '单位(万人)',
            textStyle:{
                color:'#fff',
                fontSize:10,
                fontWeight:'normal'
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
            }
        },
        grid:{
            x:80,
            y:25,
            x2:25,
            y2:25,
            borderWidth:'0',
            backgroundColor:'rgba(255,255,255,0)',
        },
        legend: {
            data:['户籍适龄人数', '本地入学人数'],
            textStyle:{
                color:'#fff'
            },
            x:'right',
            y:'top',
            itemWidth:12,
            itemHeight:12,

        },
        calculable : false,
        xAxis : [
            {
                type : 'value',
                splitLine:false,
                splitArea:false,
                splitNumber:5,
                axisLine:{
                    lineStyle:{
                        width:1,
                        color:'#0487b3',
                    },
                },
                axisLabel:{
                    textStyle:{
                        color:'#0487b3'
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'category',
                data : ['12-15周岁', '6-12周岁'],
                axisTick:false,
                splitLine:false,
                splitArea:false,
                axisLabel:{
                    textStyle:{
                        color:'#fff'
                    }
                }
            },
            {
                type : 'category',
                data : ['12-15周岁', '6-12周岁'],
                show:false,
                axisTick:false,
                splitLine:false,
                splitArea:false,
                axisLine:{
                    lineStyle:{
                        width:1,
                        color:'#0487b3',
                    },

                },
                axisLabel:{
                    textStyle:{
                        color:'#fff'
                    }
                }

            }

        ],
        series : [
            {
                name:'户籍适龄人数',
                type:'bar',
                barWidth:15,
                itemStyle : {
                    normal:{
                        color:'#195077',
                        barBorderRadius:0,
                    }
                },
                data:[cd_data.hjrk014,cd_data.hjrk013]
            },
            {
                name:'本地入学人数',
                type:'bar',
                yAxisIndex:1,
                barWidth:15,
                itemStyle : {
                    normal: {
                        color:'#01b6ed',
                        barBorderRadius:0,
                    }
                },
                data:[cd_data.rxqk009,cd_data.rxqk002]
            }


        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};

/**
 * 环形图
 */

function primaryandhigh(area,prmaryPie,obj){

    var myCharttPie= echarts.init(document.getElementById(prmaryPie));

    //获取全市数据
    var data = obj.data;
    var cd_data=data[0];//成都市数据
    //数据处理
    var wlrks = parseInt((cd_data.rxqk003)*10000);
    document.getElementById("wlrksl1").innerHTML=wlrks;

    var wlrks2 =  parseInt((cd_data.rxqk011)*10000);
    document.getElementById("wlrksl2").innerHTML=wlrks2;


    //小学初中总人数及比例
    var total_xiaoxue = (cd_data.xsrxrs).toFixed(1);
    var total_chuzhong = (cd_data.czrxrs).toFixed(1);

    var bilie1 = ((cd_data.xsbili)*100).toFixed(2)+"%";
    document.getElementById("bfb1").innerHTML=bilie1;

    var bilie2 = ((cd_data.czbili)*100).toFixed(2)+"%";
    document.getElementById("bfb2").innerHTML=bilie2;


    //饼图
    option_pie={
        legend: {
            orient : 'vertical',
            x : document.getElementById("pic_two_mid").offsetWidth-82,
            y : 'center',
            itemWidth:10,
            itemHeight:10,
            textStyle : {
                    color : 'white',
                    fontSize:12
                },
            data:[
                {
                    name:'本地户籍',
                    icon:'stack'
                },{
                    name:'外来人口',
                    icon:'stack'
                }
            ]
        },
        color:['rgba(2,132,168,0.8)','rgba(155,143,41,0.8)'],
        series : [
            {
                type : 'pie',
                radius : [30,40],//半径
                itemStyle:{
                    normal : {
                        label : {
                            show: false,
                        },
                        labelLine : {
                            show : false
                        }
                    },
                },
                center : ['20%', '50%'],
                data : [
                    {name:'本地户籍',value:[cd_data.rxqk002],itemStyle:{
                        normal : {
                        // color: '#ccc',
                            color:'rgba(155,143,41,0.8)',
                            borderWidth: 2,
                            borderColor: '#e7c313',
                        label : {
                            show : true,
                            formatter:total_xiaoxue +'万',
                            position : 'center',
                            textStyle: {
                                baseline :'top',
                                color:'#01b6ed',
                                fontSize:15
                            },
                        },
                        labelLine : {
                            show : false
                        }
                    }
                    }},
                    {name:'外来人口', value:[cd_data.rxqk003],itemStyle:labelTop}
                ]
            },
            {
                type : 'pie',
                radius : [30,40],//半径
                itemStyle:{
                    normal : {
                        label : {
                            show: false,
                        },
                        labelLine : {
                            show : false
                        }
                    },
                },
                center : [document.getElementById("pic_two_mid").offsetWidth/2, '50%'],
                data : [
                    {name:'本地户籍',value:[cd_data.rxqk009],itemStyle:{
                        normal : {
                        // color: '#ccc',
                            color:'rgba(155,143,41,0.8)',
                            borderWidth: 2,
                            borderColor: '#e7c313',
                        label : {
                            show : true,
                            formatter:total_chuzhong +'万',
                            position : 'center',
                            textStyle: {
                                baseline :'top',
                                color:'#01b6ed',
                                fontSize:15
                            }
                        },
                        labelLine : {
                            show : false
                        }
                    }
                    }},
                    {name:'外来人口', value:[cd_data.rxqk011],itemStyle:labelTop
                    }
                ]
            }
        ]
    };

    myCharttPie.setOption(option_pie);
    window.addEventListener("resize", function () {
        myCharttPie.resize();
    });
};

版权声明:本文为博主原创文章,未经博主允许不得转载。

Echarts图表

1:步骤 引入ECharts,你需要如下4步: 为ECharts准备一个具备大小(宽高)的Dom 通过script标签引入echarts主文件 为模块加载器配置echarts的路径,从当前页面链接...
  • u013628152
  • u013628152
  • 2015年01月20日 12:46
  • 2119

eCharts添加自定义geojson数据实现地图展示

当初看到echarts的地图的时候感觉可以做点什么,但是一直米有实施,最近刚好用到了,就研究了研究,在echarts中添加了自定义的geojson数据,实现数据的地图展示。...
  • GISShiXiSheng
  • GISShiXiSheng
  • 2016年12月05日 07:36
  • 13233

echarts 几种常见的图表的实现及源码

1、折线图 ECharts // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init...
  • CCUTwangning
  • CCUTwangning
  • 2017年02月15日 11:14
  • 2121

echarts 图表 展示 练习二 (ajax 后台加载数据)

上次写了基础的图表展示,这次简单介绍一下ajax后台取的数据并展示的练习,一上次为基础。     jsp页面配置和之前一样就有一点不同,讲解一下。 第一步:(不变) src="${path}/...
  • happyvx
  • happyvx
  • 2015年08月06日 16:14
  • 1880

百度Echarts+JQuery 一页多图动态加载实现(可拆分)

大概的发一下一页多图的加载方法,可以拆分,可以合并。动态取数据显示。...
  • kongwei521
  • kongwei521
  • 2014年09月09日 09:50
  • 5796

echarts学习总结(二):一个页面存在多个echarts图形,图形自适应窗口大小

如上图所示一个页面有两个echarts图形:散点图和折线图,如果还写为                   myChart.setOption(option);               ...
  • peichuangaoling
  • peichuangaoling
  • 2015年12月21日 16:39
  • 7843

E-charts之一个与页面多个图表并且自适应的方案

1.开始题主是使用了,flex布局发现是和echarts是不兼容的.会吧其他的几个表格都挤出去 2.后来调整了一下布局,并使用了官方推荐的.window.resize方法实现图表实时更新大小 3....
  • zhalcie2011
  • zhalcie2011
  • 2017年03月21日 12:17
  • 1820

使用Echarts和Ajax动态加载数据进行大数据可视化

在前面的帖子【Java/Web调用Hadoop进行MapReduce示例】中,我们实现了JavaWeb调用Hadoop统计用户上传的文本文件中的单词出现的次数。 效果如下: 现在我们使用Echarts...
  • csj941227
  • csj941227
  • 2017年08月27日 18:56
  • 609

完整版ajax+百度echarts实现统计图表demo并随着窗口大小改变而自适应

1.前言 百度Echarts会常用到我们的项目中做统计,api很详细,demo也非常之多,我们常用的是应有尽有了,做一些小项目的时候,百度echarts的demo已足够用了。今天呢。主要是跟小白讲一...
  • sxs161028
  • sxs161028
  • 2017年07月20日 10:25
  • 1060

echarts精简版demo(一页面显示多图表)

  • 2015年07月23日 18:18
  • 322KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:分享几个用Echarts做的图表
举报原因:
原因补充:

(最多只允许输入30个字)