其他分享
首页 > 其他分享> > ECharts之类型3D ---echarts

ECharts之类型3D ---echarts

作者:互联网

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
    <title>3D中国</title>
    <script src="echarts.min.js"></script>
    <script src="echarts-gl.js"></script>
    <script src="jquery-3.2.1.js"></script>

    <script src='china.js'></script>
    <style>#main {width:1000px; height: 500px;margin: auto;border:2px solid green;}</style>
</head>
<body>
    <div id='main'></div>
    <script>
        let geoCoordMap = {
           "海门": [121.15, 31.89],
           "鄂尔多斯": [109.781327, 39.608266],
           "招远": [120.38, 37.35],
           "舟山": [122.207216, 29.985295],
           "齐齐哈尔": [123.97, 47.33],
           "盐城": [120.13, 33.38],
           "赤峰": [118.87, 42.28],
           "青岛": [120.33, 36.07],
           "乳山": [121.52, 36.89],
           "金昌": [102.188043, 38.520089],
           "泉州": [118.58, 24.93],
           "莱西": [120.53, 36.86],
           "日照": [119.46, 35.42],
           "胶南": [119.97, 35.88],
           "南通": [121.05, 32.08],
           "拉萨": [91.11, 29.97],
           "云浮": [112.02, 22.93],
           "梅州": [116.1, 24.55],
           "文登": [122.05, 37.2],
           "上海": [121.48, 31.22],
           "攀枝花": [101.718637, 26.582347],
           "威海": [122.1, 37.5],
           "承德": [117.93, 40.97],
           "厦门": [118.1, 24.46],
           "汕尾": [115.375279, 22.786211],
           "潮州": [116.63, 23.68],
           "丹东": [124.37, 40.13],
           "太仓": [121.1, 31.45],
           "曲靖": [103.79, 25.51],
           "烟台": [121.39, 37.52],
           "福州": [119.3, 26.08],
           "瓦房店": [121.979603, 39.627114],
           "即墨": [120.45, 36.38],
           "抚顺": [123.97, 41.97],
           "玉溪": [102.52, 24.35],
           "张家口": [114.87, 40.82],
           "阳泉": [113.57, 37.85],
           "莱州": [119.942327, 37.177017],
           "湖州": [120.1, 30.86],
           "汕头": [116.69, 23.39],
           "昆山": [120.95, 31.39],
           "宁波": [121.56, 29.86],
           "湛江": [110.359377, 21.270708],
           "揭阳": [116.35, 23.55],
           "荣成": [122.41, 37.16],
           "连云港": [119.16, 34.59],
           "葫芦岛": [120.836932, 40.711052],
           "常熟": [120.74, 31.64],
           "东莞": [113.75, 23.04],
           "河源": [114.68, 23.73],
           "淮安": [119.15, 33.5],
           "泰州": [119.9, 32.49],
           "南宁": [108.33, 22.84],
           "营口": [122.18, 40.65],
           "惠州": [114.4, 23.09],
           "江阴": [120.26, 31.91],
           "蓬莱": [120.75, 37.8],
           "韶关": [113.62, 24.84],
           "嘉峪关": [98.289152, 39.77313],
           "广州": [113.23, 23.16],
           "延安": [109.47, 36.6],
           "太原": [112.53, 37.87],
           "清远": [113.01, 23.7],
           "中山": [113.38, 22.52],
           "昆明": [102.73, 25.04],
           "寿光": [118.73, 36.86],
           "盘锦": [122.070714, 41.119997],
           "长治": [113.08, 36.18],
           "深圳": [114.07, 22.62],
           "珠海": [113.52, 22.3],
           "宿迁": [118.3, 33.96],
           "咸阳": [108.72, 34.36],
           "铜川": [109.11, 35.09],
           "平度": [119.97, 36.77],
           "佛山": [113.11, 23.05],
           "海口": [110.35, 20.02],
           "江门": [113.06, 22.61],
           "章丘": [117.53, 36.72],
           "肇庆": [112.44, 23.05],
           "大连": [121.62, 38.92],
           "临汾": [111.5, 36.08],
           "吴江": [120.63, 31.16],
           "石嘴山": [106.39, 39.04],
           "沈阳": [123.38, 41.8],
           "苏州": [120.62, 31.32],
           "茂名": [110.88, 21.68],
           "嘉兴": [120.76, 30.77],
           "长春": [125.35, 43.88],
           "胶州": [120.03336, 36.264622],
           "银川": [106.27, 38.47],
           "张家港": [120.555821, 31.875428],
           "三门峡": [111.19, 34.76],
           "锦州": [121.15, 41.13],
           "南昌": [115.89, 28.68],
           "柳州": [109.4, 24.33],
           "三亚": [109.511909, 18.252847],
           "自贡": [104.778442, 29.33903],
           "吉林": [126.57, 43.87],
           "阳江": [111.95, 21.85],
           "泸州": [105.39, 28.91],
           "西宁": [101.74, 36.56],
           "宜宾": [104.56, 29.77],
           "呼和浩特": [111.65, 40.82],
           "成都": [104.06, 30.67],
           "大同": [113.3, 40.12],
           "镇江": [119.44, 32.2],
           "桂林": [110.28, 25.29],
           "张家界": [110.479191, 29.117096],
           "宜兴": [119.82, 31.36],
           "北海": [109.12, 21.49],
           "西安": [108.95, 34.27],
           "金坛": [119.56, 31.74],
           "东营": [118.49, 37.46],
           "牡丹江": [129.58, 44.6],
           "遵义": [106.9, 27.7],
           "绍兴": [120.58, 30.01],
           "扬州": [119.42, 32.39],
           "常州": [119.95, 31.79],
           "潍坊": [119.1, 36.62],
           "重庆": [106.54, 29.59],
           "台州": [121.420757, 28.656386],
           "南京": [118.78, 32.04],
           "滨州": [118.03, 37.36],
           "贵阳": [106.71, 26.57],
           "无锡": [120.29, 31.59],
           "本溪": [123.73, 41.3],
           "克拉玛依": [84.77, 45.59],
           "渭南": [109.5, 34.52],
           "马鞍山": [118.48, 31.56],
           "宝鸡": [107.15, 34.38],
           "焦作": [113.21, 35.24],
           "句容": [119.16, 31.95],
           "北京": [116.46, 39.92],
           "徐州": [117.2, 34.26],
           "衡水": [115.72, 37.72],
           "包头": [110, 40.58],
           "绵阳": [104.73, 31.48],
           "乌鲁木齐": [87.68, 43.77],
           "枣庄": [117.57, 34.86],
           "杭州": [120.19, 30.26],
           "淄博": [118.05, 36.78],
           "鞍山": [122.85, 41.12],
           "溧阳": [119.48, 31.43],
           "库尔勒": [86.06, 41.68],
           "安阳": [114.35, 36.1],
           "开封": [114.35, 34.79],
           "济南": [117, 36.65],
           "德阳": [104.37, 31.13],
           "温州": [120.65, 28.01],
           "九江": [115.97, 29.71],
           "邯郸": [114.47, 36.6],
           "临安": [119.72, 30.23],
           "兰州": [103.73, 36.03],
           "沧州": [116.83, 38.33],
           "临沂": [118.35, 35.05],
           "南充": [106.110698, 30.837793],
           "天津": [117.2, 39.13],
           "富阳": [119.95, 30.07],
           "泰安": [117.13, 36.18],
           "诸暨": [120.23, 29.71],
           "郑州": [113.65, 34.76],
           "哈尔滨": [126.63, 45.75],
           "聊城": [115.97, 36.45],
           "芜湖": [118.38, 31.33],
           "唐山": [118.02, 39.63],
           "平顶山": [113.29, 33.75],
           "邢台": [114.48, 37.05],
           "德州": [116.29, 37.45],
           "济宁": [116.59, 35.38],
           "荆州": [112.239741, 30.335165],
           "宜昌": [111.3, 30.7],
           "义乌": [120.06, 29.32],
           "丽水": [119.92, 28.45],
           "洛阳": [112.44, 34.7],
           "秦皇岛": [119.57, 39.95],
           "株洲": [113.16, 27.83],
           "石家庄": [114.48, 38.03],
           "莱芜": [117.67, 36.19],
           "常德": [111.69, 29.05],
           "保定": [115.48, 38.85],
           "湘潭": [112.91, 27.87],
           "金华": [119.64, 29.12],
           "岳阳": [113.09, 29.37],
           "长沙": [113, 28.21],
           "衢州": [118.88, 28.97],
           "廊坊": [116.7, 39.53],
           "菏泽": [115.480656, 35.23375],
           "合肥": [117.27, 31.86],
           "武汉": [114.31, 30.52],
           "大庆": [125.03, 46.58]
       };

       var convertData = function(data) {
           var res = [];
           for (var i = 0; i < data.length; i++) {
               var geoCoord = geoCoordMap[data[i].name];
               if (geoCoord) {
                   res.push({
                       name: data[i].name,
                       value: geoCoord.concat(data[i].value)
                   });
               }
           }
           console.log(res)
           return res;
       };

       option = {
           title: {
               text: '测试bar3D、scatter3D、geo3D',
               x: 'left',
               top: "10",
               textStyle: {
                   color: '#000',
                   fontSize: 14
               }
           },
           tooltip: {
               show: true,
         // formatter:(params)=>{
         //   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
         //   return data;
         // },
     },
     visualMap: [{
       type: 'continuous',
       seriesIndex: 0,
       text: ['bar3D'],
       calculable: true,
       max: 300,
       inRange: {
           color: ['#87aa66', '#eba438', '#d94d4c']
       }
   }, {
       type: 'continuous',
       seriesIndex: 1,
       text: ['scatter3D'],
       left: 'right',
       max: 100,
       calculable: true,
       inRange: {
           color: ['#000', 'blue', 'purple']
       }
   }],
   geo3D: {
       map: 'china',
       roam: true,
       itemStyle: {
           color: '#1d5e98',
           opacity: 1,
           borderWidth: 0.4,
           borderColor: '#000'
       },
       label: {
           show: true,
           textStyle: {
                 color: '#f00', //地图初始化区域字体颜色
                 fontSize: 8,
                 opacity: 1,
                 backgroundColor: 'rgba(0,23,11,0)'
             },
         },
         emphasis: { //当鼠标放上去  地区区域是否显示名称
           label: {
               show: true,
               textStyle: {
                   color: '#fff',
                   fontSize: 3,
                   backgroundColor: 'rgba(0,23,11,0)'
               }
           }
       },
         //shading: 'lambert',
         light: { //光照阴影
           main: {
                 color: '#fff', //光照颜色
                 intensity: 1.2, //光照强度
                 //shadowQuality: 'high', //阴影亮度
                 shadow: false, //是否显示阴影
                 alpha:55,
                 beta:10

             },
             ambient: {
               intensity: 0.3
           }
       }
   },
   series: [{
       name: 'bar3D',
       type: "bar3D",
       coordinateSystem: 'geo3D',
         barSize: 1, //柱子粗细
         shading: 'lambert',
         opacity: 1,
         bevelSize:0.3,
         label: {
           show: false,
           formatter: '{b}'
       },
       data: convertData([{
           name: "海门",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "鄂尔多斯",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "招远",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "舟山",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "齐齐哈尔",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "盐城",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "赤峰",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "青岛",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "乳山",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "金昌",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "泉州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "莱西",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "日照",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "胶南",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "南通",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "拉萨",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "云浮",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "梅州",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "文登",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "上海",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "攀枝花",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "威海",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "承德",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "厦门",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "汕尾",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "潮州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "丹东",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "太仓",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "曲靖",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "烟台",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "福州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "瓦房店",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "即墨",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "抚顺",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "玉溪",
           value: (Math.random() * 200).toFixed(2)
       },


       {
           name: "宁波",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "湛江",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "揭阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "荣成",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "连云港",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "葫芦岛",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "常熟",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "东莞",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "河源",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "淮安",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "泰州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "南宁",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "营口",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "惠州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "江阴",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "蓬莱",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "韶关",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "嘉峪关",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "广州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "延安",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "太原",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "清远",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "中山",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "昆明",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "寿光",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "盘锦",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "长治",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "深圳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "珠海",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "宿迁",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "咸阳",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "铜川",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "平度",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "佛山",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "海口",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "江门",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "章丘",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "肇庆",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "大连",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "临汾",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "吴江",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "石嘴山",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "沈阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "苏州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "茂名",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "嘉兴",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "长春",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "胶州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "银川",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "张家港",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "三门峡",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "锦州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "南昌",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "柳州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "三亚",
           value: (Math.random() * 300).toFixed(2)
       }, {
           name: "自贡",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "吉林",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "阳江",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "泸州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "西宁",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "宜宾",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "呼和浩特",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "成都",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "大同",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "镇江",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "桂林",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "张家界",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "宜兴",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "北海",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "西安",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "金坛",
           value: (Math.random() * 200).toFixed(2)
       },

       {
           name: "包头",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "绵阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "乌鲁木齐",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "枣庄",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "杭州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "淄博",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "鞍山",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "溧阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "库尔勒",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "安阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "开封",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "济南",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "德阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "温州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "九江",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "邯郸",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "临安",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "兰州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "沧州",
           value: (Math.random() * 200).toFixed(2)
       },

       {
           name: "秦皇岛",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "株洲",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "石家庄",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "莱芜",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "常德",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "保定",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "湘潭",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "金华",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "岳阳",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "长沙",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "衢州",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "廊坊",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "菏泽",
           value: (Math.random() * 100).toFixed(2)
       }, {
           name: "合肥",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "武汉",
           value: (Math.random() * 200).toFixed(2)
       }, {
           name: "大庆",
           value: (Math.random() * 200).toFixed(2)
       }
       ]),
}, {
   name: 'scatter3D',
   type: "scatter3D",
   coordinateSystem: 'geo3D',
   symbol: 'pin',
   symbolSize: 30,
   opacity: 1,
   label: {
       show: false,
       formatter: '{b}'
   },
   itemStyle: {
       borderWidth: 0.5,
       borderColor: '#fff'
   },
   data: convertData([{
       name: "阳泉",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }, {
       name: "莱州",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }, {
       name: "湖州",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }, {
       name: "汕头",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }, {
       name: "昆山",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }, {
       name: "张家口",
       value: ((Math.random() * 100) + 50).toFixed(2)
   }])
}]
}
echarts.init(document.getElementById('main')).setOption(option);
</script>
</body>
</html>

  原博客主链接:http://www.cnblogs.com/carsonwuu/p/8267457.html

标签:200,name,random,value,ECharts,---,toFixed,echarts,Math
来源: https://www.cnblogs.com/cjwblogs/p/15567893.html