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"," ...
随机推荐
- Prometheus监控学习笔记之Prometheus普罗米修斯监控入门
0x00 概述 视频讲解通过链接网易云课堂·IT技术快速入门学院进入,更多关于Prometheus的文章. Prometheus是最近几年开始流行的一个新兴监控告警工具,特别是kubernetes的流 ...
- Python3 Iterator and Generator
Python3 Iterator and Generator iterator 主要是利用 iter 函数 >>> list=[1,2,3,4] >>> it = ...
- 第三周作业HAproxy文件操作
#coding:utf-8 #Author:Mr Zhi """ HAproxy配置文件操作: 1. 根据用户输入输出对应的backend下的server信息 2. 可添 ...
- TCP 的那些事儿（下）(转)
原文地址:http://kb.cnblogs.com/page/209101/ 作者: 陈皓 来源: 酷壳 发布时间: 2014-05-29 00:17 阅读: 18122 次 推荐: 19 ...
- 主动攻击：利用ms08_067_netapi进行攻击
利用ms09_053_wins进行攻击 ms08_067漏洞 如果用户在受影响的系统上收到特制的 RPC 请求,则该漏洞可能允许远程执行代码. 在 Microsoft Windows 2000.Win ...
- python---02.while循环 格式化输出 运算符 编码
一.while循环语句 1.while 条件:(如果条件是真, 则直接执⾏循环体. 然后再次判断条件. 直到条件是假. 停⽌循环) 循环体(break continue) 2. break: 立刻跳 ...
- HDU 5929 Basic Data Structure（模拟 + 乱搞）题解
题意:给定一种二进制操作nand,为 0 nand 0 = 10 nand 1 = 1 1 nand 0 = 1 1 nand 1 = 0 现在要你模拟一个队列,实现PUSH x 往队头塞入x,POP ...
- 笔记本电脑切换到无线热点无法联网问题&Spring Cloud相关工程启动报错问题
通过禁用本地网络,和禁用另一个无线网络,以及禁用后重开,修改密码,重连的方式均失败后, 使用IE浏览器浏览提示失败,点击诊断,诊断出DNS服务器无响应异常. 突然想到通过ipconfig查看ip,网关 ...
- Java 实现一个自己的显式锁Lock(有超时功能)
Lock接口 package concurency.chapter9; import java.util.Collection; public interface Lock { static clas ...
- 集合01_List
List集合总览 元素有序,可重复,可通过索引访问 增加了通过索引操作集合的方法,如: Object get(int index) Object remove(int index) void sort ...