zoukankan      html  css  js  c++  java
  • echarts 点亮中国插件研究

    echarts 真的是个神奇的东西,最近做了一个需要点亮中国的移动端项目,前期就怎样点亮中国做了调研,发现微博当初炫酷的点亮效果就是用echarts做的,于是研究了一下。

    一连研究了一堆demo,不管从官网还是GitHub上面,大多demo的数据都是自己的格式,于是乎根据API自己研究了一下,把demo和最终结果整理了一下。

    网盘:https://pan.baidu.com/s/15ndzg5xjm0yqNL-6pi6SsQ 密码:idub

    demo效果:

    项目效果:

    看上去效果不同是由于底色和数据量不同造成的。

    一闪一闪的效果是由css3的循环显示隐藏制作 ,2个canvas,下面那个为地图背景,上面的是城市的点。

    emmm,具体API我就不分析了,参考echarts官网:http://echarts.baidu.com/  

    还有就是data数据里有一串代码:

    {
                        name: '',
                        //                type: 'effectScatter',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        showEffectOn: 'render',
                        rippleEffect: {
                            period: "5",
                            scale: "7",
                            brushType: 'stroke',
                            //brushType: 'fill',
                        },
                        data: [{
                            "value": ["123.50", "26.03", "1"]
                        }, {
                            "value": ["123.0", "25.93", "1"]
                        }, {
                            "value": ["122.8", "25.73", "1"]
                        }, {
                            "value": ["121.4", "22.33", "1"]
                        }, {
                            "value": ["119.55", "23.28", "1"]
                        }],
                        symbolSize: 2,
                        itemStyle: {
                            normal: {
                                color: '#3a9cbd' // 数据点颜色
                            }
                        }
                    }

    这是客户要求加的南海的几个岛屿,echarts的china文件里没带,我就自己加上了。上面的gif图是项目做一半的时候录的 那时候还没有加上,请参考最终demo。

  • 相关阅读:
    [bzoj1280]卖猪
    [51nod1237]最大公约数之和V3
    [cf741C]Arpa’s overnight party and Mehrdad’s silent entering
    [bzoj1576]安全路径
    [bzoj1143]祭祀
    db_writer_processes默认大小
    oracle审计功能启动关闭
    db_writer_processes默认大小
    手机发博客
    第27课 .net程序破解
  • 原文地址:https://www.cnblogs.com/ovocake/p/10027009.html
Copyright © 2011-2022 走看看