vision-js

基于纯js的大数据可视化渲染引擎。

使用方法

引入外部依赖库

<!-- 如果要使用地图组件，需要引入mapboxgl -->
<script src="mapbox-gl.js"></script>
<!-- 如果要使用echarts图表组件，例如柱状图、折线图等，需要引入echarts -->
<script src="echarts.min.js"></script>
<!-- 如果要使用水球组件，需要引入echarts和echarts-liquidfill -->
<script src="echarts-liquidfill.min.js"></script>
<!-- 如果要使用词云组件，需要引入echarts和echarts-wordcloud -->
<script src="echarts-wordcloud.min.js"></script>

引入css样式

<link href='vision-js/dist/vision.css' rel='stylesheet' />

cdn引入

<div id="container"></div>
<link href="//unpkg.com/@thcloud/vision-js@latest/dist/vision.css" rel="stylesheet" />
<script src="//unpkg.com/@thcloud/vision-js@latest/dist/vision.min.js"></script>
<script>
  window.onload = function() {
    const screen = new Vision.Screen({
      config: './config.json', 
      container: 'container'
    });
  }
</script>

通过npm安装

npm install @thcloud/vision-js

import {Screen} from '@thcloud/vision-js'

const screen = new Screen({
  config: './config.json', 
  container: 'container'
});

文档

查看在线文档

开发

npm install
npm run start
# 在浏览器打开http://localhost:8080/debug查看预览
npm run build

发布

将发布的文件复制到deploy文件夹，然后在deploy文件夹内运行npm publish，注意更新版本号和changelog