山海鲸可视化拥有自己的组件,方便使用者直接拖拽使用,调整样式达到自己想要的东西
但是有些组件不满足需求
可以使用其他外部导入进来的文件
山海鲸自己集成了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表格数据的导入