有关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
}
}