实战过程中，一行一行的代码，一个一个的需求，攒起来的。
常用
import CONFIG from '../../../api/config' // 接口配置文件
import crypto from 'crypto'; // 加密依赖
import $Power from '../config/power'; // 项目权限配置模块
//个位数字补零
export function numberB0(n) {
return n < 10 ? '0' + n : n;
}
// 得到 2019-07-27 格式的日期数组，区间为7天
export function getSevenDays() {
var date = new Date();
let nowDate = date.getFullYear() + "-" + numberB0((date.getMonth() + 1)) + "-" + numberB0(date.getDate());
let oldDate = new Date(date.setTime(date.getTime() - 3600 * 1000 * 24 * 6)).toJSON();
let oldDates = oldDate.split("T");
oldDate = oldDates[0];
return [oldDate, nowDate];
}
// 同上,但不包括今日
export function getSevenDays2() {
var date = new Date();
let nowDate = new Date(date.setTime(date.getTime() - 3600 * 1000 * 24 * 1)).toJSON();
let nowDates = nowDate.split("T");
nowDate = nowDates[0];
let oldDate = new Date(date.setTime(date.getTime() - 3600 * 1000 * 24 * 6)).toJSON();
let oldDates = oldDate.split("T");
oldDate = oldDates[0];
return [oldDate, nowDate];
}
/**
* 将接口返回的日期（12344518976156）转换成（2019-10-10）
* 将接口返回的标准格式日期（Wed Oct 14 2020 10:26:34 GMT+0800 (中国标准时间)）转换成（2019-10-10）
* */
export function dateChange(date) {
let d = new Date(date);
return d.getFullYear() + "-" + numberB0((d.getMonth() + 1)) + "-" + numberB0(d.getDate());
}
/**
* 将接口返回的日期（12344518976156）转换成（23:59:59）
* 将接口返回的标准格式日期（Wed Oct 14 2020 10:26:34 GMT+0800 (中国标准时间)）转换成（23:59:59）
* */
export function monthChange(date) {
let d = new Date(date);
return d.getFullYear() + "-" + numberB0((d.getMonth() + 1))
}
/**
* 将接口返回的日期（12344518976156）转换成（23:59:59）
* 将接口返回的标准格式日期（Wed Oct 14 2020 10:26:34 GMT+0800 (中国标准时间)）转换成（23:59:59）
* */
export function timeChange(date) {
let d = new Date(date);
return numberB0(d.getHours()) + ":" + numberB0(d.getMinutes()) + ":" + numberB0(d.getSeconds());
}
export function timeHMChange(date) {
let d = new Date(date);
return numberB0(d.getHours()) + ":" + numberB0(d.getMinutes());
}
/**
* 将接口返回的日期时间（12344518976156）转换成（2020-10-14 23:59:59）
* 将接口返回的标准格式日期（Wed Oct 14 2020 10:26:34 GMT+0800 (中国标准时间)）转换成（2020-10-14 23:59:59）
* */
export function dateTimeChange(date) {
if(date === "" || date === null) return date;
let d = new Date(date);
return d.getFullYear() + "-" + numberB0((d.getMonth() + 1)) + "-" + numberB0(d.getDate())+" "+numberB0(d.getHours()) + ":" + numberB0(d.getMinutes()) + ":" + numberB0(d.getSeconds());
}
/**
* getNowTime - 获取当前日期时间:2019-10-10 10:10:20
* axios.js在用
* */
export function getNowTime() {
var date =new Date();
return date.getFullYear() + "-" + numberB0((date.getMonth() + 1)) + "-" + numberB0(date.getDate()) + " " + numberB0(
date.getHours()) + ":" + numberB0(date.getMinutes()) + ":" + numberB0(date.getSeconds());
}
/**
* 传入[开始日期, 结束日期]
* 返回格式[2020-10-01 00:00:00, 2020-10-01 23:59:59]
* tag: 1，补时分秒
* 2，补分秒
* 3，补秒
* */
export function dateQjChange(list, tag) {
if(list[0] === "" || list[0] === null) return list;
let d1 = new Date(list[0]);
let d2 = new Date(list[1]);
if(tag === undefined){
tag = 1;
}
switch(tag) {
case 1:
return [d1.getFullYear() + "-" + numberB0((d1.getMonth() + 1)) + "-" + numberB0(d1.getDate()) + " 00:00:00",
d2.getFullYear() + "-" + numberB0((d2.getMonth() + 1)) + "-" + numberB0(d2.getDate()) + " 23:59:59"];
case 2:
return [d1.getFullYear() + "-" + numberB0((d1.getMonth() + 1)) + "-" + numberB0(d1.getDate()) + " " + numberB0(d1.getHours()) + ":00:00",
d2.getFullYear() + "-" + numberB0((d2.getMonth() + 1)) + "-" + numberB0(d2.getDate()) + " " + numberB0(d2.getHours()) + ":59:59"];
break;
case 3:
return [d1.getFullYear() + "-" + numberB0((d1.getMonth() + 1)) + "-" + numberB0(d1.getDate()) + " " + numberB0(d1.getHours()) + ":" + numberB0(d1.getMinutes()) + ":00",
d2.getFullYear() + "-" + numberB0((d2.getMonth() + 1)) + "-" + numberB0(d2.getDate()) + " " + numberB0(d2.getHours()) + ":" + numberB0(d2.getMinutes()) + ":59"];
break;
}
}
/**
* getNowTime2 - 获取当前日期时间:2019年10月10日 10:10:20 星期一
* 地图版在用
* */
export function getNowTime2() {
var date = new Date();
var weekday = new Array(7);
weekday[0]="星期日";
weekday[1]="星期一";
weekday[2]="星期二";
weekday[3]="星期三";
weekday[4]="星期四";
weekday[5]="星期五";
weekday[6]="星期六";
var n = weekday[date.getDay()];
return date.getFullYear() + "年" + numberB0((date.getMonth() + 1)) + "月" + numberB0(date.getDate()) + "日 " + numberB0(
date.getHours()) + ":" + numberB0(date.getMinutes()) + ":" + numberB0(date.getSeconds()) + " " + n;
}
//金额分割符,4位分割（仅数字）
export function getNewNum(nStr) {
nStr += '';
var x = nStr.split('.');
var x1 = x[0];
var x2 = x.length > 1 ? '.' + x[1] : '';
var rgx = /(\d+)(\d{4})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + ',' + '$2');
}
return x1 + x2;
}
/**
* 提供获取内容页面的高度，便于处理两种不同显示滚动条的兼容问题。默认页面高度自然，框架提供了滚动条无需处理；特殊情况，页面高度需保持一屏，内部页面的高度需要自己计算，因此提供该方法，便于开发者开发内部页面。
* type:midd居中模式；full全屏模式；
* */
export function getPageHeight(type){
let h = document.documentElement.clientHeight;
type = type === undefined?"midd":type;
if(type === "midd"){
h = h - 48;
}
return h;
}
/**
* 提供获取内容页面的宽度。
* type:midd居中模式；full全屏模式；
* 全屏模式无需计算宽度是否小于1600
* */
export function getPageWidth(type){
let w = document.documentElement.clientWidth;
type = type === undefined?"midd":type;
if(type === "midd"){
if(w < 1600){
return 1200;
}else{
return 1500;
}
}else{
return w;
}
}
/*
* Ant和element-ui 级联相同bug - 底层存在children的时候会显示空模块的问题，此方法可以完成任意级别的递归找children。
* data:原型数据
* */
export function cascaderBugRepair(data) {
if(data == null)return false;
let nums = data.length;
for(var i = 0; i < nums; i++){
if(data[i].children.length <= 0){
delete data[i].children;
}else{
if(data[i].children.length > 0){
data[i].children = cascaderBugRepair(data[i].children);
}
}
}
return data;
}
/*
* ant - 级联 - 显示名字为：宝通运维/总中心/分中心
* 修改为：分中心
* */
export function cascaderShowName({ labels }) {
return labels[labels.length - 1];
}
/*
* MD5加密方法
* */
export function getMd5(data) {
const md5 = crypto.createHash('md5');
md5.update(data);
let md5password = md5.digest('hex');
return md5password.toString().toUpperCase();
}
/*
* 权限获取
* 获取功能按钮和相应的权限
* */
export function getPower() {
let list = JSON.parse(sessionStorage.getItem("btrh_sxsd_menuUseing")).btnList;
let power = {};
list.forEach((item, i)=>{
let nums = $Power.length;
for(var i = 0; i < nums; i++){
if(item.btnType === $Power[i].value){
power[$Power[i].key] = item.btnCheck
break;
}
}
});
return power;
}
/*
* 权限获取
* 获取功能按钮和相应的权限man专用
* */
export function getPower2(data) {
let list = data;
let power = {};
list.forEach((item, i)=>{
let nums = $Power.length;
for(var i = 0; i < nums; i++){
if(item.btnType === $Power[i].value){
power[$Power[i].key] = item.btnCheck
break;
}
}
});
return power;
}
/*
* 拼接地址
* 相对路径的文件拼接前缀
* */
export function fileIPChange(url) {
return CONFIG.FileIP + url;
}
/*
* type="password"导致的浏览器存储用户名密码后的回显问题
* id:元素ID
* */
export function passwordHx(id) {
document.getElementById(id).setAttribute('type','password');
}
export function getMonthDays(year, month){
month = parseInt(month, 10);
var d= new Date(year, month, 0);
return d.getDate();
}
/*
* ant - 对话框 - 图标修改数据
* tag: 1:感叹号 - 删除，2:对钩 - 新增询问，3:感叹号 - 操作的二次确认
* */
export function antModalIco(tag) {
let bgColor = ""; // ! #A61D24 对勾 #49AA19 ? 暂未使用
let type = ""; // ! exclamation 对勾 check ? question
switch(tag) {
case 1: // 感叹号 - 删除
bgColor = "#A61D24";
type = "exclamation";
break;
case 2: // 对钩 - 新增询问
bgColor = "#49AA19";
type = "check";
break;
case 3: // 感叹号 - 操作的二次确认
bgColor = "#177DDC";
type = "exclamation";
break;
}
return (h)=> h('a-icon', {
style: {
width: '21px',
height: '21px',
textAlign: 'center',
color: '#1f1f1f ',
backgroundColor: bgColor, // ! #A61D24 对勾 #49AA19 ? 暂未使用
borderRadius: '50%',
fontSize: '14px',
fontWeight: 600,
padding: '3px'
},
attrs: {
type: type, // ! exclamation 对勾 check ? question
},
});
}
//乘法运算
export function NumberMul(arg1, arg2) {
var m = 0;
var s1 = arg1.toString();
var s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
} catch (e) { }
try {
m += s2.split(".")[1].length;
} catch (e) { }
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
}
export default {
NumberMul,
antModalIco,
passwordHx,
fileIPChange,
getPower,
getPower2,
getMd5,
getMonthDays,
cascaderBugRepair,
cascaderShowName,
getPageWidth,
getPageHeight,
getNewNum,
dateChange,
timeHMChange,
timeChange,
getNowTime,
getNowTime2,
dateQjChange,
getSevenDays,
getSevenDays2,
dateTimeChange,
numberB0,
monthChange
}
表单
/**
* 带小数点的数字输入 - 默认4为小数
* 例如：FC.numDxsCheck(form, 3,'phone')
* form:表单对象，其中包括phone
* ws:几位小数
* key:键名不叫phone时需要传入新的键名
* */
export function numDxsCheck(form, ws, key){
if(key === undefined){
key = "cost";
}
form[key] = form[key] + "";
//先把非数字的都替换掉，除了数字和.
form[key] = form[key].replace(/[^\d.]/g,"");
//必须保证第一个为数字而不是.
form[key] = form[key].replace(/^\./g,"");
//保证只有出现一个.而没有多个.
form[key] = form[key].replace(/\.{2,}/g,".");
//保证.只出现一次，而不能出现两次以上
form[key] = form[key].replace(".","$#$").replace(/\./g,"").replace("$#$",".");
//只能输入4个小数
let c = null;
switch(ws) {
case 1:
c = /^(\-)*(\d+)\.(\d).*$/;
break;
case 2:
c = /^(\-)*(\d+)\.(\d\d).*$/;
break;
case 3:
c = /^(\-)*(\d+)\.(\d\d\d).*$/;
break;
case 4:
c = /^(\-)*(\d+)\.(\d\d\d\d).*$/;
break;
default:
c = /^(\-)*(\d+)\.(\d\d).*$/;
}
//只能输入两个小数
form[key] = form[key].replace(c,'$1$2.$3');
}
/**
* 只能输入数字
* 例如：FC.numCheck(form,'num')
* form:表单对象，其中包括num
* key:键名不叫num时需要传入新的键名
* */
export function numCheck(form, key){
if(key === undefined){
key = "num";
}
form[key] = form[key].replace(/[^\d]/g,'');
}
/**
* 只能输入：英文字母和数字
* 例如：FC.numEnCheck(form,'num')
* form:表单对象，其中包括num
* key:键名不叫num时需要传入新的键名
* */
export function numEnCheck(form, key){
if(key === undefined){
key = "num";
}
form[key] = form[key].replace(/[^\w\.\/]/ig,'');
}
/*
* 手机号 长度
* 处理手机号长度，默认对象内手机号的字段名称为phone
* form:表单对象，其中包括phone
* key:键名不叫phone时需要传入新的键名
* */
export function phoneMaxLength(form, key) {
if(key === undefined){
key = "phone";
}
if(form[key].length > 11){
form[key] = form[key].substring(0,11);
}
}
/*
* 禁止选择的日期区间
* 禁止选择今天以后的日期 - 今天可选
* num: 天，0：今天可选，1：今天不可选，2：昨天也不可选，-1：明天可选，-2：后天也可选，类推
* */
export function rangePickerDisabledDate(current, num) {
return current && current > new Date().getTime() - 3600*1000*24*num;
}
export default {
rangePickerDisabledDate,
numCheck,
numEnCheck,
phoneMaxLength,
numDxsCheck
}
报表（Echarts）
import EC from 'echarts'
import eWordcloud from 'echarts-wordcloud' // 自浮云
import { message } from 'ant-design-vue'; // 消息依赖
// 色卡
const color = ["#00FFF0","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8cb25","#3dffb0","#e8a425","#ff7aab","#e84b1e","#552ce2","#ffae21","#e8861e","#d441ff","#35e8e4","#9c7aff","#e86fd8","#ffee38"];
/*
* 获取 自浮云 - 常用1
* id: 元素ID
* data: [{
name: "发动机卡了", // 值
value: 100, // 权重
textStyle: {
emphasis: {
color: 'red' // 光标移入颜色
}
}
},{
name: "发动了", // 值
value: 20, // 权重
textStyle: {
emphasis: {
color: 'red' // 光标移入颜色
}
}
}]
* name: 提示框name
* */
export function getWordCloud(id, data) {
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {},
series: [{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
normal: {
color: function() {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
}
},
emphasis: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: data
}]
};
myChart.setOption(option, true);
}
/*
* 获取 雷达图 - 常用1
* id: 元素ID
* horn: [
{ name: '销售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技术', max: 30000},
{ name: '客服', max: 38000},
{ name: '研发', max: 52000}
]
* data: [
{
value: [4300, 10000, 28000, 35000, 50000],
name: '完好率'
}
]
* name: 提示框name
* */
export function getRadar(id, horn, data, name) {
if(name === undefined){
name = "雷达数据";
}
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {},
radar: {
// shape: 'circle',
radius: "60%",
indicator: horn,
axisLine: {
lineStyle: {
color: "#FFF"
}
},
splitLine: {
lineStyle: {
color: "#2aafb7"
}
}
},
series: [{
name: name,
type: 'radar',
// areaStyle: {normal: {}},
data: data
}]
};
myChart.setOption(option, true);
}
/*
* 获取 雷达图 - 常用2 - 百分比
* id: 元素ID
* horn: [
{ name: '销售', max: 100},
{ name: '管理', max: 100},
{ name: '信息技术', max: 100},
{ name: '客服', max: 100},
{ name: '研发', max: 100}
]
* data: [
{
value: [98, 98, 98, 98, 98],
name: '完好率'
}
]
* name: 提示框name
* */
export function getRadar2(id, horn, data, name) {
if(name === undefined){
name = "雷达数据";
}
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
// formatter: '{b0}<br />{a}: {c0}'
formatter: function (params, ticket, callback) {
let value = params.data.name;
horn.forEach((item, i)=>{
value += '<br />'+item.name+'：'+params.data.value[i]+"%"
});
return value;
}
},
radar: {
// shape: 'circle',
radius: "60%",
indicator: horn,
axisLine: {
lineStyle: {
color: "#FFF"
}
},
splitLine: {
lineStyle: {
color: "#2aafb7"
}
}
},
series: [{
name: name,
type: 'radar',
// areaStyle: {normal: {}},
data: data
}]
};
myChart.setOption(option, true);
}
/*
* 获取 柱状图 - 横向1
* id: 元素ID
* x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
* data: [{
value: 1000,
itemStyle: {
color: "#AAFAE0",
barBorderRadius: [0, 3, 3, 0] // 柱子圆角
}
},{
value: 2000,
itemStyle: {
color: "#FCCDBA",
barBorderRadius: [0, 3, 3, 0] // 柱子圆角
}
},{
value: 3000,
itemStyle: {
color: "#015EEA",
barBorderRadius: [0, 3, 3, 0] // 柱子圆角
}
}]
* name: 提示框name
* */
export function getBarHorizontal(id, x, data, name, tipX) {
if(name === undefined){
name = "数量";
}
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
// formatter: '{b0}<br />{a}: {c0}'
formatter: function (params, ticket, callback) {
if(tipX === undefined){
return params.name+'<br />'+params.seriesName+': '+params.data.value;
}else{
return tipX[params.seriesIndex]+'<br />'+params.seriesName+': '+params.data.value;
}
}
},
grid: {
top: 10,
left: 60,
right: 40,
bottom: 30,
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
},
yAxis: {
type: 'category',
data: x,
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
splitLine: {
show: false
}
},
series: [
{
name: name,
type: 'bar',
barWidth: 6,
data: data
}
]
};
myChart.setOption(option, true);
}
/*
* 获取 柱状图 - 纵向1
* id: 元素ID
* x: ['TOP3', 'TOP2', 'TOP1']
* data: [{
value: 1000,
itemStyle: {
color: "#AAFAE0",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 2000,
itemStyle: {
color: "#FCCDBA",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 3000,
itemStyle: {
color: "#015EEA",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
}]
* name: 提示框name
* */
export function getBarVertical(id, x, data, name) {
if(name === undefined){
name = "数量";
}
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 15,
left: 60,
right: 40,
bottom: 30,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF",
// 改变纵坐标的单位，过大的时候处理成万
formatter: function (value, index) {
if(value >= 10000){
return (value/10000).toFixed(0)+"万";
}else{
return value;
}
}
},
},
xAxis: {
type: 'category',
data: x,
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
splitLine: {
show: false
}
},
series: [
{
name: name,
type: 'bar',
barWidth: 6,
data: data
}
]
};
myChart.setOption(option, true);
}
/*
* 获取 柱状图 - 纵向2 - 一轴多线
* id: 元素ID
* x: ['分中心1', '分中心2', '分中心3', '分中心4']
*
* data: [
{
name: '土建',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#4AB2EC",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [7.0, 23.2, 25.6, 76.7]
},
{
name: '机电',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#F8CA9D",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [2.6, 5.9, 9.0, 26.4]
},
{
name: '其他',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#8E6398",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [28.7, 70.7, 175.6, 182.2]
},
]
* */
export function getBarVertical2(id, x, data) {
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 15,
left: 60,
right: 40,
bottom: 30,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF",
// 改变纵坐标的单位，过大的时候处理成万
formatter: function (value, index) {
if(value >= 10000){
return (value/10000).toFixed(0)+"万";
}else{
return value;
}
}
},
},
xAxis: {
type: 'category',
data: x,
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
splitLine: {
show: false
}
},
series: data
};
myChart.setOption(option, true);
}
/*
* 获取 柱状图 - 纵向2_1 - 一轴多线百分比
* id: 元素ID
* x: ['分中心1', '分中心2', '分中心3', '分中心4']
*
* data: [
{
name: '土建',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#4AB2EC",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [7.0, 23.2, 25.6, 76.7]
},
{
name: '机电',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#F8CA9D",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [2.6, 5.9, 9.0, 26.4]
},
{
name: '其他',
type: 'bar',
barWidth: 6,
itemStyle: {
color: "#8E6398",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
},
data: [28.7, 70.7, 175.6, 182.2]
},
]
* */
export function getBarVertical2_1(id, x, data) {
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
grid: {
top: 15,
left: 60,
right: 40,
bottom: 30,
},
yAxis: {
max: 100,
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF",
formatter: '{value} %'
},
},
xAxis: {
type: 'category',
data: x,
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
splitLine: {
show: false
}
},
series: data
};
myChart.setOption(option, true);
}
/*
* 获取 柱状图 - 纵向3
* id: 元素ID
* x: ['TOP6', 'TOP5', 'TOP4', 'TOP3', 'TOP2', 'TOP1']
* data: [{
value: 1000,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 2000,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 3000,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 4000,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 5000,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},{
value: 5999,
itemStyle: {
color: "#D8A0FE",
barBorderRadius: [3, 3, 0, 0] // 柱子圆角
}
},]
* */
export function getBarVertical3(id, x, data) {
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: 25,
left: 80,
right: 40,
bottom: 30,
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF",
// 改变纵坐标的单位，过大的时候处理成万
formatter: function (value, index) {
if(value >= 10000){
return (value/10000).toFixed(0)+"万";
}else{
return value;
}
}
},
},
xAxis: {
type: 'category',
data: x,
axisLine: {
lineStyle: {
color: "#011A3F"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
color: "#FFF"
},
splitLine: {
show: false
}
},
series: [
{
name: '数量',
type: 'bar',
barWidth: 6,
data: data
}
]
};
myChart.setOption(option, true);
}
/*
* 获取 饼图 - 常用1
* id: 元素ID
* data: 饼图数据
* name: 提示框name
* [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
* */
export function getPie(id, data, name) {
if(name === undefined){
name = "占比";
}
if(data === undefined){
message.error("没有找到报表数据，请检查！");
return;
}
var myChart = EC.init(document.getElementById(id));
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
grid: {
left: 44,
right: 25,
top: 56,
bottom: 40
},
color: color,
series: [{
name: name,
type: 'pie',
radius: ['45%', '65%'],
center: ['50%', '50%'],
data: data,
labelLine: {
length: 10,
length2: 10,
lineStyle: {
color: "#FFF"
}
},
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
label: {
textStyle: {
color:'#FFF',
fontSize: 14,
}
},
},
},
label: {
formatter: ['{b}','{d}%'].join('\n')
}
}]
};
myChart.setOption(option, true);
}
export default {
getWordCloud,
getRadar,
getRadar2,
getBarHorizontal,
getBarVertical,
getBarVertical2,
getBarVertical2_1,
getBarVertical3,
getPie,
color,
}
网友评论