Echart组件封装

var M = {
    //入参

    //elementId 为想要放入图表的div id

    //echartId 图表的id用于召回

    //width 宽 height为高 option为图表具体数据 数据形式参考http://echarts.baidu.com/examples.html
    createEchartsInElement: function (elementId, echartId, width, height, option) {

        var targetDiv = $("#" + elementId)[0];
        var div = document.createElement("div");
        div.setAttribute('id', echartId);
        div.setAttribute('style', 'width: ' + width + 'px; height: ' + height + 'px;');
        targetDiv.appendChild(div);

        var echarts = require("./echarts.js");//同层目录下echarts

        var chartDiv = $('#' + echartId)[0];
        var myChart = echarts.init(chartDiv);
        myChart.setOption(option);
    }
};

module.exports = M;

echart.js 也可以在官网上下载全部单文件，需要修改前几行如下

(function (root, factory) {
    /*if (typeof define === 'function' && define.amd) {
     // AMD. Register as an anonymous module.
     define([], factory);
     } else*/
    if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.echarts = factory();
    }
}

使用方式

var echart = require("./common_echarts.js");

echart.createEchartsInElement('pagebar','chart',600,400,option);