echarts使用總結

echarts，我已經多次在不同的項目中使用（柱狀圖和餅圖用的多）。官方例子和文檔比較完備，這點我們要學百度，雖然我一向不太喜歡百度。熟能生巧，把心得與大家分享。首先看代碼：  

<script type="text/javascript" src="~/Content/js/jquery.js"></script>

<script type="text/javascript" src="~/Content/js/lib/dist/echarts.js"></script>

<script src="~/Content/js/echartStatics.js"></script>

<script type="text/javascript">

$(function () {

var subjectName = $("#SubjectId").find("option:selected").text();

var barWidth = 15;

var params = {

1: {
bar: {
title: subjectName+'xx',
containerId: 'systemSetup1',
yName: '單位（篇 ）',
splitNumber: 3,
width: barWidth
},
},
2: {
bar: {
title: subjectName + 'yy',
containerId: 'systemSetup4',
yName: '單位（名次 ）',
splitNumber: 2,
maxXDataNumber: 12,
width: barWidth
}
}
};

//獲取所有行
var trs = $("#tableDivThree tr:gt(1)");

var xs = []; //橫坐標
var data = {
1: [],
2: [],
3: [],
4: []
};

var reg = /^[\d\.]+$/;

var trim = function (t) {

return t.replace(/[\r\n\s]/g, "");
}

var push = function (array,t) {

t = t.trim();

if (!reg.test(t)) {
array.push("0");
}
else {
array.push(t);
}
};

$.each(trs, function (i,k) {

var tds = $(k).find("td");

$.each(tds, function (j,v) {
var t = $(v).text();
if (j == 0) {
xs.push(trim(t));
}
else {
push(data[j], t);
}
});
});

var width = xs.length * barWidth * 2;

if (width < 700) {

width = 700;
}
var height = width*0.618; //黃金分割

$(".reportbar").height(height).width(width);
for (var key in data) {
new repport_ViewModel(params[key], xs, data[key],$("#MyInstituteName").val());
}
});

上面代碼這么多，都是為了准備參數，實例化repport_ViewModel這個類。以下是這個類的代碼，也是核心代碼。

/*!
* Report v1.0.1
* by wbq (2016-06-16)
* Include echarts (http://echarts.baidu.com/)
*/
var repport_ViewModel = function (options,xdata,data,defaultXdata) {
var defaults = {
bar: {
name: 'bar',
colorList: [
'#2f7ed8', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
],
seriesName: '',
containerId:'',
//列寬
width: 20,

title: '',

subTitle: '',

titlePosition: 'center',
LabeltextStyle: {
fontSize: '12',
fontFamily: '微軟雅黑',
fontWeight: 'bold'
},
yAxisIsShow: true,
isYformat:true, //是否格式化Y軸刻度
boundaryGap: [0, 0], // 坐標軸兩端空白策略，數組內數值代表百分比
splitNumber: 6,
splitLine: false,
calculable: false,
maxXDataNumber:8 //橫向最大顯示數，若超過則x，y軸對調顯示
},
echartsPath: '/Content/js/lib/dist'
};

var options = $.extend(true, {}, defaults, options);

var that = this;

//條形圖
that.ChartBar=null;

//加載圖表控件
that.InitLoad = function (echartsPath) {

require.config({
paths: {
echarts: echartsPath
}
});
};

/**
* 返回Chart單例
* @method
* @param {ec} 由echarts初始化時提供
* @param {chartType} chart類型，比如bar（柱狀圖），pie（餅狀圖）
* @return {myChart} echarts對象
*/

that.GetChartInstance = function (ec, chartType,containerId) {

var myChart;

if (chartType == options.bar.name) {

if (that.ChartBar == null) {

myChart = ec.init(document.getElementById(containerId));

that.ChartBar = myChart;
}
else {

myChart = that.ChartBar;
}
}
return myChart;

};

that.BuildBarData = function (xdata,ydata) {

var xAxisData = xdata;

var data = ydata;

//列名
var seriesName = options.bar.seriesName;
//列顏色
var colorList = options.bar.colorList;
//列寬
var barWidth = options.bar.width;

var barTitle = options.bar.title;

var subTitle = options.bar.subTitle;

var barTitlePosition = options.bar.titlePosition;

var xAxis = {
type: 'category',
data: xAxisData,
axisLabel: {
interval: 0,
rotate: 45
},
splitLine: options.bar.splitLine
};

var yAxis = {
type: 'value',
show: options.bar.yAxisIsShow,
name: options.bar.yName,
boundaryGap: options.bar.boundaryGap, // 坐標軸兩端空白策略，數組內數值代表百分比
splitNumber: options.bar.splitNumber,
axisLabel: {
formatter: function (value, index) {
if (options.bar.isYformat) {
return value / 1000 + "k";
}
return value;
}
}
};

var tempAxis = xAxis;

if (xAxisData.length>options.bar.maxXDataNumber) {

xAxis = yAxis;
yAxis = tempAxis;
yAxis.axisLabel.rotate = 0;
}

var option = {

title: {
x: barTitlePosition,
text: barTitle,
subtext: subTitle,
link: ''
},

tooltip: {
show: true,
trigger: 'item'
},
legend: {
data: []
},
toolbox: {
show: false,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: options.bar.calculable,

grid: {
borderWidth:0,
y: 80,
y2: 60
},

xAxis: [
xAxis
],
yAxis: [
yAxis
],
series: [
{
name: seriesName,
type: options.bar.name,
barWidth: barWidth, // 系列級個性化，柱形寬度
itemStyle: {
normal: {
// 系列級個性化，橫向漸變填充
borderRadius: 5,
color: function (params) {
if (defaultXdata == xdata[params.dataIndex]) {
return colorList[1];
}
return colorList[0];
},
label: {
show: true,
textStyle: options.bar.LabeltextStyle,
formatter: function (params) {
var value = params.value;
if (value > 0) {
return value;
}
}
}
}
},
data: data
}
]
};

return option;
};

that.LoadChart = function () {
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {

var myChart = that.GetChartInstance(ec, options.bar.name, options.bar.containerId);
var d = that.BuildBarData(xdata,data);
myChart.clear();
myChart.setOption(d);

}
);
};
that.PageInit = function () {

that.InitLoad(options.echartsPath);
that.LoadChart();
};

that.PageInit();
};

 按模塊加載，在本例中，我需要bar，就只加載bar

require(
[
'echarts',
'echarts/chart/bar'
]