echarts 学习笔记【6】大屏

最新推荐文章于 2024-03-20 11:33:11 发布

大杯美式不加糖

最新推荐文章于 2024-03-20 11:33:11 发布

阅读量554

点赞数

分类专栏： Echarts 文章标签：前端 echarts

本文链接：https://blog.csdn.net/qq_40988677/article/details/124399735

版权

Echarts 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

大屏注意事项

大屏通常放在公共空间中展示数据
大屏尺寸一般为 1920 * 1080
大屏可以不用考虑浏览器兼容性，谷歌兼容即可
原理为在浏览器中，建立多个echarts容器，将不同的echarts图标放入其中

制作须知

可以在echarts官网使用主题定制工具进行主题定制后下载到本地使用：

在这里插入图片描述
设置好之后点击左上方的下载主题

在这里插入图片描述
有 JS 和 JSON 版本可供选择：

在这里插入图片描述
紧接着在项目中引入，在 init 的时候作为第二个参数传入：

<script src="https://lib.baomitu.com/echarts/4.7.0/echarts.min.js"></script>
<!-- 引入样式文件 -->
<script src="./walden.js"></script>
<script>
const dom = document.getElementById('main')
const myChart = echarts.init(dom, 'walden') // 初始化的时候作为参数传入
......
</script>

拓展： 百度地图的使用
百度地图在echarts中使用的频率还是挺高的，介绍一下如何在echarts中使用百度地图

<!-- 引入百度地图api -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=EcMeTlWuNyyqL4GwZT5Nmlj9mtpvhE9Y"></script>
<!-- 引入map组件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

<script>
...

const option = {
  bmap: {} // 使用bmap
}

...
</script>