echarts2.0.4單文件引入使用

需要引入的相關文件

1. 引入es1.js

2. echarts-plain-map.js

3. echart.js

相關圖的公共方法：

/**
 * echarts 折線圖
 * @param categories  橫座標
 * @param series      數據列
 * @param id          圖ID
 * @param targetnames 類項目（對應圖例）
 */
function initLineEcharts(categories,series,id,targetnames){
    var  domMain=document.getElementById(id);
 var  myChart=echarts.init(domMain);
   var  option={
   tooltip : {
        trigger: 'axis'
    },
    legend: {
      data:targetnames.split(","),
      y:'bottom',
      padding:0
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : categories
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series:series
   };
   myChart.setOption(option);
   // 隨瀏覽器大小改變
   window.onresize = myChart.resize;
return option;
}

調用方法：

var chartOption=initLineEcharts(categories,series,"chart",properties);

initTheme("theme-select1",chartOption,"chart");

其中initTheme 是用來初始化Theme主題。

function initTheme(themeId,chartOption,id){
var themeSelector = $('#'+themeId);
if (themeSelector) {
    themeSelector.html(
        '<option selected="true" name="default">default</option>'
        +'<option  name="macarons">macarons</option>' 
        + '<option name="infographic">infographic</option>'
        + '<option name="shine">shine</option>'
        + '<option name="dark">dark</option>'
        + '<option name="blue">blue</option>'
        + '<option name="green">green</option>'
        + '<option name="red">red</option>'
        + '<option name="gray">gray</option>'
       
    );
    var myChart;
    $(themeSelector).on('change', function(){
       var  domMain=document.getElementById(id);
        myChart=echarts.init(domMain);
        myChart.setOption(chartOption);
        selectChange($(this).val());
    });
   
    function selectChange(value){
        var theme = value;
        myChart.showLoading();
        $(themeSelector).val(theme);
        if (theme != 'default') {
            window.location.hash = value;
            require(['theme/' + theme], function(tarTheme){
                curTheme = tarTheme;
                setTimeout(refreshTheme, 500);
            })
        }
        else {
            window.location.hash = '';
            curTheme = {};
            setTimeout(refreshTheme, 500);
        }
        // 隨瀏覽器大小改變
 window.onresize = myChart.resize;
    }
    function refreshTheme(){
    myChart.hideLoading();
    myChart.setTheme(curTheme);
    }
    if ($(themeSelector).val(hash).val() != hash) {
        $(themeSelector).val('macarons');
        hash = 'macarons';
        window.location.hash = hash;
    }
}
 
}