2021-08-25

有关echarts的一些配置项设置

vue引入echarts以及echarts-gl

echarts-gl是WebGL的扩展包，能够实现三维的可视化效果。
在官网下载echarts.min.js，以及echarts-gl.min.js，然后在index.html文件中，通过标签方式直接引入。”./static/plugins/echarts5.x“这个是文件存放的路径。

  <script src="./static/plugins/echarts5.x/echarts.min.js"></script>
  <script src="./static/plugins/echarts5.x/echarts-gl.min.js"></script>

也可以通过网址引入

<script src="http://echarts.baidu.com/build/dist/echarts.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts-gl.min.js"></script>

echarts.common.min.js不支持echarts-gl插件，如果要引用echarts-gl，就不用引用echarts.common.min.js

引入之后就可以直接适用echarts以及echarts-gl了。

下面说一下在使用过程中遇到的问题。
如图所示，坐标轴超出容器范围。

解决方法：
将投影方式设置为透视投影，然后配合viewComtrol的distance调整至合适的大小，就可以全部显示出来了。
distance表示默认视角距离主体的距离，对于globe来说是距离地球表面的距离，对于grid3D组件来说，是距离中心原点的距离，在projection为’perspective‘时有效。

grid3D： {
	viewControl: {
		projection: 'perspective'
		distance: 250
	}
}