电脑计算机编程入门教程自学编程语言_aardio教程_echarts怎么实现在同一个div容器中显示多个图表?
Admin
发布:2022-04-06 06:00:00 分类:心得经验
echarts怎么实现在同一个div容器中显示多个图表?
每一个echarts对象都会消耗渲染资源,
那么是否要吧把多个echarts放在同一个div容器中渲染?
这样是否会降低资源消耗?
网上相关的资料比较少,
找了几个例子,
自己组装了一下,
还存在一些问题,
先把它们发布出来交流探讨.
aardio教程echarts图表示例的HTML源码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入echarts依赖包 -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<style>
div{
width: 100%;
height:600px;
}
</style>
</head>
<body>
<!-- 准备一个容器：容器就是显示图标区域 -->
<div></div>
</body>
</html>
<script>
//基于准备好的DOM初始化echarts实例
let dom = document.querySelector('div');
//创建echarts实例
let mycharts = echarts.init(dom);
//指定图表的配置项与数据
mycharts.setOption(
option = {
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#283b56'
}
},
confine:true,
formatter: function(params) {
return "";
}
},
legend:{
show: true,
selected:{'a':true,'b':true,},
data:['a','b',],
},
grid: [{
"left": 120,
"right": 30,
"top": "45px",
"backgroundColor": "#ccc",
"height": "120"
}, {
"left": 120,
"right": 30,
"top": "180px",
"backgroundColor": "#ccc",
"height": "120"
}],
"xAxis": [{
"show": false,
"gridIndex": 0,
"type": "category",
"boundaryGap": false,
"data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
"axisPointer": {
"label": {
"margin": -20
}
}
}, {
"gridIndex": 1,
"type": "category",
"boundaryGap": false,
"data": ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
"axisPointer": {
"label": {
"margin": -20
}
}
}],
"yAxis": [{
//"name": "示例1",//Y轴左边的名字
"splitArea": {
"show": true
},
"nameLocation": "center",
"nameRotate": 0,
"nameGap": 40,
"gridIndex": 0,
"splitNumber": 4,
"type": "value",
}, {
//"name": "示例2",//Y轴左边的名字
"splitArea": {
"show": true
},
"nameLocation": "center",
"nameRotate": 0,
"nameGap": 40,
"gridIndex": 1,
"splitNumber": 4,
"type": "value",
}],
"series": [{
"data": [820, 932, 901, 934, 1290, 1330, 1320],
"name": "a",//图表中上部的开关按钮
"type": "line",
"smooth": true,
"xAxisIndex": 0,
"yAxisIndex": 0,
"markLine": {
"label": {
"normal": {
"position": "end",
"formatter": "{b}"
}
},
"data": [{
"lineStyle": {
"normal": {
"color": "#FDA428"
}
},
"xAxis": 195
}]
}
}, {
"data":[820, 932, 901, 934, 1290, 1330, 1320],
"name": "b",//图表中上部的开关按钮
"type": "line",
"smooth": true,
"xAxisIndex": 1,
"yAxisIndex": 1,
"markLine": {
"label": {
"normal": {
"position": "end",
"formatter": "{b}"
}
},
"data": [{
"lineStyle": {
"normal": {
"color": "#FDA428"
}
},
"xAxis": 195
}]
}
}
]
}
);
</script>
可以把以上源代码保存为html文件然后在浏览器里打开查看效果.
目前是点击顶部的实例按钮会隐藏整个图表,
而我想达到的效果是,每个图表都有多条曲线并且想单独显示隐藏某条曲线.
有空再继续研究下.
- [ 发单/接单 ]
- ● 换IP投票软件
- ● PC蛋蛋自动挂机投注
- ● 新浪微博发微博显示尾巴的方法,比如显示来自iphone 7
- ● 百度文库批量自动上传软件
- ● 一点资讯app刷阅读量/评论/收藏/订阅功能/手机号注册
- ● 定做一个阿迪达斯官网注册器（需要破点击文字式验证码）
- ● 定制人人网自动注册/修改资料/采集/私聊软件
- ● 酷狗繁星直播网页协yi
- ● YY多功能刷订阅刷粉丝
- ● 滑块验证码本地识别
- ● 狼人杀POST QQ登录注册 获取金币数量
- ● 做个贴吧发发帖的软件懂的来
- ● 今日头条账号保存cookie
- ● 抖音粉丝软件定做,只要粉丝
- ● 百家号自媒体发文软件定制
- ● 哔哩哔哩播放量
- ● 读取TB某个商品上架时间和相关信息
- ● 网易博客软件定制
- ● 定制天涯论坛发帖软件
- ● 定制今日头条批量自动发私信软件
- [ 站内搜索 ]
- [ 最近热帖 ]
- 万能助手 -- 扩展库大全集 13766
- 用aardio创建web工程图文讲解(1) 12859
- 电脑编程入门自学:Fiddler https 抓包时提示创建根证书不成功问题彻底解决(https插件dll方式) 11755
- aardio绘图演示 11428
- 通过chrome.dll中间件控制外部chrome浏览器 10139
- 我常用的aardio技巧 9795
- 《边学C语言边赚钱——简码编程入门教程》系列集合 9627
- aardio使用http或whttp进行get/post请求时经常cookies失效怎么办？__电脑计算机编程入门教程自学 9332
- [源码下载]简码视频加密解密播放工具个人版v1.0发布,永久免费开源的知识变现神器 8566
- python人工智能爬虫系列:怎么查看python版本_电脑计算机编程入门教程自学 8061
- 编程入门教程:aardio批量上传文件并显示进度条 7902
- aardio调用nodejs的ws模块做一个简单的聊天通信示例 7052
- 电脑计算机编程入门教程自学:原生JavaScript判断字符是否为A-Za-z英文字母 6916
- 电脑计算机编程入门教程自学:腾讯tx或极验geetest滑块按住拖动完成拼图验证成功破解思路及源码 6508
- 乐玩插件AARDIO调用 6102
- [ 近期热答 ]
- 电脑计算机编程入门教程自学:什么是buffer缓冲区? 1
- aardio_代码编辑框书签管理器开源 1
- aardio_怎么用ide库从代码编辑框中取出指定行的源码? 1
- aardio_codepage代码页编码乱码暴力猜解工具 1
- aardio内嵌echarts图表添加鼠标事件响应功能 2
- aardio列表框listbox_模糊查找和精确查找 1
- 8亿QQ绑定手机泄露:通过腾讯QQ号查询QQ绑定的手机号码漏洞! 1
- carl listviewex调用例子----------源码搬运工 2
- Aardio内嵌Electron浏览框怎么正确添加启动参数? 1
- Aardio取汉字的字节数或字符数 1
- 怎么实现mssql图片数据的读写 2
- aardio_从49个数字里选六个和值为150的不重复的数字 1
- 在嵌入wps的时候，多了一个 透明的边框，这个怎么消除它 1
- 万能助手入门帮助教程:学会科学地管理工作文件 1
- Aaardio开发内嵌Electron浏览框放服务器上无法下载组件的解决办法 1
