echarts2.0.4单文件引入使用

标签：echarts javascript

需要引入的相关文件

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

本文出自 “幸福的小妮子” 博客，请务必保留此出处http://1723824.blog.51cto.com/1713824/1605842

echarts2.0.4单文件引入使用

标签：echarts javascript

原文地址：http://1723824.blog.51cto.com/1713824/1605842