echarts 一个页面多个节点共用一个图表实例
一个页面我做了6个标签页(bootstrap中的标签页功能)每个标签页是一个时间维度(年、半年、季度、月、周、日)每个标签页对应一个时间坐标系的图表,但是图表都是相同的折...
一个页面我做了6个标签页(bootstrap中的标签页功能)每个标签页是一个时间维度(年、半年、季度、月、周、日)每个标签页对应一个时间坐标系的图表,但是图表都是相同的折线图,想要一个图表实例被6个DOM节点共享,只是每个图表的时间轴和数据因节点不同而不同。
注:过程化思维是6个节点分别调用独立的实例,但是,是否可以共享同一个图表,因节点对象不同而动态的实现时间轴和数据的不同呢?
度娘搜到的都是一个页面多个图表的不同实例(不同的图表样式)因图表样式的不同,所以必须用多个图表。但是我用的是相同图表,只是时间周期不同(而每个周期里的数据庞大,无法做在一个图表里,所以需要多个相同图表加以区分)每个周期对应一个相同的图表 展开
注:过程化思维是6个节点分别调用独立的实例,但是,是否可以共享同一个图表,因节点对象不同而动态的实现时间轴和数据的不同呢?
度娘搜到的都是一个页面多个图表的不同实例(不同的图表样式)因图表样式的不同,所以必须用多个图表。但是我用的是相同图表,只是时间周期不同(而每个周期里的数据庞大,无法做在一个图表里,所以需要多个相同图表加以区分)每个周期对应一个相同的图表 展开
展开全部
没做过前端,现查了下bootstrap,它的各个标签页是不同的div,而echarts在初始化时就要绑定一个div的……所以你这个共用估计很难实现
不过图表的配置项你可以复用啊,比如写个函数:
datasetSourceObj = {
'年': [
['年', '数据'],
['2014', 31],
['2015', 41],
['2016', 59],
['2017', 26],
['2018', 53],
],
'月': [
['月', '数据'],
['1月', 14],
['2月', 14],
['3月', 21],
['4月', 35],
['5月', 62],
],
'周': [
['周', '数据'],
['第1周', 17],
['第2周', 32],
['第3周', 5],
['第4周', 8]
]
};
function createOption(dataSource){
//先把个公用的option参数配置好
res = {
title:'xxx',
dataset:{
source: dataSource
}
//后略去一堆key、value等等等…
};
return res;
};
然后你各个标签页用不同的数据生成不同的option,再setOption就行了。
————————————
或者,如果你非要复用dom,有个有些绕弯的复用办法:
你把各个标签页里的div下加个iframe,链接同一个地址、但传不同的参数
这个地址的响应是包含echarts图表的页面,而且其中的echarts图表要根据接收的参数不同,使用不同的dataset.source、及其他你需要的不同配置。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询