文档章节

常用echart 套路

墨鱼拉面
 墨鱼拉面
发布于 2016/11/01 08:31
字数 213
阅读 32
收藏 0

载入地图

function init (mapName){
            $("#areaTip").html(mapName||"全国");
            mapchart = echarts.init(document.getElementById('map'));
            barchart = echarts.init(document.getElementById('effect'));
            barchart1 = echarts.init(document.getElementById('count'));
            barchart2 = echarts.init(document.getElementById('bar'));
/*            barchart3 = echarts.init(document.getElementById('bar1'));*/
            piechart = echarts.init(document.getElementById('pie'));
            $.ajax({
                url: 'geoJson/'+mapName+'.json',
                type: "get",
                dataType: "json",
                success: function (chinaJson) {
                    echarts.registerMap(mapName, chinaJson);   
                    getData(mapName);
                    //loadDault(mapName);
                },statusCode: {404: function() {init ('全国');}}
            });
            mapchart.on('click', function (param){
                var name=param.name;
                if(param.componentType=='geo'){
                    //在中国地图上要去掉这几个地方的点击事件 直辖市 台湾 
                    if(!name.match(/^北京|^天津|^重庆|^上海|^在线|^离线|^台湾/)&&name!=""){
                        $("#areaTip").html(name||"全国");
                        $.ajax({
                            url: 'geoJson/'+name+'.json',
                            type: "get",
                            dataType: "json",
                            success: function (chinaJson) {
                                echarts.registerMap(name, chinaJson);   
                                getData(name);
                                //loadDault(name);
                            },
                          statusCode: {404: function() {init ('全国');}}
                        });
                    }
                }else{
                    getData1(name);
                }
            }); 

请求数据并塞进地图

            $.ajax({
                url: url,
                type: "post",
                success: function (data) {
                    makebarData(data);
                }
            });

    function makebarData(data,name){
            bardata= new Array();

            var data=eval(data);
            if(data!=null){
                $.each(data, function(index, row){
                    bardata[0].push(row.clerkNum);

                });
            }
            setBarOption(bardata,name);
        }
        
        function setBarOption(bardata,name){
            $("#effectTopLeft").html(name);
            barOption.series[0].data = bardata[0];
            barOption.xAxis.data = bardata[3];
            barchart.setOption(barOption, true);  
        }

© 著作权归作者所有

上一篇: echarts拓展
下一篇: 页面适配
墨鱼拉面
粉丝 0
博文 17
码字总数 1757
作品 0
深圳
程序员
私信 提问
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
2018/03/20
85
0
Echart怎么和mysql连接,进行数据展示,使用php+mysql +Echart

最近在学习Echart,怎么将Echart和Mysql连接,不把数据写死在Echart中,显示在网页上?

图图0317
2015/04/23
789
0
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
2018/03/21
293
2
给一个空的echart上传数据会报错

配置好一个echart,然后给它上传数据,第一次上传成功但不会刷新echart(不会显示数据),报错行chart.setOption getChartOption(), true(TypeError: undefined is not a function),刷新界...

FloraLi
2015/05/14
319
1
如何让单文件引入后的图表能够在浏览器调整窗口大小时图表也刷新宽度?

@Kener-林峰 你好,想跟你请教个问题: 我根据echart提供的demo,在我的工程中加入了echart(echarts-all.js),但是如何让图表的宽度自动那? echart提供的例子都支持,可是单文件引入后就不...

宋万龙
2014/12/12
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
39分钟前
3
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
43分钟前
3
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0
JAVA 利用时间戳来判断TOKEN是否过期

import java.time.Instant;import java.time.LocalDateTime;import java.time.ZoneId;import java.time.ZoneOffset;import java.time.format.DateTimeFormatter;/** * @descri......

huangkejie
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部