精华内容
下载资源
问答
  • echarts echarts-x echarts-gl 制作3D地球

    千次阅读 2017-11-06 17:28:46
    我的博客:http://gongyanli.com/echarts-echarts-x-echarts-gl-%E5%88%B6%E4%BD%9C3D%E5%9C%B0%E7%90%83/ github:https://github.com/Gladysgong/3D_earth_all tips:可以自己研究一下,等有时间我再详细讲解...

    我的博客:http://gongyanli.com/echarts-echarts-x-echarts-gl-%E5%88%B6%E4%BD%9C3D%E5%9C%B0%E7%90%83/
    github:https://github.com/Gladysgong/3D_earth_all
    tips:可以自己研究一下,等有时间我再详细讲解代码。

    1.worldFlights

    所用框架:philogl
    位置:examples\worldFlights
    说明:philogl (https://github.com/senchalabs/philogl) 官方项目下的一个demo,把全球飞行航线在3d地球上表示出来。
    

    2.airline_china

    所用框架:philogl
    说明: 一位博主基于philogl官方项目的demo改写而成,把全球的飞行路线改为了中国飞行路线(参照:examples\worldFlights)
    

    3.3dmap

    所用框架:echart-x
    说明:利用echart-x制作的3d地球,其数据是把根据经纬度的高低来对国家进行分类(高、中、低)
    

    4.echarts-gl

    说明:echarts-gl官方项目,我使用npm拉取代码后,依然运行有问题,显示不清楚,所以弃用,可能还是我自己哪里有问题,但是没找出来。
    

    5.echarts3D-globe

    所用框架:echarts-gl
    说明:一位童鞋(不好意思,等我有时间把你的gith补上,么么哒)利用echarts-gl而制作的3d地球,模拟的是网络攻击的数据,但我发现依然使用的是飞行航线的数据,所以这个数据究竟能否反应网络攻击有待证实。
    

    6.earth

    所用框架:echarts-gl
    说明:基于echarts3D-globe重写了一个适合自己需要的精简的地球
    

    7.earth-x

    所用框架:echarts-x
    说明:基于3dmap重写了一个适合自身需要的最终地球。
    
    展开全文
  • ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于 ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D 库ZRender。特色混搭ECharts 里的混搭功能很强大,作为 ECharts 的扩展,ECharts-X 自然也需要...
  • 使用echarts-x实现3D地球,并完美解决“myChart is not function”的错误。
  • echarts-x

    2017-03-09 16:58:00
    ${ctxStatic}/echartsx/lib/echarts-x/echarts-x.js"> require.config({ paths: { 'echarts': '${ctxStatic}/echartsx/lib/echarts/', 'echarts-x': '${ctxStatic}/echartsx/lib/echarts-x' } }); require...
    <%@ page contentType="text/html;charset=UTF-8" %>
    <%@ include file="/webpage/include/taglib.jsp"%>
    <html>
      <head>
        <title>map3d</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="${ctxStatic}/echartsx/css/common.css">
        <link rel="stylesheet" href="${ctxStatic}/echartsx/css/example.css">
        <link rel="stylesheet" href="${ctxStatic}/echartsx/css/codemirror.css">
        <link rel="stylesheet" href="${ctxStatic}/echartsx/css/monokai.css">
        <link rel="stylesheet" href="${ctxStatic}/echartsx/css/twilight.css">
            <style>
                #main { position:relative; top:0; bottom:0; width:100%; height:100%;}
        </style>
      </head>
      <body>
        <div id="main"></div>
         <script src="${ctxStatic}/echartsx/lib/echarts/echarts.js"></script>
         <script src="${ctxStatic}/echartsx/lib/echarts-x/echarts-x.js"></script>
         <script type="text/javascript">
            require.config({
                paths: {
                    'echarts': '${ctxStatic}/echartsx/lib/echarts/',
                    'echarts-x': '${ctxStatic}/echartsx/lib/echarts-x'
                }
            });
            require([
                'echarts',
                'echarts-x',
                'echarts/chart/map',
                'echarts-x/chart/map3d'
            ],function(ec){
                var myChart = ec.init(document.getElementById('main'));
                myChart.setOption({
                    title: {
                        text: '目标沙盘',
                        x: 'center',
                        textStyle: {
                            color: 'white'
                        }
                    },
                    tooltip: {
                        formatter: '{b}'
                    },
                    series: [{
                        type: 'map3d',
                        mapType: 'world',
                        baseLayer: {
                            backgroundColor: '',
                            backgroundImage: '${ctxStatic}/echartsx/asset/earth.jpg',
                            quality: 'high',
                        },
    
                        surfaceLayers: [{
                            type: 'texture',
                            distance: 3,
                            image: '${ctxStatic}/echartsx/asset/clouds.png'
                        }],
    
                        selectedMode: 'single',
    
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                },
                                borderWidth: 1,
                                borderColor: 'yellow',
                                areaStyle: {
                                    color: 'rgba(0, 0, 0, 0)'
                                }
                            }
                        },
                        data: [{}]
                    }]
                });
            })
         </script>
      </body>
    </html>

    转载于:https://www.cnblogs.com/mayidudu/p/6526560.html

    展开全文
  • 软件简介ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D库ZRender。特色混搭ECharts 里的混搭功能很强大,作为 ECharts 的扩展,ECharts-X 自然...

    软件简介

    ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于

    ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D

    库ZRender。

    eef5c1f908edcf9ba9f8c9e2b2e8e31c.png

    特色

    混搭

    ECharts 里的混搭功能很强大,作为 ECharts 的扩展,ECharts-X 自然也需要支持。ECharts-X 能跟 ECharts

    中的折柱饼地图等图表混搭,可以有更丰富的可视化效果,同时 ECharts-X 也能够直接使用 ECharts 中的 legend, dataRange

    等组件。

    0cffd11b07efa3ac172ec1c1d563d923.png

    3D大规模标注

    ECharts-X 中的标注在效果和使用上都跟 ECharts

    中的标注(markPoint)类似,但是由于WebGL的强大能力,对于几万甚至几十万的markPoint也能进行实时的动画和交互

    08ba78c8c5f17556498268af82b7617e.gif

    3D大规模标柱

    标柱(markBar)是 ECharts-X 中新定义的一个概念,它是标注(markPoint)的衍生,在三维空间扩展了高度维度表达更丰富的数据信息。

    f1cdccae108d25427663eb659c35fb00.gif

    3D大规模标线

    同样 ECharts-X 中的标线在使用上和 ECharts 类似,但是展现效果从 2D 变成 3D 的曲线,支持几万条 markLine

    的实时展现,动画以及交互

    e9e6c4936ffb1b7d3da91972ab807d04.gif

    风场,洋流等向量场的可视化

    NASA之前发布过全球洋流图,用梵高风格的表现使得可视化也充满了艺术感,ECharts-X

    也提供了对洋流,风场这种向量场可视化的便捷配置。同样的,也是实时的展现和交互。

    677b11225531a5ac8c0e24402e342931.png

    自定义底图

    这个功能比较简单但是非常实用,能够配置地球的底图纹理图片,使得展现更有质感,以后也会在 ECharts 的 map

    中加入。下面截图是将地图换成木星纹理的效果。

    23e91f0bf3f8c99c31d812888a2bd2d3.png

    展开全文
  • echarts-X轴不从0刻度开始

    千次阅读 2019-01-23 15:34:41
    echarts-X轴不从0刻度开始
                   

    1、问题背景

         统一一周内植树的数量,利用柱状图来实现


    2、实现源码

    (1)X轴从零刻度开始

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>echarts-X轴不从0刻度开始</title>  <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>  <style>   body,html{    width: 99%;    height: 99%;    font-family: "微软雅黑";    font-size: 12px;   }   #bar{    width: 100%;    height: 100%;   }  </style>  <script>   $(function(){    var chart = document.getElementById('bar');                  var echart = echarts.init(chart);                                 var option = {        title: {            text: ''        },        tooltip: {            trigger: 'axis'        },        legend: {            data:['植树数量']        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        toolbox: {            feature: {                saveAsImage: {}            }        },        xAxis: {            type: 'category',            boundaryGap: false,            data: ['周一','周二','周三','周四','周五','周六','周日']        },        yAxis: {            type: 'value'        },        series: [            {                name:'植树数量',                type:'bar',                stack: '植树数量',                data:[34, 12, 56, 27, 42, 87, 62]            }        ]    };                                  echart.setOption(option);     });  </script> </head> <body>  <div id="bar"></div> </body></html>

    (2)X轴不从零刻度开始

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>echarts-X轴不从0刻度开始</title>  <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>  <style>   body,html{    width: 99%;    height: 99%;    font-family: "微软雅黑";    font-size: 12px;   }   #bar{    width: 100%;    height: 100%;   }  </style>  <script>   $(function(){    var chart = document.getElementById('bar');                  var echart = echarts.init(chart);                                 var option = {        title: {            text: ''        },        tooltip: {            trigger: 'axis'        },        legend: {            data:['植树数量']        },        grid: {            left: '3%',            right: '4%',            bottom: '3%',            containLabel: true        },        toolbox: {            feature: {                saveAsImage: {}            }        },        xAxis: {            type: 'category',            boundaryGap: true,            data: ['周一','周二','周三','周四','周五','周六','周日']        },        yAxis: {            type: 'value'        },        series: [            {                name:'植树数量',                type:'bar',                stack: '植树数量',                data:[34, 12, 56, 27, 42, 87, 62]            }        ]    };                                  echart.setOption(option);     });  </script> </head> <body>  <div id="bar"></div> </body></html>

    3、实现结果

    (1)X轴从零刻度开始


    (2)X轴不从零刻度开始


    4、问题说明

         在xAxis中的boundaryGap属性,设置为false代表是零刻度开始,设置为true代表离零刻度间隔一段距离

               

    再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

    展开全文
  • 1、问题背景统一一周内植树的数量,利用柱状图来实现2、实现源码(1)X轴从零刻度开始echarts-X轴不从0刻度开始body,html{width: 99%;height: 99%;font-family: "微软雅黑";font-size: 12px;}#bar{width: 100%;height:...
  • echarts-x数据筛选

    千次阅读 2018-02-10 13:37:55
    echarts-x里的数据筛选有一个很大的bug一开始我的数据展示如图所示:数据筛选:将图上黄色的点隐藏掉$.ajax({ url: './data/placemark.json', success: function (data) { var len = data.length; for(var i = 0;i &...
  • ECharts-X是 ECharts 团队推出的全新 3D 可视化库,它是基于 ECharts 的扩展,底层深度整合了 WebGL 库QTEK和 Canvas2D 库ZRender。特色混搭ECharts 里的混搭功能很强大,作为 ECharts 的扩展,ECharts-X 自然也需要...
  • 一款轻量级三维可视化产品-ECharts-X

    千次阅读 2018-06-01 10:51:04
    一、前言 在可视化的项目需求中,很多需求是简单的大场景下的可视化展示,如全国运营城市的分布,全球的航向,人口的城市间迁徙…这些可视化需求本身都是基于三维展示的,...ECharts-X 的定位是 ECharts 的扩展,因...
  • echarts-x-0.2.0.zip

    2018-06-29 15:56:37
    echarts 官方工具类,echarts 官方工具类,echarts 官方工具类,echarts 官方工具类,
  • <div><p>该提问来源于开源项目:ecomfe/echarts-gl</p></div>
  • echarts-x 3d 地球 中国区域怎么区分中国台湾、中国香港、大陆?
  • 各种图表,仪表盘,支持3D,旋转等等
  • 一个3D可视化项目背后的心酸:ECharts-X的坎坷路(2015-02-05 17:26:32)标签:大数据可视化项目Raincent网络大数据(http://www.raincent.com)整合了大数据,大数据概念,网络数据与科学,cdn,cdn加速,idc,网络测量...
  • 最好和echarts-x中方法一致 <img alt="snipaste_20171225_190247" src="https://img-blog.csdnimg.cn/img_convert/6cd6bda26587760a7ab1f31055842ebe.png" /></p><p>该提问来源于开源项目:ecomfe/echarts-gl...
  • import * as echarts from '../../../ec-canvas/echarts'; const app = getApp(); let myChart1 = null; let myChart2 = null; Page({ /** * 页面的初始数据 */ data: { ec1: { lazyLoad: true .
  • 所以用到了Echarts组件,进而研究了Echarts-X,具体介绍请看官网:http://echarts.baidu.com/echarts2/x/doc/index.html 根据官网的介绍,如果直接下载DEMO运行会一直报类似“define is not function”或者...
  • <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Echarts异步数据加载 8 <!-- 引入echarts --> 9 <script src="./echarts.min.js"> 10 11 12 <!-- 为ECharts准备一个具备大小...
  • /* 计算顶点的x坐标, first_x + col * width */ vertex_data[i + 0] = start_data[t * 2 + 0] + col * 1.0; /* 计算顶点的y坐标, first_y + row * height */ vertex_data[i + 1] = start_data[t * 2 + 1] + row * ...
  • echarts-X轴不从0刻度开始 代码实现

    千次阅读 2019-03-09 14:11:40
    boundaryGap: true, //xAxis中的boundaryGap属性,设置为false代表是零刻度开始,设置为true代表离零刻度间隔一段距离 xAxis: [ { name: this.xunit, type: "category", ... ...
  • ECharts-X 3D地图World Flights简单画线画点Demo

    千次阅读 热门讨论 2016-10-24 13:09:00
    下载地址:https://github.com/lixinGiting/Echart-X-3D-Demo  myChart.setOption({ tooltip: { formatter: '{b}' }, series: [{ data: [], type: 'map3d', mapType: 'wor...
  • echarts-x markLine 北京到南京,线条不连续 而是中间断开的。坐标换成北京到广州,是可以正常显示的,但是短距离会出现这种情况。有什么解决方法吗?谢谢。 [img=...
  • echarts-wordcloud Unofficial (https://github.com/apache/incubator-echarts) wordcloud extension based on wordcloud2.js for Apache ECharts. Examples Google Trends ECharts Option Keywords Install <...
  • //var myChart = this.$echarts.init(document.getElementById("echart-twoline")); //vue var myChart = echarts.init(document.getElementById("echart-twoline"));//jquery var option = { tooltip: { ...
  • script src='echarts-liquidfill.js'></script> ECharts can be downloaded at GitHub dist directory or Download page of Official Website (in Chinese). NOTE The minimum package of ECharts ...
  • 1.截取名称用省略号替代,设置一个隐藏域用来显示完整的名称(个人推荐方式) 先在xAxis中添加属性 xAxis: { triggerEvent: true,//必须设置为true,否则事件无法触发 axisLabel:{ formatter: function(value) { ...
  • fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //给颜色设置渐变色 前面4个参数,给第一个设置1,第四个设置0 ,就是水平渐变 //给第一个设置0,第四个设置1,就是垂直渐变 offset: 0, color...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,195
精华内容 478
关键字:

ECharts-X