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

山海鲸——大屏可视化自学总结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表格数据的导入

相关推荐

呜呜祖拉
365bet手机娱乐场

呜呜祖拉

📅 08-18 👁️ 3755
泉满明湖映济南
nba365直播现场视频直播

泉满明湖映济南

📅 09-01 👁️ 5469
手机小窗口模式在哪里设置 手机浮窗怎么关闭
mobile365体育投注备用

手机小窗口模式在哪里设置 手机浮窗怎么关闭

📅 10-04 👁️ 8936