echarts 拼图和折线图的封装 及常规处理
1.html
<div id="wrap"></div>
2.js
; (function ($) {
$.fn.extend({
echartsPie: function (obj) {
// 默认配置
var defaultConfig = {
id: this.attr("id"),
color: ['#2ba4db', '#5172bf', '#935ebf', '#c654a2', '#54b9cd'],
legend: {
icon: "circle",
orient: "vertical",
xy: ["60%", "20%"], //控制图例位置
color: "#83868d"
},
noData: {
mainTitle: "无统计数据",
subTitle: "以下为模拟效果数据",
x: "center"
},
series: {
type: 'pie',
radius: ['50%', '70%'], //控制内圆半径：默认为0，即实心圆.
center: ['30%', '50%'],
startAngle: 0
},
tooltip: {
trigger: 'none',
showContent: false
},
defaultData: [{
value: 30,
name: '电影院'
}, {
value: 30,
name: 'KTV'
}, {
value: 40,
name: '餐饮'
}]
};
var actConfig = $.extend(true, {}, defaultConfig, obj);
// 数据处理
if (actConfig.data.length) {
actConfig.noData.mainTitle = "";
actConfig.noData.subTitle = "";
} else {
actConfig.data = actConfig.defaultData;
};
var compoundObj = getData(actConfig.data);
var proportionArr = proportion(compoundObj.vals);
var isAllZero=allZero(compoundObj.vals);
var legendData = [];
$.each(compoundObj.labels, function (i, v) {
var curObj = {};
curObj.name = v;
curObj.icon = actConfig.legend.icon;
legendData.push(curObj);
});
var option = {
title: {
text: actConfig.noData.mainTitle,
subtext: actConfig.noData.subTitle,
x: actConfig.noData.x
},
tooltip: {
trigger: actConfig.tooltip.trigger,
showContent: actConfig.tooltip.showContent,
},
color: actConfig.color,
legend: {
orient: actConfig.legend.orient,
x: actConfig.legend.xy[0],
y: actConfig.legend.xy[1],
itemWidth: 14,
itemHeight: 14,
textStyle: {
fontSize: 14,
color: actConfig.legend.color,
},
itemGap: 30,
formatter: function (name) {
if(isAllZero){
return "0.00% "+ name;
};
var str = mapArr(name, compoundObj.labels, proportionArr);
var spaceStr = addSpace(str, proportionArr) + " ";
return " " + mapArr(name, compoundObj.labels, proportionArr) + "%" + spaceStr + name;
},
data: legendData
},
calculable: false,
series: [{
name: '',
type: actConfig.series.type,
// silent: true,
// hoverAnimation: false,
radius: actConfig.series.radius,
center: actConfig.series.center,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: false,
position: 'inner',
formatter: "{b}({c})\n{d}%"
}
}
},
data: compoundObj.objSrc
}]
};
// api 调用
var myChart = echarts.init(document.getElementById(actConfig.id));
myChart.showLoading({
text: "图表数据正在努力加载...",
effect: 'whirling',
textStyle: {
fontSize: 20
}
});
myChart.setOption(option);
myChart.hideLoading();
return this;
},
echartsLine: function (obj) {
// 默认配置
var defaultConfig = {
id: this.attr("id"),
color: ["#79be56", "#935ebf", "#c654a2"],
type: "line",
grid: [80, 60, 80, 60],
noData: {
mainTitle: "无统计数据",
subTitle: "以下为模拟效果数据",
x: "center"
},
defaultData: [{
data: [397, 2096, 396],
name: "认证人次",
date: ['6/12', '7/12', '8/12']
}, {
data: [1097, 2046, 3096],
name: "上网人次"
}, {
data: [97, 2006, 196],
name: "短信量"
}]
};
var actConfig = $.extend(true, {}, defaultConfig, obj);
// 数据处理
if (actConfig.data.length) {
actConfig.noData.mainTitle = "";
actConfig.noData.subTitle = "";
} else {
actConfig.data = actConfig.defaultData;
};
var compoundObj = getDataLine(actConfig.data);
var seriesConfig = [];
$.each(actConfig.data, function (i, v) {
var middle = {};
middle.name = actConfig.data[i].name;
middle.type = actConfig.type;
middle.symbol = 'emptyCircle';
middle.legendHoverLink = false;
middle.smooth = false;
middle.symbolSize = 3;//拐点大小
middle.itemStyle = {
normal: {
color: actConfig.color[i],
},
emphasis: {
color: actConfig.color[i],
}
};
middle.data = actConfig.data[i].data;
seriesConfig.push(middle);
});
var option = {
// title: {
// text: actConfig.noData.mainTitle,
// subtext: actConfig.noData.subTitle,
// x: actConfig.noData.x
// },
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(50,50,50,0)",
axisPointer: {
type: 'none'
},
formatter: function (params) {
return tooltipFormat(params);
}
},
legend: {
data: compoundObj.labels,
// padding:50, //设置图例内间距
textStyle: {
fontSize: 14,
color: "#83868d",
},
},
grid: {
borderWidth: 0,
x: actConfig.grid[0], //坐标轴与容器左侧间距，字符串格式设置百分比:"6%"
y: actConfig.grid[1],
x2: actConfig.grid[2],
y2: actConfig.grid[3]
},
calculable: false,
xAxis: [{
type: 'category',
data: actConfig.data[0].date.map(function (str) {
return str.replace(' ', '\n')
}),
splitLine: {
show: false //控制网格线是否显示
},
axisPointer: {
type: 'none'
},
axisTick: {
show: false //刻度线是否显示
},
splitArea: {
show: false, //分隔区域
},
axisLine: {
lineStyle: {
color: "#D7D7D7",
}
},
axisLabel: {
color: '#000',
},
}],
yAxis: [{
type: 'value',
splitLine: {
show: true //控制网格线是否显示
},
axisTick: {
show: false //刻度线是否显示
},
splitArea: {
show: false, //分隔区域
},
axisLine: {
lineStyle: {
color: "#D7D7D7",
}
},
axisLabel: {
color: '#000',
},
}],
series: seriesConfig
};
var myChart = echarts.init(document.getElementById(actConfig.id));
myChart.showLoading({
text: "图表数据正在努力加载...",
effect: 'whirling',
textStyle: {
fontSize: 20
}
});
myChart.setOption(option);
myChart.hideLoading();
}
});
//饼图
//全零判断
function allZero(arr){
var m=0;
for(var i=0,j=arr.length;i<j;i++){
if(arr[i]==0){
m++;
}
}
return m==j;
}
// arr 求和
function sumArr(arr) {
var num = 0;
for (var i = 0, j = arr.length; i < j; i++) {
num = num + (arr[i] - 0);
}
return num;
}
// 获取占比
function proportion(arr) {
var arrBack = [];
for (var i = 0, j = arr.length; i < j; i++) {
var current = ((arr[i] - 0) / sumArr(arr) * 100 - 0).toFixed(2);
arrBack.push(current);
}
return arrBack;
}
// 关联两个等长数组：通过一个数组的值获取另一个数组对应位置的值
function mapArr(val, arr, arrTo) {
for (var i = 0, j = arr.length; i < j; i++) {
if (val == arr[i]) {
return arrTo[i];
}
}
}
// 对齐效果：补空格
function addSpace(str, arr) {
var space = "";
var len = 1;
for (var m = 0, n = arr.length; m < n; m++) {
if (arr[m].length >= len) {
len = arr[m].length;
}
}
for (var m = 0; m < len - str.length; m++) {
space = space + " ";
}
return space;
}
// 返回一个复合对象包含 labels、vals、映射 name > val、自身
function getData(obj) {
var compoundObj = {};
compoundObj.labels = [];
compoundObj.vals = [];
compoundObj.objMap = {};
compoundObj.objSrc = obj;
$.each(obj, function (i, v) {
compoundObj.labels.push(v.name);
compoundObj.vals.push(v.value);
compoundObj.objMap[v.name] = v.value;
});
return compoundObj;
}
// 折线图
function tooltipFormat(obj) {
var str = '<div style="padding-left:10px;width:200px;height:20px;font-size:14px;background-color:#54b9cd;color:#fff;">'
+ obj[0].name
+ '</div>'
+ '<div style="width:200px;border:1px solid #54b9cd;background-color:#fff;">';
$.each(obj, function (i, v) {
str = str
+ '<p>'
+ '<span style="margin-left:10px;margin-right:10px;font-size:12px;color:#9299a1;">'
+ v.seriesName
+ ':</span>'
+ '<span style="font-size:14px;font-weight:700;color:#54b9cd;">'
+ v.value
+ '</span>'
+ '</p>';
});
str = str + '</div></div>';
return str;
}
// 返回一个复合对象包含 dates、vals、labels
function getDataLine(obj) {
var compoundObj = {};
compoundObj.labels = [];
compoundObj.vals = [];
compoundObj.dates = [];
compoundObj.objSrc = obj;
$.each(obj, function (i, v) {
compoundObj.labels.push(v.name);
compoundObj.vals.push(v.value);
compoundObj.dates.push(v.date);
});
return compoundObj;
}
})(jQuery);
2.1 使用
success: function (result) {
var config = {
data: [{
data: result.statValue[1],
name: "name1",
date: result.statDate
}, {
data: result.statValue[0],
name: "name2"
}, {
data: result.statValue[2],
name: "name3"
}]
};
$("#wrap").echartsLine(config);
}
success: function (data) {
var config = {
data: []
};
$.each(data, function (i, v) {
var medium = {};
medium.name = v.name;
medium.value = v.avgNetTime;
config.data.push(medium);
});
$("#wrap").echartsPie(config);
}
success: function (data) {
var config = {
data: [],
color: ['#54b9cd', '#5172bf', '#935ebf', '#c654a2'],
series: {
radius: "70%",
startAngle: 270
},
defaultData: [{
value: 30,
name: 'name1'
}, {
value: 30,
name: 'name2'
}, {
value: 40,
name: 'name3'
}]
};
$.each(data, function (i, v) {
var medium = {};
medium.name = v.authTypeName;
medium.value = v.authSuccessCount;
config.data.push(medium);
});
$("#wrap").echartsPie(config);
}
echarts 拼图和折线图的封装 及常规处理的更多相关文章
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- 百度推出的echarts，制表折线图柱状图饼图等的超级工具(转)
一.简介: 1.绘制数据图表,有了它,想要网页上绘制个折线图.柱状图,从此easy. 2.使用这个百度的echarts.js插件,是通过把图片绘制在canvas上在显示在页面上. 官网对echarts ...
- echarts简单的折线图
加jar包 <script src="<%=path %>/js/echarts.min.js"></script> 首先 在jsp页面中 选好 ...
- 【前端统计图】echarts实现单条折线图
五分钟上手: 图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- echarts多条折线图
折线图单只比较好配置,但是多只的话,楼主整整难了一下午才搞出来,下面分享下啦 var myChart = echarts.init(document.getElementById('series-ch ...
- 在微信小程序中使用 echarts 图片-例 折线图
首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
- echarts多条折线图和柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- 【前端统计图】echarts多条折线图和横柱状图实现
参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...
- 一个手机图表(echarts)折线图的封装
//定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a"," ...
随机推荐
- kivy 小demo
from kivy.lang.builder import Builder from kivy.uix.boxlayout import BoxLayout from kivy.app import ...
- 给PXC集群加密
MySQL的复制时明文的,不管是集群的复制还是IST/SST,直接通过抓包就可以抓取数据. 生成证书 直接使用 mysql_ssl_rsa_setup mysql_ssl_rsa_setup --da ...
- linux apidoc的安装和使用
1.先去官网下载已编译好的安装包 以Centos7.4 64位为例, 下载地址: https://nodejs.org/dist/v8.1.2/node-v8.1.2-linux-x64.tar.xz ...
- P1288 取数游戏II
luogu原题 最近刚学了博弈论,拿来练练手qwq 其实和数值的大小并没有关系 我们用N/P态来表示必胜/必败状态 先在草稿纸上探究硬币♦在最左侧(其实左右侧是等价的)的一条长链的N/P态,设链长为n ...
- 应使用sqlplus代替tnsping进行oracle连通性测试
一直以来,都习惯于tnsping alias测试确定使用了那个sqlnet.ora,并测试连通性.最近在制作系统的安装包,为了轻量级以及提高实施效率,全部客户端使用oracle instant cli ...
- log4j升级到logback
虽然现在log4j已经基本上不更新很久了,但实际上升级log4j到logback最大的难度并不在于本身的替换,而是现有大量的三方jar依然使用log4j,以至于无法100%的exclude掉,所以很有 ...
- unknown variable 'log_bin_basename'
今天在处理一问题时,在my.cnf中设置了log_bin_basename=/DATA/log-bin,在启动时报unknown variable 'log_bin_basename' 经查mysql ...
- matlab的三维绘图和四维绘图
一.三维绘图1.曲线图plot3(X1,Y1,Z1,...):以默认线性属性绘制三维点集(X1,Y1,Z1)确定的曲线plot3(X1,Y1,Z1,LineSpec):以参数LineSpec确定的线性 ...
- bzoj 3262 陌上花开 - CDQ分治 - 树状数组
Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...
- linux 压缩工具
gzip gunzip zcat bzip2 bunzip2 bzcat xz unxz xzcat a: gzip 用法 # gzip file 压缩文件 不会保留源文件 直接生成 file.g ...