山海鲸——大屏可视化自学总结1

山海鲸可视化拥有自己的组件，方便使用者直接拖拽使用，调整样式达到自己想要的东西
但是有些组件不满足需求
可以使用其他外部导入进来的文件
山海鲸自己集成了echart的配置
1、使用山海鲸的二开echart图表
-在山海鲸里面ctrl+F搜索二开echart，即可使用

-然后在这个组件里面代码设置里面导入你配置好的echart的js文件

-注意使用的js文件格式，必须是以下代码格式

class EchartsSample {
  init() {
    const echarts = this.element.getMountedInstance();
	//  其他逻辑
    const option = {
  	// echart配置
    };
     //调用setOption方法设置进去即可完成整个echarts的扩展编写
    echarts.setOption(option);
  }
}
export default EchartsSample;

2、有些图形没有合适的组件使用，需要用html+css这种写出来的
可以用山海鲸里面的iframe


如果你有线上的组件，可以直接修改iframe地址
如果你是本地写的组件
选择你组件所在文件夹，组件必须是 .html 结尾的文件，暂时不太支持vue项目的之间导入

3、数据的链接
山海鲸自带组件都是自带默认数据
你可以链接你的数据库或者导入数据

-excel文件数据导入
在组件数据这里，看板公共数据这里添加数据

这里导入excel表格

表格格式
表格第一行第一列对应的是x轴名称
表格第二行以及其他对应y轴数据
例如：

拿一个组件看看

这就是excel表格数据的导入