VChart [Demo] add demo of map chart with flying lines

img_v3_02ap_628b49b5-490e-4aa0-9776-20d41b42178g

May 11 '24 03:05 xile611

尝试了在官网散点地图demo上再组合一个折线图的思路~顺带加了流光动画。效果及代码如下： demo

const response = await fetch('https://geojson.cn/api/data/china.json');
const geojson = await response.json();
VChart.registerMap('world', geojson);

const dataResponse = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/geojson/earthquake.json');
// const earthquakeData = await dataResponse.json();
const earthquakeData = {
  "values": [
    {
      "lng": 86.38,
      "lat": 43.82,
      "time": "2018-12-08 06:39:26",
      "level": "4.5",
      "depth": "10",
      "addr": "新疆昌吉州呼图壁县"
    },
    {
      "lng": 118.68,
      "lat": 40.21,
      "time": "2018-12-06 21:07:56",
      "level": "2.1",
      "depth": "13",
      "addr": "河北唐山市迁安市"
    },
    {
      "lng": 99.61,
      "lat": 23.92,
      "time": "2018-12-06 06:23:34",
      "level": "2.9",
      "depth": "5",
      "addr": "云南临沧市耿马县"
    },
    {
      "lng": 118.62,
      "lat": 23.36,
      "time": "2018-12-05 20:22:51",
      "level": "3.7",
      "depth": "15",
      "addr": "台湾海峡"
    },
    {
      "lng": 77.45,
      "lat": 40.4,
      "time": "2018-12-05 13:52:37",
      "level": "4.1",
      "depth": "17",
      "addr": "新疆克孜勒苏州阿图什市"
    }]
};
const center = {
  "lng": 119.2,
  "lat": 28.5,
  "addr": "浙江省金华市"
};

const spec = {
  type: 'common',
  region: [
    {
      roam: true,
      coordinate: 'geo',
      longitudeField: 'lng',
      latitudeField: 'lat',
      projection: {
        type: 'equirectangular'
      }
    }
  ],
  background: 'rgb(240, 248, 255)',
  data: [{ values: earthquakeData.values }],
  series: [
    { type: 'map', map: 'world', tooltip: { visible: false }, defaultFillColor: 'rgb(245,255,250)' },
    {
      type: 'scatter',
      xField: 'time',
      yField: 'addr',
      point: {
        style: {
          size: datum => Number(datum.depth),
          fill: 'green',
        }
      }, label: {
        visible: true,
        position: 'right',
        style: {
          fill: '#333',
          fontWeight: 'bold'
        }
      }
    },
    {
      type: 'line',
      seriesField: 'type',
      line: { style: { stroke: 'green' } },
      point: { visible: false },
      data: {
        values:
          [...earthquakeData.values.map((value, index) => ({ ...value, type: index })),
          ...earthquakeData.values.map((_, index) => ({ ...center, type: index }))]
      },
      animationNormal: {
        line: {
          loop: 500,
          duration: 2000,
          easing: 'quadIn',
          custom: VRender.StreamLight,
          customParameters: {
            streamLength: 30,
            attribute: { stroke: 'white', strokeOpacity: 0.5, lineWidth: 2 }
          }
        }
      }
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

May 14 '24 08:05 FunctionEurus

@FunctionEurus 可以提交PR给我们，示例的代码路径为：/docs/assets/examples 新增的示例需要在 docs/assets/examples/menu.json 中补充一下目录截图的保存路径： docs/public/vchart/preview 示例本地预览方式为：

cd docs
rushx start

@xiaoluoHe 示例的贡献文档可以再整理一下

May 16 '24 03:05 xile611

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

May 16 '24 05:05 FunctionEurus

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

先声明一下来源吧，

May 16 '24 05:05 xuanhun

想请问一下，我在demo中使用了第三方的geojson，这是否需要修改？

先声明一下来源吧，

好的ovo

May 16 '24 05:05 FunctionEurus

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决

$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error

May 16 '24 06:05 FunctionEurus

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决

$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error

尝试下：

确认下是否全局安装了 rush，npm i --global @microsoft/rush
在根目录下运行依次 rush purge 和 rush update

更多关于 demo task 的指南，希望能有一些帮助：

May 16 '24 06:05 xiaoluoHe

很抱歉，我在commit时遇到了这样的问题，想知道应该如何解决
$ git commit -m 'docs: add a map with flying lines demo'
The rush.json configuration requests Rush version 5.94.1
Transforming C:\Users\Admin\Desktop\VChart\common\config\rush\.npmrc
  --> "C:\Users\Admin\Desktop\VChart\common\temp\install-run\@[email protected]\.npmrc"
Installing @microsoft/rush...


Error: Unable to install package: Error: "npm install" encountered an error
尝试下：

确认下是否全局安装了 rush，npm i --global @microsoft/rush

在根目录下运行依次 rush purge 和 rush update

更多关于 demo task 的指南，希望能有一些帮助：

感谢回复，已经尝试了该办法但依然无法提交。

May 16 '24 11:05 FunctionEurus

okk，不过是指demo截图嘛？ map-with-flying-lines_1.9.1.png

May 17 '24 07:05 FunctionEurus

@FunctionEurus 麻烦提供下更详细的报错信息

May 17 '24 08:05 xiaoluoHe

><不好意思！就是已经安装了rush，然后根目录下依次运行rush purge和rush update之后git commit报错，错误如下

May 17 '24 08:05 FunctionEurus

@FunctionEurus 信息有点少。猜测还是 rush+pnpm 在 windows 下使用问题，rush 帮助文档里也提到可能和 npmrc 里配置有关。我找一个 windows 电脑试试看能否复现。如果这个问题一时难以解决，建议可以移步使用 wsl：https://code.visualstudio.com/docs/remote/wsl

May 20 '24 03:05 xiaoluoHe

@FunctionEurus 问题已经定位到了，相关 pr #2710，等合并后更新代码再试一下。若还是有问题，把 node 版本控制在 18.20.1 及以下试一试

May 20 '24 08:05 xiaoluoHe

VChart VChart copied to clipboard

[Demo] add demo of map chart with flying lines

VChart
VChart copied to clipboard