echarts 一个页面多个节点共用一个图表实例

一个页面我做了6个标签页(bootstrap中的标签页功能)每个标签页是一个时间维度(年、半年、季度、月、周、日)每个标签页对应一个时间坐标系的图表,但是图表都是相同的折... 一个页面我做了6个标签页(bootstrap中的标签页功能)每个标签页是一个时间维度(年、半年、季度、月、周、日)每个标签页对应一个时间坐标系的图表,但是图表都是相同的折线图,想要一个图表实例被6个DOM节点共享,只是每个图表的时间轴和数据因节点不同而不同。
注:过程化思维是6个节点分别调用独立的实例,但是,是否可以共享同一个图表,因节点对象不同而动态的实现时间轴和数据的不同呢?
度娘搜到的都是一个页面多个图表的不同实例(不同的图表样式)因图表样式的不同,所以必须用多个图表。但是我用的是相同图表,只是时间周期不同(而每个周期里的数据庞大,无法做在一个图表里,所以需要多个相同图表加以区分)每个周期对应一个相同的图表
展开
 我来答
ZXand618
2018-11-22 · ECharts、Python、以及其他
ZXand618
采纳数:97 获赞数:140

向TA提问 私信TA
展开全部

没做过前端,现查了下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、及其他你需要的不同配置。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式