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"," ...
随机推荐
- 关于nginx配置虚拟主机
前提:我的虚拟主机的外网ip为111.231.226.228(是云服务器哈) 本地测试环境为windows7(修改本地的hosts文件) 步骤:(安装nginx可以看看我文章“linux ng ...
- java读取文件和写入文件的方式
https://www.cnblogs.com/fnlingnzb-learner/p/6011324.html
- httpclient新旧版本分割点4.3
从这个版本开始,httpclient的api发生了一次重大调整.主要包括如下:Release 4.3 Final ------------------- This is the first stabl ...
- 【题解】Luogu P1204 [USACO1.2]挤牛奶Milking Cows
原题传送门:P1204 [USACO1.2]挤牛奶Milking Cows 实际是道很弱智的题目qaq 但窝还是觉得用珂朵莉树写会++rp(窝都初二了,还要考pj) 前置芝士:珂朵莉树 窝博客里对珂朵 ...
- Kali系列之ettercap欺骗
ettercap在局域网中使用欺骗, 捕获对象浏览器中的图片. 环境 攻击方:kali linux, ip:192.168.137.129 目标方ip:192.168.137.130 路由器:192. ...
- 关于sql中in 和 exists 的效率问题
在用in的地方可以使用freemark标签代替,例如: 将 <#if assistantList??&& (assistantList?size > 0)> AND ...
- Codeforces 765F Souvenirs - 莫队算法 - 链表 - 线段树
题目传送门 神速的列车 光速的列车 声速的列车 题目大意 给定一个长度为$n$的序列,$m$次询问区间$[l, r]$内相差最小的两个数的差的绝对值. Solution 1 Mo's Algorith ...
- Codeforces Round #425 (Div. 2) Problem B Petya and Exam (Codeforces 832B) - 暴力
It's hard times now. Today Petya needs to score 100 points on Informatics exam. The tasks seem easy ...
- SVM学习笔记2-拉格朗日对偶
下面我们抛开1中的问题.介绍拉格朗日对偶.这一篇中的东西都是一些结论,没有证明. 假设我们有这样的问题:$min_{w}$ $f(w)$,使得满足:(1)$g_{i}(w)\leq 0,1\leq i ...
- Requests 源码阅读笔记
models.py class Request(RequestHooksMixin): def __init__(self, method=None, url=None, headers=None, ...