# echartJquery
**Repository Path**: d3Object/echartJquery
## Basic Information
- **Project Name**: echartJquery
- **Description**: 封装echarts线图
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 2
- **Created**: 2019-08-05
- **Last Updated**: 2021-04-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 封装echarts线图echartJquery
```
/**
* 绘图工具
*
* 初始化js条件
*
*
*
*
*/
$(function() {
var drawChartUtil = {
/**
* 上下文
*/
doc : window.document,
/**
* echart工具
*/
echartUtil : {
/**
* 线图
* @param chart echart实例
* @param data Object 后端数据
* @param isNewChart boolean 是否为新建图表
* @param option {} 选项参数 {
* dataZoom: true | false 是否开启缩放
* dataZoomFun: 缩放回调函数，只有在dataZoom为true时，该参数有效
* }
*/
drawLine: function(chart, data, isNewChart, option) {
var drawData = data.data, legend = [], drawKey = [],
drawValue = [], single = null, tmp = null, svals = null;
for (var i = 0, len = drawData.length; i < len; i ++) {
single = drawData[i];
legend.push(single.name);
svals = single.value;
drawValue = [];
for (var j = 0, jlen = svals.length; j < jlen; j ++) {
tmp = svals[j];
for (var key in tmp) {
if(i == 0) {
drawKey.push(new Date(key * 1000).format('hh:mm:ss'));
}
drawValue.push(tmp[key]);
}
}
single.clipOverflow = false;
single.type = 'line';
single.data = drawValue;
}
var chartOption = {
grid: {
top: 40
},
legend: {
left : 'center',
bottom : 6,
textStyle: {
color: '#CCCCCC'
},
data: legend
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
},
data: drawKey
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#CCCCCC'
}
}
},
series: drawData
};
this.chartSubTitle(data.data, chartOption);
this.chartDataZoom(option, chartOption);
chart.setOption(chartOption);
if(isNewChart && option.dataZoom && option.dataZoomFun) {
var dataValue = drawData[0].value,
getKey = this.getKey;
chart.on('dataZoom', function(e) {
var startIndex = 0, endIndex = 0,
batch = e.batch[0];
if(batch.start == 0 && batch.end == 100) { // 还原状态
startIndex = 0;
endIndex = dataValue.length - 1;
} else { // 缩放状态
startIndex = batch.startValue;
endIndex = batch.endValue;
}
option.dataZoomFun(getKey(dataValue[startIndex]), getKey(dataValue[endIndex]));
});
}
},
/**
* 线图
* @param chart echart实例
* @param data Object 后端数据
* @param isNewChart boolean 是否为新建图表
* @param option {} 选项参数 {
* clickFun: 饼图点击回调函数
* }
*/
drawPie: function(chart, data, isNewChart, option) {
var drawData = data.data;
var legend = [];
for(var i = 0, len = drawData.length; i < len; i ++) {
legend.push(drawData[i].name);
}
var chartOption = {
tooltip: {
trigger: 'item',
formatter: "{b} : {d}%"
},
legend: {
type: 'scroll',
orient: 'vertical',
x: 'left',
top: 20,
left: 20,
textStyle: {
color: '#CCCCCC'
},
data: legend
},
series: {
type : 'pie',
center: ['50%', '55%'],
roseType : 'area',
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data : drawData
}
};
// this.chartTitle(data, chartOption);
chart.setOption(chartOption);
if(isNewChart && option.clickFun) {
chart.on('click', function(p) {
option.clickFun(p.data);
});
}
},
/**
* 设置图表表头
* @param data 源数据
* @param chartOption 图标参数
*/
chartTitle: function(data, chartOption) {
var starttime = data.starttime,
endtime = data.endtime,
plotName = data.plotName;
chartOption.title = {
text: plotName,
textStyle: {
color: '#CCCCCC'
},
left: 'center',
subtext: new Date(starttime * 1000).format('yyyy-MM-dd hh:mm:ss') +
' 至 ' + new Date(endtime * 1000).format('yyyy-MM-dd hh:mm:ss')
};
},
/**
* 线图添加极值信息
* @param data 源数据
* @param chartOption 图表参数
*/
chartSubTitle: function(data, chartOption) {
var max = 0, min = 0, avg = 0, sum = 0,
sumlen = 0, maxtmp = -1, mintmp = -1, datatmp = null;
for (var i = 0, len = data.length; i < len; i ++) {
datatmp = data[i].data;
maxtmp = Math.max.apply(null, datatmp);
mintmp = Math.min.apply(null, datatmp);
if(maxtmp > max && maxtmp != -1) {
max = maxtmp;
}
if(mintmp < min && mintmp != -1) {
min = mintmp;
}
sumlen += datatmp.length;
for(var j = 0, jlen = datatmp.length; j < jlen; j ++) {
sum += datatmp[j];
}
}
avg = (sum / sumlen).toFixed(2);
chartOption.title = {
left: 'center',
subtext: "最大值: " + max + " 平均值: " + avg + " 最小值: " + min
};
},
/**
* 是否开启图形缩放
* @param option 开启参数
* @param chartOption 图表参数
*/
chartDataZoom: function(option, chartOption) {
if(option.dataZoom) {
chartOption.toolbox = {
feature: {
dataZoom: {
yAxisIndex: false,
title: {
zoom: '缩放',
back: '还原'
}
}
}
}
}
},
/**
* 获取第一个key值
* @param obj 源数据
*/
getKey: function(obj) {
var key = 0;
for(var k in obj) {
key = k;
break;
}
return parseInt(key);
}
},
/**
* 画图总入口
* @param domId String
* @param titleId String
* @param url String
* @param params {}
* @param option {}
*
*/
drawChart : function(domId, titleId, url, params, option) {
var echartUtil = this.echartUtil,
chartDom = this.doc.getElementById(domId),
myChart = echarts.getInstanceByDom(chartDom),
isNewChart = false;
if(!option) { // 参数选项初始化
option = {};
}
if(!myChart) {
myChart = echarts.init(chartDom, 'macarons');
isNewChart = true;
}
myChart.showLoading();
$.ajax({
url : url,
type : 'POST',
async : true,
data : params,
timeout : 5000,
dataType : 'json',
success : function(data) {
switch (data.type) {
case 'line' : echartUtil.drawLine(myChart, data, isNewChart, option); break;
case 'pie' : echartUtil.drawPie(myChart, data, isNewChart, option); break;
}
$("#" + titleId).text(data.plotName);
},
error : function(xhr, status) {
console.error('图形数据出现错误');
console.error(xhr);
},
complete : function() {
myChart.hideLoading();
}
});
},
/**
* 图形销毁
* @param domId String 节点ID
*
*/
chartDispose : function(domId) {
echarts.dispose(this.doc.getElementById(domId));
},
/**
* 图形重置大小
* @param domId String 节点ID
* @param width number|String 宽度
* @param height number|String 高度
*
*/
chartResize : function(domId, width, height) {
var option = {
width: 'auto',
height: 'auto'
};
if(width) {
option.width = width;
}
if(height) {
option.height = height;
}
var chartDom = this.doc.getElementById(domId);
echarts.getInstanceByDom(chartDom).resize({
opts : option
});
}
};
// 封装入jQuery
$.extend({
/**
* 画图总入口
* @param domId String 节点ID
* @param titleId String 表头ID
* @param url String 访问URL
* @param params {} 后端参数
* @param option {
* line: {
* dataZoom: true | false 是否开启缩放
* dataZoomFun: 缩放回调函数，只有在dataZoom为true时，该参数有效
* }
*
* pie: {
* clickFun: 饼图点击回调函数
* }
* }
*/
drawChart: function(domId, titleId, url, params, option) {
drawChartUtil.drawChart(domId, titleId, url, params, option);
},
/**
* 图形销毁
* @param domId 节点ID
*/
chartDispose : function(domId) {
drawChartUtil.chartDispose(domId);
},
/**
* 图形重置大小
* @param domId String 节点ID
* @param width number|String 宽度
* @param height number|String 高度
*/
chartResize : function(domId, width, height) {
drawChartUtil.chartResize(domId, width, height);
}
});
});
```