ECharts包含了许多图表,本文主要对常用的折线图、柱状图、扇形图三种图进行封装,代码下载:http://pan.baidu.com/s/1kVHlIRX 。
封装后的ECharts代码myChart.js:
/*
*
需要的参数:
myChartName:统计图名称
myChartId:统计图id
formatterFun:格式化tooltip
xAxisData:数组,横坐标
legendData: 数组,纵坐标代表意义
seriesType: 图表类型//line,'bar'
barGap:80%
barCategoryGap:80%
seriesData:数组
*/
require.config({
paths: {
echarts: 'echarts'
}
});
function getChart(myChartId,option){
require(
[ 'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/pie',
'echarts/chart/funnel'
],function (ec) {
var myChart = ec.init(document.getElementById(myChartId));
myChart.setOption(option);
}
);
}
function myChart(myChartId,myChartName,formatterFun,legendData,xAxisData,seriesType,barGap,barCategoryGap,seriesData){
var series=[];
for(var i=0,len=legendData.length;i<len;i++){
series[i]={
name:legendData[i],
type:seriesType,
barGap:barGap,
barCategoryGap:barCategoryGap,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
formatter: '{b}\n{c}'
}
}
},
data:seriesData[i]
}
}
var option={
title : {
text: myChartName
},
tooltip : {
trigger: 'axis',
formatter: formatterFun
},
legend: {data:legendData},//data:['最高气温','最低气温'
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: false},