OpenSource
/
dc-sdk
mirror of https://github.com/dvt3d/dc-sdk
Watch 4
Star 0
Fork 0
Code Issues 0 Releases 92 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
508 Commits
6 Branches
Tree: e7edec6236
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e7edec6236'
${ noResults }
dc-sdk/examples/datav/e_pm2.5_2.html

e_pm2.5_2.html 16KB
Raw Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3. 

  4. <head>

  5.   <meta charset="utf-8">

  6.   <meta name="viewport" content="width=device-width,initial-scale=1.0">

  7.   <title>dc-example</title>

  8.   <script src='https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js'></script>

  9.   <script src='/libs/dc-sdk/dc.base.min.js'></script>

  10.   <script src='/libs/dc-sdk/dc.core.min.js'></script>

  11.   <script src='/libs/dc-sdk/dc.chart.min.js'></script>

  12.   <script>DC.baseUrl='../libs/dc-sdk/resources/'</script>

  13.   <link href='/libs/dc-sdk/dc.core.min.css' type='text/css' rel='stylesheet'>

  14.   <link href='../index.css' type='text/css' rel='stylesheet'>

  15.   <style>

  16.     *{

  17.       margin: 0;

  18.       padding: 0;

  19.     }

  20.     html,body,#viewer-container{

  21.       width: 100%;

  22.       height: 100%;

  23.       overflow: hidden;

  24.     }

  25.   </style>

  26. </head>

  27. 

  28. <body>

  29. 

  30. <div id="viewer-container"></div>

  31. <script>

  32.   let viewer = undefined

  33.   function initViewer() {

  34.     viewer = new DC.Viewer('viewer-container')

  35.     let baselayer = DC.ImageryLayerFactory.createAmapImageryLayer()

  36.     baselayer.defaultBrightness =  0.1

  37.     viewer.addBaseLayer(baselayer)

  38.     viewer.flyToPosition(

  39.       new DC.Position(108.198353, 20.758452, 10733735.96, 0, -90, 0),

  40.       () => {

  41.         let chartLayer = new DC.ChartLayer('layer').addTo(viewer)

  42.         chartLayer.setOption(getOption())

  43.       }

  44.     )

  45.   }

  46. 

  47.   function getOption(e) {

  48.     var chartData = [

  49.       { name: '海门', value: 9 },

  50.       { name: '鄂尔多斯', value: 12 },

  51.       { name: '招远', value: 12 },

  52.       { name: '舟山', value: 12 },

  53.       { name: '齐齐哈尔', value: 14 },

  54.       { name: '盐城', value: 15 },

  55.       { name: '赤峰', value: 16 },

  56.       { name: '青岛', value: 18 },

  57.       { name: '乳山', value: 18 },

  58.       { name: '金昌', value: 19 },

  59.       { name: '泉州', value: 21 },

  60.       { name: '莱西', value: 21 },

  61.       { name: '日照', value: 21 },

  62.       { name: '胶南', value: 22 },

  63.       { name: '南通', value: 23 },

  64.       { name: '拉萨', value: 24 },

  65.       { name: '云浮', value: 24 },

  66.       { name: '梅州', value: 25 },

  67.       { name: '文登', value: 25 },

  68.       { name: '上海', value: 25 },

  69.       { name: '攀枝花', value: 25 },

  70.       { name: '威海', value: 25 },

  71.       { name: '承德', value: 25 },

  72.       { name: '厦门', value: 26 },

  73.       { name: '汕尾', value: 26 },

  74.       { name: '潮州', value: 26 },

  75.       { name: '丹东', value: 27 },

  76.       { name: '太仓', value: 27 },

  77.       { name: '曲靖', value: 27 },

  78.       { name: '烟台', value: 28 },

  79.       { name: '福州', value: 29 },

  80.       { name: '瓦房店', value: 30 },

  81.       { name: '即墨', value: 30 },

  82.       { name: '抚顺', value: 31 },

  83.       { name: '玉溪', value: 31 },

  84.       { name: '张家口', value: 31 },

  85.       { name: '阳泉', value: 31 },

  86.       { name: '莱州', value: 32 },

  87.       { name: '湖州', value: 32 },

  88.       { name: '汕头', value: 32 },

  89.       { name: '昆山', value: 33 },

  90.       { name: '宁波', value: 33 },

  91.       { name: '湛江', value: 33 },

  92.       { name: '揭阳', value: 34 },

  93.       { name: '荣成', value: 34 },

  94.       { name: '连云港', value: 35 },

  95.       { name: '葫芦岛', value: 35 },

  96.       { name: '常熟', value: 36 },

  97.       { name: '东莞', value: 36 },

  98.       { name: '河源', value: 36 },

  99.       { name: '淮安', value: 36 },

  100.       { name: '泰州', value: 36 },

  101.       { name: '南宁', value: 37 },

  102.       { name: '营口', value: 37 },

  103.       { name: '惠州', value: 37 },

  104.       { name: '江阴', value: 37 },

  105.       { name: '蓬莱', value: 37 },

  106.       { name: '韶关', value: 38 },

  107.       { name: '嘉峪关', value: 38 },

  108.       { name: '广州', value: 38 },

  109.       { name: '延安', value: 38 },

  110.       { name: '太原', value: 39 },

  111.       { name: '清远', value: 39 },

  112.       { name: '中山', value: 39 },

  113.       { name: '昆明', value: 39 },

  114.       { name: '寿光', value: 40 },

  115.       { name: '盘锦', value: 40 },

  116.       { name: '长治', value: 41 },

  117.       { name: '深圳', value: 41 },

  118.       { name: '珠海', value: 42 },

  119.       { name: '宿迁', value: 43 },

  120.       { name: '咸阳', value: 43 },

  121.       { name: '铜川', value: 44 },

  122.       { name: '平度', value: 44 },

  123.       { name: '佛山', value: 44 },

  124.       { name: '海口', value: 44 },

  125.       { name: '江门', value: 45 },

  126.       { name: '章丘', value: 45 },

  127.       { name: '肇庆', value: 46 },

  128.       { name: '大连', value: 47 },

  129.       { name: '临汾', value: 47 },

  130.       { name: '吴江', value: 47 },

  131.       { name: '石嘴山', value: 49 },

  132.       { name: '沈阳', value: 50 },

  133.       { name: '苏州', value: 50 },

  134.       { name: '茂名', value: 50 },

  135.       { name: '嘉兴', value: 51 },

  136.       { name: '长春', value: 51 },

  137.       { name: '胶州', value: 52 },

  138.       { name: '银川', value: 52 },

  139.       { name: '张家港', value: 52 },

  140.       { name: '三门峡', value: 53 },

  141.       { name: '锦州', value: 54 },

  142.       { name: '南昌', value: 54 },

  143.       { name: '柳州', value: 54 },

  144.       { name: '三亚', value: 54 },

  145.       { name: '自贡', value: 56 },

  146.       { name: '吉林', value: 56 },

  147.       { name: '阳江', value: 57 },

  148.       { name: '泸州', value: 57 },

  149.       { name: '西宁', value: 57 },

  150.       { name: '宜宾', value: 58 },

  151.       { name: '呼和浩特', value: 58 },

  152.       { name: '成都', value: 58 },

  153.       { name: '大同', value: 58 },

  154.       { name: '镇江', value: 59 },

  155.       { name: '桂林', value: 59 },

  156.       { name: '张家界', value: 59 },

  157.       { name: '宜兴', value: 59 },

  158.       { name: '北海', value: 60 },

  159.       { name: '西安', value: 61 },

  160.       { name: '金坛', value: 62 },

  161.       { name: '东营', value: 62 },

  162.       { name: '牡丹江', value: 63 },

  163.       { name: '遵义', value: 63 },

  164.       { name: '绍兴', value: 63 },

  165.       { name: '扬州', value: 64 },

  166.       { name: '常州', value: 64 },

  167.       { name: '潍坊', value: 65 },

  168.       { name: '重庆', value: 66 },

  169.       { name: '台州', value: 67 },

  170.       { name: '南京', value: 67 },

  171.       { name: '滨州', value: 70 },

  172.       { name: '贵阳', value: 71 },

  173.       { name: '无锡', value: 71 },

  174.       { name: '本溪', value: 71 },

  175.       { name: '克拉玛依', value: 72 },

  176.       { name: '渭南', value: 72 },

  177.       { name: '马鞍山', value: 72 },

  178.       { name: '宝鸡', value: 72 },

  179.       { name: '焦作', value: 75 },

  180.       { name: '句容', value: 75 },

  181.       { name: '北京', value: 79 },

  182.       { name: '徐州', value: 79 },

  183.       { name: '衡水', value: 80 },

  184.       { name: '包头', value: 80 },

  185.       { name: '绵阳', value: 80 },

  186.       { name: '乌鲁木齐', value: 84 },

  187.       { name: '枣庄', value: 84 },

  188.       { name: '杭州', value: 84 },

  189.       { name: '淄博', value: 85 },

  190.       { name: '鞍山', value: 86 },

  191.       { name: '溧阳', value: 86 },

  192.       { name: '库尔勒', value: 86 },

  193.       { name: '安阳', value: 90 },

  194.       { name: '开封', value: 90 },

  195.       { name: '济南', value: 92 },

  196.       { name: '德阳', value: 93 },

  197.       { name: '温州', value: 95 },

  198.       { name: '九江', value: 96 },

  199.       { name: '邯郸', value: 98 },

  200.       { name: '临安', value: 99 },

  201.       { name: '兰州', value: 99 },

  202.       { name: '沧州', value: 100 },

  203.       { name: '临沂', value: 103 },

  204.       { name: '南充', value: 104 },

  205.       { name: '天津', value: 105 },

  206.       { name: '富阳', value: 106 },

  207.       { name: '泰安', value: 112 },

  208.       { name: '诸暨', value: 112 },

  209.       { name: '郑州', value: 113 },

  210.       { name: '哈尔滨', value: 114 },

  211.       { name: '聊城', value: 116 },

  212.       { name: '芜湖', value: 117 },

  213.       { name: '唐山', value: 119 },

  214.       { name: '平顶山', value: 119 },

  215.       { name: '邢台', value: 119 },

  216.       { name: '德州', value: 120 },

  217.       { name: '济宁', value: 120 },

  218.       { name: '荆州', value: 127 },

  219.       { name: '宜昌', value: 130 },

  220.       { name: '义乌', value: 132 },

  221.       { name: '丽水', value: 133 },

  222.       { name: '洛阳', value: 134 },

  223.       { name: '秦皇岛', value: 136 },

  224.       { name: '株洲', value: 143 },

  225.       { name: '石家庄', value: 147 },

  226.       { name: '莱芜', value: 148 },

  227.       { name: '常德', value: 152 },

  228.       { name: '保定', value: 153 },

  229.       { name: '湘潭', value: 154 },

  230.       { name: '金华', value: 157 },

  231.       { name: '岳阳', value: 169 },

  232.       { name: '长沙', value: 175 },

  233.       { name: '衢州', value: 177 },

  234.       { name: '廊坊', value: 193 },

  235.       { name: '菏泽', value: 194 },

  236.       { name: '合肥', value: 229 },

  237.       { name: '武汉', value: 273 },

  238.       { name: '大庆', value: 279 }

  239.     ]

  240.     var geoCoordMap = {

  241.       海门: [121.15, 31.89],

  242.       鄂尔多斯: [109.781327, 39.608266],

  243.       招远: [120.38, 37.35],

  244.       舟山: [122.207216, 29.985295],

  245.       齐齐哈尔: [123.97, 47.33],

  246.       盐城: [120.13, 33.38],

  247.       赤峰: [118.87, 42.28],

  248.       青岛: [120.33, 36.07],

  249.       乳山: [121.52, 36.89],

  250.       金昌: [102.188043, 38.520089],

  251.       泉州: [118.58, 24.93],

  252.       莱西: [120.53, 36.86],

  253.       日照: [119.46, 35.42],

  254.       胶南: [119.97, 35.88],

  255.       南通: [121.05, 32.08],

  256.       拉萨: [91.11, 29.97],

  257.       云浮: [112.02, 22.93],

  258.       梅州: [116.1, 24.55],

  259.       文登: [122.05, 37.2],

  260.       上海: [121.48, 31.22],

  261.       攀枝花: [101.718637, 26.582347],

  262.       威海: [122.1, 37.5],

  263.       承德: [117.93, 40.97],

  264.       厦门: [118.1, 24.46],

  265.       汕尾: [115.375279, 22.786211],

  266.       潮州: [116.63, 23.68],

  267.       丹东: [124.37, 40.13],

  268.       太仓: [121.1, 31.45],

  269.       曲靖: [103.79, 25.51],

  270.       烟台: [121.39, 37.52],

  271.       福州: [119.3, 26.08],

  272.       瓦房店: [121.979603, 39.627114],

  273.       即墨: [120.45, 36.38],

  274.       抚顺: [123.97, 41.97],

  275.       玉溪: [102.52, 24.35],

  276.       张家口: [114.87, 40.82],

  277.       阳泉: [113.57, 37.85],

  278.       莱州: [119.942327, 37.177017],

  279.       湖州: [120.1, 30.86],

  280.       汕头: [116.69, 23.39],

  281.       昆山: [120.95, 31.39],

  282.       宁波: [121.56, 29.86],

  283.       湛江: [110.359377, 21.270708],

  284.       揭阳: [116.35, 23.55],

  285.       荣成: [122.41, 37.16],

  286.       连云港: [119.16, 34.59],

  287.       葫芦岛: [120.836932, 40.711052],

  288.       常熟: [120.74, 31.64],

  289.       东莞: [113.75, 23.04],

  290.       河源: [114.68, 23.73],

  291.       淮安: [119.15, 33.5],

  292.       泰州: [119.9, 32.49],

  293.       南宁: [108.33, 22.84],

  294.       营口: [122.18, 40.65],

  295.       惠州: [114.4, 23.09],

  296.       江阴: [120.26, 31.91],

  297.       蓬莱: [120.75, 37.8],

  298.       韶关: [113.62, 24.84],

  299.       嘉峪关: [98.289152, 39.77313],

  300.       广州: [113.23, 23.16],

  301.       延安: [109.47, 36.6],

  302.       太原: [112.53, 37.87],

  303.       清远: [113.01, 23.7],

  304.       中山: [113.38, 22.52],

  305.       昆明: [102.73, 25.04],

  306.       寿光: [118.73, 36.86],

  307.       盘锦: [122.070714, 41.119997],

  308.       长治: [113.08, 36.18],

  309.       深圳: [114.07, 22.62],

  310.       珠海: [113.52, 22.3],

  311.       宿迁: [118.3, 33.96],

  312.       咸阳: [108.72, 34.36],

  313.       铜川: [109.11, 35.09],

  314.       平度: [119.97, 36.77],

  315.       佛山: [113.11, 23.05],

  316.       海口: [110.35, 20.02],

  317.       江门: [113.06, 22.61],

  318.       章丘: [117.53, 36.72],

  319.       肇庆: [112.44, 23.05],

  320.       大连: [121.62, 38.92],

  321.       临汾: [111.5, 36.08],

  322.       吴江: [120.63, 31.16],

  323.       石嘴山: [106.39, 39.04],

  324.       沈阳: [123.38, 41.8],

  325.       苏州: [120.62, 31.32],

  326.       茂名: [110.88, 21.68],

  327.       嘉兴: [120.76, 30.77],

  328.       长春: [125.35, 43.88],

  329.       胶州: [120.03336, 36.264622],

  330.       银川: [106.27, 38.47],

  331.       张家港: [120.555821, 31.875428],

  332.       三门峡: [111.19, 34.76],

  333.       锦州: [121.15, 41.13],

  334.       南昌: [115.89, 28.68],

  335.       柳州: [109.4, 24.33],

  336.       三亚: [109.511909, 18.252847],

  337.       自贡: [104.778442, 29.33903],

  338.       吉林: [126.57, 43.87],

  339.       阳江: [111.95, 21.85],

  340.       泸州: [105.39, 28.91],

  341.       西宁: [101.74, 36.56],

  342.       宜宾: [104.56, 29.77],

  343.       呼和浩特: [111.65, 40.82],

  344.       成都: [104.06, 30.67],

  345.       大同: [113.3, 40.12],

  346.       镇江: [119.44, 32.2],

  347.       桂林: [110.28, 25.29],

  348.       张家界: [110.479191, 29.117096],

  349.       宜兴: [119.82, 31.36],

  350.       北海: [109.12, 21.49],

  351.       西安: [108.95, 34.27],

  352.       金坛: [119.56, 31.74],

  353.       东营: [118.49, 37.46],

  354.       牡丹江: [129.58, 44.6],

  355.       遵义: [106.9, 27.7],

  356.       绍兴: [120.58, 30.01],

  357.       扬州: [119.42, 32.39],

  358.       常州: [119.95, 31.79],

  359.       潍坊: [119.1, 36.62],

  360.       重庆: [106.54, 29.59],

  361.       台州: [121.420757, 28.656386],

  362.       南京: [118.78, 32.04],

  363.       滨州: [118.03, 37.36],

  364.       贵阳: [106.71, 26.57],

  365.       无锡: [120.29, 31.59],

  366.       本溪: [123.73, 41.3],

  367.       克拉玛依: [84.77, 45.59],

  368.       渭南: [109.5, 34.52],

  369.       马鞍山: [118.48, 31.56],

  370.       宝鸡: [107.15, 34.38],

  371.       焦作: [113.21, 35.24],

  372.       句容: [119.16, 31.95],

  373.       北京: [116.46, 39.92],

  374.       徐州: [117.2, 34.26],

  375.       衡水: [115.72, 37.72],

  376.       包头: [110, 40.58],

  377.       绵阳: [104.73, 31.48],

  378.       乌鲁木齐: [87.68, 43.77],

  379.       枣庄: [117.57, 34.86],

  380.       杭州: [120.19, 30.26],

  381.       淄博: [118.05, 36.78],

  382.       鞍山: [122.85, 41.12],

  383.       溧阳: [119.48, 31.43],

  384.       库尔勒: [86.06, 41.68],

  385.       安阳: [114.35, 36.1],

  386.       开封: [114.35, 34.79],

  387.       济南: [117, 36.65],

  388.       德阳: [104.37, 31.13],

  389.       温州: [120.65, 28.01],

  390.       九江: [115.97, 29.71],

  391.       邯郸: [114.47, 36.6],

  392.       临安: [119.72, 30.23],

  393.       兰州: [103.73, 36.03],

  394.       沧州: [116.83, 38.33],

  395.       临沂: [118.35, 35.05],

  396.       南充: [106.110698, 30.837793],

  397.       天津: [117.2, 39.13],

  398.       富阳: [119.95, 30.07],

  399.       泰安: [117.13, 36.18],

  400.       诸暨: [120.23, 29.71],

  401.       郑州: [113.65, 34.76],

  402.       哈尔滨: [126.63, 45.75],

  403.       聊城: [115.97, 36.45],

  404.       芜湖: [118.38, 31.33],

  405.       唐山: [118.02, 39.63],

  406.       平顶山: [113.29, 33.75],

  407.       邢台: [114.48, 37.05],

  408.       德州: [116.29, 37.45],

  409.       济宁: [116.59, 35.38],

  410.       荆州: [112.239741, 30.335165],

  411.       宜昌: [111.3, 30.7],

  412.       义乌: [120.06, 29.32],

  413.       丽水: [119.92, 28.45],

  414.       洛阳: [112.44, 34.7],

  415.       秦皇岛: [119.57, 39.95],

  416.       株洲: [113.16, 27.83],

  417.       石家庄: [114.48, 38.03],

  418.       莱芜: [117.67, 36.19],

  419.       常德: [111.69, 29.05],

  420.       保定: [115.48, 38.85],

  421.       湘潭: [112.91, 27.87],

  422.       金华: [119.64, 29.12],

  423.       岳阳: [113.09, 29.37],

  424.       长沙: [113, 28.21],

  425.       衢州: [118.88, 28.97],

  426.       廊坊: [116.7, 39.53],

  427.       菏泽: [115.480656, 35.23375],

  428.       合肥: [117.27, 31.86],

  429.       武汉: [114.31, 30.52],

  430.       大庆: [125.03, 46.58]

  431.     }

  432. 

  433.     var convertData = function(data) {

  434.       var res = []

  435.       for (var i = 0; i < data.length; i++) {

  436.         var geoCoord = geoCoordMap[data[i].name]

  437.         if (geoCoord) {

  438.           res.push({

  439.             name: data[i].name,

  440.             value: geoCoord.concat(data[i].value)

  441.           })

  442.         }

  443.       }

  444.       return res

  445.     }

  446. 

  447.     return {

  448.       title: {

  449.         text: '全国主要城市空气质量',

  450.         subtext: 'data from PM25.in',

  451.         sublink: 'http://www.pm25.in',

  452.         left: 'center',

  453.         textStyle: {

  454.           color: '#fff'

  455.         }

  456.       },

  457.       animation: false,

  458.       GLMap: {},

  459.       series: [

  460.         {

  461.           name: 'pm2.5',

  462.           type: 'scatter',

  463.           coordinateSystem: 'GLMap',

  464.           data: convertData(chartData),

  465.           symbolSize: function(val) {

  466.             return val[2] / 10

  467.           },

  468.           label: {

  469.             normal: {

  470.               formatter: '{b}',

  471.               position: 'right',

  472.               show: false

  473.             },

  474.             emphasis: {

  475.               show: true

  476.             }

  477.           },

  478.           itemStyle: {

  479.             normal: {

  480.               color: '#ddb926'

  481.             }

  482.           }

  483.         },

  484.         {

  485.           name: 'Top 5',

  486.           type: 'effectScatter',

  487.           coordinateSystem: 'GLMap',

  488.           data: convertData(

  489.             chartData

  490.               .sort(function(a, b) {

  491.                 return b.value - a.value

  492.               })

  493.               .slice(0, 6)

  494.           ),

  495.           symbolSize: function(val) {

  496.             return val[2] / 10

  497.           },

  498.           showEffectOn: 'render',

  499.           rippleEffect: {

  500.             brushType: 'stroke'

  501.           },

  502.           hoverAnimation: true,

  503.           label: {

  504.             normal: {

  505.               formatter: '{b}',

  506.               position: 'right',

  507.               show: true

  508.             }

  509.           },

  510.           itemStyle: {

  511.             normal: {

  512.               color: '#f4e925',

  513.               shadowBlur: 10,

  514.               shadowColor: '#333'

  515.             }

  516.           },

  517.           zlevel: 1

  518.         }

  519.       ]

  520.     }

  521.   }

  522.   DC.ready(initViewer)

  523. </script>

  524. </body>

  525. </html>

  526. </body>

  527. </html>