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"," ...
随机推荐
- org.springframework.beans.factory.BeanCreationException,Invocation of init method failed,Context initialization failed
G:\javaanzhuang\apache-tomcat-\bin\catalina.bat run [-- ::,] Artifact ssm_qingmu02_web:war exploded: ...
- 把你的Centos设置成代理ip服务器
前言:最近在公司做爬虫相关的工作,做过数据抓取的都知道,写程序抓取数据的过程并不像平常我们用浏览器打开网页那么简单!大多数的网站为了自己站点的性能和数据安全都设置了各种反爬策略.最常见的就是添加验证码 ...
- Docker学习笔记之通过 Dockerfile 创建镜像
0x00 概述 由于 Docker 镜像的结构优势,使它的占用空间远小于普通的虚拟机镜像,而这就大幅减少了 Docker 镜像在网络或者其他介质中转移所花费的时间,进而提高了我们进行迁移部署的效率.不 ...
- Python语言知识总结
1. 环境 1.1 Anaconda 抛弃python原生安装方式吧,使用Anaconda才是最省心的. 1.2 Miniconda Anaconda 太大了,Miniconda才是王道!下载链接:h ...
- python简说（十六）第三方模块安装
安装第三模块 1.pip install xxx pip问题 1.提示没有pip命令的, 把python的安装目录. 安装目录下面的scripts目录加入到环境变量里面 2.Unknown or un ...
- Cannot add foreign key constraint @ManyToMany @OneToMany
最近在使用shiro做权限管理模块时,使用的时user(用户)-role(角色)-resource(资源)模式,其中user-role 是多对多,role-resource 也是多对多.但是在使用sp ...
- 分块读取Blob字段数据(MSSQL)
MSSQL中提供了一个功能,能够分块读取Blob字段中的数据,写了一个存储过程代码如下: CREATE PROCEDURE PRO_GET_FILE_DATA @PKG_ID INT, ...
- upc组队赛1 流连人间的苏苏
流连人间的苏苏 题目描述 苏苏在做红尘仙的任务时,发现坐落于风景秀丽.四季如春的昆明市的云南中医学院. 没过多久,苏苏就喜欢上了这个学校.以致于苏苏忘了回涂山的时间,现在她只剩下d天的时间待在云南中医 ...
- 最最简单的c语言函数汇编分析
0x01 环境 xp+vc6.0 0x02 代码 int plus(int x, int y) { return 0; } 以下是vc6.0的反汇编窗口 1: int plus(int x, int ...
- hihoCoder week13 最近公共祖先·一
用的dfs,自下往上搜索一个节点的所有祖先,然后在相应祖先 判断是否是另一个节点的祖先,如果是 就截止,否则继续往上搜索,直到搜索到,或者知道所有的祖先都被扫描完成 #include <bits ...