Echarts使用心得总结（二）

ChartOptionTemplates:{

CommonOption:{//通用的图表基本配置

tooltip:{

trigger:'axis'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发

},

toolbox:{

show:true,//是否显示工具栏

feature:{

mark:true,

dataView:{readOnly:false},//数据预览

restore:true,//复原

saveAsImage:true//是否保存图片

}

}

},

CommonLineOption:{//通用的折线图表的基本配置

tooltip:{

trigger:'axis'

},

toolbox:{

show:true,

feature:{

dataView:{readOnly:false},//数据预览

restore:true,//复原

saveAsImage:true,//是否保存图片

magicType:['line','bar']//支持柱形图和折线图的切换

}

}

},

Pie:function(data,name){//data:数据格式：{name：xxx,value:xxx}...

varpie_datas=ECharts.ChartDataFormate.FormateNOGroupData(data);

varoption={

tooltip:{

trigger:'item',

formatter:'{b}:{c}({d}/%)',

show:true

},

legend:{

orient:'vertical',

x:'left',

data:pie_datas.category

},

series:[

{

name:name||"",

type:'pie',

radius:'65%',

center:['50%','50%'],

data:pie_datas.data

}

]

};

return$.extend({},ECharts.ChartOptionTemplates.CommonOption,option);

},

Lines:function(data,name,is_stack){//data:数据格式：{name：xxx,group:xxx,value:xxx}...

varstackline_datas=ECharts.ChartDataFormate.FormateGroupData(data,'line',is_stack);

varoption={

legend:{

data:stackline_datas.category

},

xAxis:[{

type:'category',//X轴均为category，Y轴均为value

data:stackline_datas.xAxis,

boundaryGap:false//数值轴两端的空白策略

}],

yAxis:[{

name:name||'',

type:'value',

splitArea:{show:true}

}],

series:stackline_datas.series

};

return$.extend({},ECharts.ChartOptionTemplates.CommonLineOption,option);

},

Bars:function(data,name,is_stack){//data:数据格式：{name：xxx,group:xxx,value:xxx}...

varbars_dates=ECharts.ChartDataFormate.FormateGroupData(data,'bar',is_stack);

varoption={

legend:bars_dates.category,

xAxis:[{

type:'category',

data:bars_dates.xAxis,

axisLabel:{

show:true,

interval:'auto',

rotate:0,

margion:8

}

}],

yAxis:[{

type:'value',

name:name||'',

splitArea:{show:true}

}],

series:bars_dates.series

};

return$.extend({},ECharts.ChartOptionTemplates.CommonLineOption,option);

},

……..//其他的图表配置，如柱图+折线、地图

……..

}

2.4图形的渲染

Charts:{

RenderChart:function(option){

require([

'echarts',

'echarts/chart/line',

'echarts/chart/bar',

'echarts/chart/pie',

'echarts/chart/k',

'echarts/chart/scatter',

'echarts/chart/radar',

'echarts/chart/chord',

'echarts/chart/force',

'echarts/chart/map'

],

function(ec){

echarts=ec;

if(option.chart&&option.chart.dispose)

option.chart.dispose();

option.chart=echarts.init(option.container);

window.onresize=option.chart.resize;

option.chart.setOption(option.option,true);

});

},

……..//渲染其他的图表类型，如：地图

……..

}

<scriptsrc="/Scripts/jquery-1.4.1.js"type="text/javascript"></script>

<scriptsrc="/Statics/echarts/esl.js"type="text/javascript"></script>

<scriptsrc="/Statics/ECharts.js"type="text/javascript"></script>

<scripttype="text/javascript">

$(

function(){

vardata=[{name:'olive',value:20},{name:'only',value:20},{name:'momo',value:20}];

varoption=ECharts.ChartOptionTemplates.Pie(data);

varcontainer=$("#echart")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

}

);

</script>

<scripttype="text/javascript">

$(

function(){

vardata=[{name:'olive',value:20},{name:'only',value:20},{name:'momo',value:20}];

varoption=ECharts.ChartOptionTemplates.Bar(data);

varcontainer=$("#echart")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

}

);

$(

function(){

vardata=[{name:'2014-01',value:20,group:'A'},{name:'2014-01',value:40,group:'B'},{name:'2014-02',value:30,group:'A'},{name:'2014-02',value:10,group:'B'},{name:'2014-03',value:200,group:'A'},{name:'2014-03',value:60,group:'B'},{name:'2014-04',value:50,group:'A'},{name:'2014-04',value:45,group:'B'},{name:'2014-05',value:110,group:'A'},{name:'2014-05',value:80,group:'B'},{name:'2014-06',value:90,group:'A'},{name:'2014-06',value:60,group:'B'}];

varoption=ECharts.ChartOptionTemplates.Bars(data,'Love');

varcontainer=$("#echart")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

varoption=ECharts.ChartOptionTemplates.Bars(data,'Love',true);

varcontainer=$("#echart1")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

}

);

</script>

<scripttype="text/javascript">

$(function(){

vardata=[

{name:'2013-01',group:'olive',value:116},

{name:'2013-01',group:'momo',value:115},

{name:'2013-01',group:'only',value:222},

{name:'2013-01',group:'for',value:324},

{name:'2013-02',group:'olive',value:156},

{name:'2013-02',group:'momo',value:185},

{name:'2013-02',group:'only',value:202},

{name:'2013-02',group:'for',value:34},

{name:'2013-03',group:'olive',value:16},

{name:'2013-03',group:'momo',value:51},

{name:'2013-03',group:'only',value:22},

{name:'2013-03',group:'for',value:84}

];

varopt=HighChart.ChartOptionTemplates.Line(data,'Love-Rate',"折线图示例");

varcontainer=$("#container");

HighChart.RenderChart(opt,container);

});

$(

function(){

vardata=[{name:'2014-01',value:20,group:'A'},{name:'2014-01',value:40,group:'B'},{name:'2014-02',value:30,group:'A'},{name:'2014-02',value:10,group:'B'},{name:'2014-03',value:200,group:'A'},{name:'2014-03',value:60,group:'B'},{name:'2014-04',value:50,group:'A'},{name:'2014-04',value:45,group:'B'},{name:'2014-05',value:110,group:'A'},{name:'2014-05',value:80,group:'B'},{name:'2014-06',value:90,group:'A'},{name:'2014-06',value:60,group:'B'}];

varoption=ECharts.ChartOptionTemplates.Lines(data,'lines',false);

varcontainer=$("#echart")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

varoption=ECharts.ChartOptionTemplates.Lines(data,'lines',true);

varcontainer=$("#echart1")[0];

opt=ECharts.ChartConfig(container,option);

ECharts.Charts.RenderChart(opt);

}

);

</script>