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

Question

一个页面我做了6个标签页（bootstrap中的标签页功能）每个标签页是一个时间维度（年、半年、季度、月、周、日）每个标签页对应一个时间坐标系的图表，但是图表都是相同的折线图，想要一个图表实例被6个DOM节点共享，只是每个图表的时间轴和数据因节点不同而不同。
注：过程化思维是6个节点分别调用独立的实例，但是，是否可以共享同一个图表，因节点对象不同而动态的实现时间轴和数据的不同呢？
度娘搜到的都是一个页面多个图表的不同实例（不同的图表样式）因图表样式的不同，所以必须用多个图表。但是我用的是相同图表，只是时间周期不同（而每个周期里的数据庞大，无法做在一个图表里，所以需要多个相同图表加以区分）每个周期对应一个相同的图表

Answer 1

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