如何在Echarts上导入模块化包?

时间:2016-06-09 03:36:54

标签: javascript angularjs echarts

我想知道如何在Echarts上导入模块化包?我在这个链接中阅读了他们的文档,

Echarts Documentation

但我还是不知道怎么做 我必须把那段代码放在哪里?

require.config({
packages: [
    {
        name: 'echarts',
        location: '../../src',
        main: 'echarts'
    },
    {
        name: 'zrender',
        location: '../../../zrender/src', 
        main: 'zrender'
    }
]
});

这是我的图表的代码:

var option = {
tooltip : {
    trigger: 'axis'
},
legend: {
    data:['a','b']
},
toolbox: {
    show : true,
    feature : {
        mark : {show: true},
        dataView : {readOnly:false},
        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        restore : {show: true},
        saveAsImage : {show: true}
    }
},
calculable : true,
dataZoom : {
    show : true,
    realtime : true,
    start : 40,
    end : 60
},
xAxis : [
    {
        type : 'category',
        boundaryGap : true,
        data : ['sorong','papua','banjarmasin']
    }
],
yAxis : [
    {
        type : 'value'
    }
],
series : [

    {
        name:'b',
        type:'bar',
        data:[23,34,56]
    }
]
};

var ecConfig = require('echarts/config');
function eConsole(param) {
    var mes = '';
    if (typeof param.seriesIndex != 'undefined') {
    window.open("/"+param.name, '_blank');
    win.focus(); 
}
if (param.type == 'hover') {
    document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
}
else {
    document.getElementById('console').innerHTML = mes;
}
console.log(param);
}

return myChart.setOption(option).on(ecConfig.EVENT.CLICK, eConsole);

1 个答案:

答案 0 :(得分:0)

您应该看到文档下方的文字。

//from echarts example

... <script src="./js/echarts.js"></script> <script type="text/javascript"> require.config({ paths: { echarts: './js/dist' } }); require( [ 'echarts', 'echarts/chart/line', // load-on-demand, don't forget the Magic switch type. 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); } ); </script>