Echart组件封装

来源：互联网发布：sybase用户数据库别名编辑：程序博客网时间：2024/06/12 00:21

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);

0 0