zoukankan      html  css  js  c++  java
  • 模拟迁途.html

    效果:


    代码:

    <!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>模拟迁途</title>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="height:650px"></div>
        <!-- ECharts单文件引入 -->
        <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
        <script type="text/javascript">
        var placeList = [
        {name:'海门', geoCoord:[121.15, 31.89]},
        {name:'鄂尔多斯', geoCoord:[109.781327, 39.608266]},
       
        {name:'大庆', geoCoord:[125.03, 46.58]}
    ]
            // 路径配置
            require.config({
                paths: {
                    echarts: 'http://echarts.baidu.com/build/dist'
                }
            });
            
            // 使用
            require(
                [
                    'echarts',
                    'echarts/chart/bar' ,// 使用柱状图就加载bar模块,按需加载
                    'echarts/chart/map',
                    'echarts/chart/radar'
                ],
                function (ec) {
                    // 基于准备好的dom,初始化echarts图表
                    var myChart = ec.init(document.getElementById('main')); 
                    
                    var option = {
        backgroundColor: '#1b1b1b',
        color: ['gold','aqua','lime'],
        title : {
            text: '模拟迁徙',
            subtext:'数据纯属虚构',
            x:'center',
            textStyle : {
                color: '#fff'
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: '{b}'
        },
        legend: {
            orient: 'vertical',
            x:'left',
          //  data:['北京', '上海', '广州'],
                data:[],
            selectedMode: 'single',
            selected:{
                '上海' : false,
                '广州' : false
            },
            textStyle : {
                color: '#fff'
            }
        },
        toolbox: {
            show : true,
            orient : 'vertical',
            x: 'right',
            y: 'center',
            feature : {
                mark : {show: false},
                dataView : {show: false, readOnly: false},
                restore : {show: false},
                saveAsImage : {show: false}
            }
        },
        dataRange: {
            show:false,
            min : 0,
            max : 100,
            calculable : true,
            color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
            textStyle:{
                color:'#fff'
            }
        },
        animationDurationUpdate: 2000, // for update animation, like legend selected.
        series : [
            {
                name: 'china',
                type: 'map',
                roam: true,
                hoverable: false,
                mapType: 'china',
                itemStyle:{
                    normal:{
                        borderColor:'rgba(100,149,237,1)',
                        borderWidth:0.5,
                        areaStyle:{
                           color: '#1b1b1b'//地图本身的颜色
                          //color:'red'
                        }
                    }
                },
                data:[],
                geoCoord: {
                        '上海': [121.4648,31.2891],
                        '广州': [113.5107,23.2196],
                        '深圳': [114.5435,22.5439],
                        '成都': [103.9526,30.7617],
                        '西安': [109.1162,34.2004],
                        '郑州': [113.4668,34.6234],
                        '哈尔滨': [127.9688,45.368],
                        '拉萨': [91.1865,30.1465],
                        '桂林': [110.17,25.17],
                        '四川': [104.04,30.40],
                        '北京': [116.4551,40.2539]
                },
                markLine : {
                    smooth:true,
                    effect : {
                        show: true,
                        scaleSize: 1,
                        period: 30,
                        color: '#fff',//从广州到北京的动点颜色

                        shadowBlur: 10
                    },
                    itemStyle : {
                        normal: {
                            borderWidth:1,
                            label: {
                                show: false
                            },
                            lineStyle: {

                                type: 'solid',
                                shadowBlur: 10
                            }
                        }
                    },
                    data : [
                    //四川、西安、广州、郑州、哈尔滨、拉萨、桂林

                    //smoothness:平滑程度,value:颜色

                        // [{name:'北京', smoothness:0.2}, {name:'广州',value:95}],
                        // [{name:'北京', smoothness:0.3}, {name:'广州',value:90}],
                        // [{name:'北京', smoothness:0.4}, {name:'广州',value:80}],
                        // [{name:'北京', smoothness:0.5}, {name:'广州',value:70}],
                        // [{name:'北京', smoothness:0.6}, {name:'广州',value:60}],


                        // [{name:'广州', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'广州', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'广州', smoothness:0.4}, {name:'北京',value:30}],
                        // [{name:'广州', smoothness:0.5}, {name:'北京',value:20}],
                        [{name:'广州', smoothness:0.6}, {name:'北京',value:120}],

                        // [{name:'桂林', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'桂林', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'桂林', smoothness:0.4}, {name:'北京',value:30}],
                        [{name:'桂林', smoothness:0.5}, {name:'北京',value:15}],
                        [{name:'桂林', smoothness:0.6}, {name:'北京',value:30}],

                        //   [{name:'拉萨', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'拉萨', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'拉萨', smoothness:0.4}, {name:'北京',value:30}],
                        // [{name:'拉萨', smoothness:0.5}, {name:'北京',value:20}],
                        [{name:'拉萨', smoothness:0.6}, {name:'北京',value:60}],

                        //  [{name:'哈尔滨', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'哈尔滨', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'哈尔滨', smoothness:0.4}, {name:'北京',value:30}],
                        [{name:'哈尔滨', smoothness:0.5}, {name:'北京',value:50}],
                        [{name:'哈尔滨', smoothness:0.6}, {name:'北京',value:60}],

                         // [{name:'郑州', smoothness:0.2}, {name:'北京',value:50}],
                        [{name:'郑州', smoothness:0.3}, {name:'北京',value:80}],
                        [{name:'郑州', smoothness:0.4}, {name:'北京',value:85}],
                        [{name:'郑州', smoothness:0.5}, {name:'北京',value:90}],
                        [{name:'郑州', smoothness:0.6}, {name:'北京',value:95}],

                        // [{name:'西安', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'西安', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'西安', smoothness:0.4}, {name:'北京',value:30}],
                        [{name:'西安', smoothness:0.5}, {name:'北京',value:5}],
                        [{name:'西安', smoothness:0.6}, {name:'北京',value:10}],

                        // [{name:'四川', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'四川', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'四川', smoothness:0.4}, {name:'北京',value:30}],
                        // [{name:'四川', smoothness:0.5}, {name:'北京',value:20}],
                        [{name:'四川', smoothness:0.6}, {name:'北京',value:30}],

                        //  [{name:'成都', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'成都', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'成都', smoothness:0.4}, {name:'北京',value:30}],
                        [{name:'成都', smoothness:0.5}, {name:'北京',value:20}],
                        [{name:'成都', smoothness:0.6}, {name:'北京',value:10}],

                        // [{name:'深圳', smoothness:0.2}, {name:'北京',value:50}],
                        // [{name:'深圳', smoothness:0.3}, {name:'北京',value:40}],
                        // [{name:'深圳', smoothness:0.4}, {name:'北京',value:30}],
                        [{name:'深圳', smoothness:0.5}, {name:'北京',value:85}],
                        [{name:'深圳', smoothness:0.6}, {name:'北京',value:105}],


                         [{name:'上海', smoothness:0.05}, {name:'北京',value:90}],
                        [{name:'上海', smoothness:0.1}, {name:'北京',value:91}],
                        [{name:'上海', smoothness:0.2}, {name:'北京',value:92}],
                        [{name:'上海', smoothness:0.3}, {name:'北京',value:93}],
                        [{name:'上海', smoothness:0.4}, {name:'北京',value:94}],
                        [{name:'上海', smoothness:0.5}, {name:'北京',value:95}],
                        [{name:'上海', smoothness:0.6}, {name:'北京',value:96}]
                    ]
                }
            }
          
        ]
    };
                        
            
                    // 为echarts对象加载数据 
                    myChart.setOption(option); 
                }
            );         
            
      
        </script>
    </body>




  • 相关阅读:
    struts2 文件上传 中的空指针问题
    大事难事,看担当;人生最大的自由不是想干啥就干啥,而是想不干啥就不干啥!
    一条灰色的线<HR align=center width=700 color=#cccccc SIZE=1>
    jsp九大内置对象及其作用域
    2012年Java认证考试报考指南汇总
    Elance是全球最大的外包网站。
    •《深入理解Java虚拟机:JVM高级特性与最佳实践》
    新浪微博信息
    输入框中的添加回车事件
    font标签的一个小提示 不要加分号
  • 原文地址:https://www.cnblogs.com/xiaoxiao5ya/p/aedd112b86313d85ff8944610c7aaa27.html
Copyright © 2011-2022 走看看