echarts-vue3
Version:
基于echarts封装的vue组件，支持vue2，vue3; Based on the echarts-wrapped vue component, it supports vue2 and vue3.
1,887 lines (1,773 loc) • 126 kB
JavaScript
/** @format */
// import { FONT_S, FONT_M, FONT_L, COLOR } from '../config/config';
import CONFIG from '../config/config';
// import lodash from 'lodash';
// let _merge = lodash.merge;
// import imgSrc from '../images/nodata.png';
// import './lodash';
let _merge = function(...objects) {
let result = {};
objects.forEach(obj => {
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
result[key] = obj[key];
}
}
});
return result;
};;
// import imgSrc from '../images/nodata.png';
import util from './util';
// let echarts = require('echarts/lib/echarts');
import * as echarts from 'echarts';
// import * as echarts from 'echarts';
// require('echarts-liquidfill');
import 'echarts-liquidfill';
import 'echarts-wordcloud';
//修改配置样式
export const setChartConfig = (opt = {}) => {
_merge(CONFIG, opt);
};
//坐标轴样式
export const AXIS_STYLE = () => {
return {
nameTextStyle: {
color: getFontColor(),
padding: [0, 0, -10, 0],
fontSize: CONFIG.FONT_S
},
axisLabel: {
color: getFontColor(),
fontSize: CONFIG.FONT_S
},
axisTick: {
/* lineStyle: {
color: getBorderColor(),
width: 1
}, */
show: false
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: getBorderColor(),
width: 1
},
show: true
}
};
};
//图例
export const LEGEND = () => {
return {
top: 10,
itemWidth: CONFIG.LEGEND_ICON_SIZE,
itemHeight: CONFIG.LEGEND_ICON_SIZE,
icon: CONFIG.LEGEND_ICON,
// borderRadius: 0,
// symbolKeepAspect: false,
left: CONFIG.SHOW_TOOLBOX ? '10%' : 'center',
padding: CONFIG.SHOW_TOOLBOX ? [0, 50, 0, 0] : 0,
textStyle: {
color: getFontColor(),
fontSize: CONFIG.FONT_S,
lineHeight: CONFIG.FONT_S,
rich: {
a: {
// eslint-disable-next-line no-mixed-spaces-and-tabs
verticalAlign: 'middle'
},
},
padding:[0,-2,-3, 0]
}
};
};
//提示框
export const TOOLTIP = () => {
return {
backgroundColor: CONFIG.TOOLTIP_BG_COLOR,
borderColor: CONFIG.TOOLTIP_BORDER_COLOR,
textStyle: {
color: CONFIG.TOOLTIP_FONT_COLOR
}
};
};
//获取颜色
export const getColor = (color) => {
if (!color || color === 'normalColor') {
//返回图表常规配色
if (CONFIG.COLOR && CONFIG.COLOR.length) {
return CONFIG.COLOR;
}
return CONFIG.THEME_COLOR === 'dark'
? CONFIG.COLOR_DARK
: CONFIG.COLOR_LIGHT;
} else if (typeof color === 'string' && CONFIG[color]) {
//返回指定配色
return CONFIG[color];
} else {
return color;
}
};
//获取边线颜色
export const getBorderColor = () => {
return CONFIG.BORDER_COLOR
? CONFIG.BORDER_COLOR
: CONFIG.THEME_COLOR === 'dark'
? CONFIG.BORDER_COLOR_DARK
: CONFIG.BORDER_COLOR_LIGHT;
};
//获取字体颜色
export const getFontColor = () => {
return CONFIG.FONT_COLOR
? CONFIG.FONT_COLOR
: CONFIG.THEME_COLOR === 'dark'
? CONFIG.FONT_COLOR_DARK
: CONFIG.FONT_COLOR_LIGHT;
};
//十六进制颜色转为rgb颜色
const getColorRgb = (color = '#fff') => {
if (typeof color !== 'string') {
return color;
}
let pattern = /^#([0-9|a-f]{3}|[0-9|a-f]{6})$/;
color = color.toLowerCase();
if (pattern.test(color)) {
if (color.length === 4) {
// 将三位转换为六位
color =
'#' +
color[1] +
color[1] +
color[2] +
color[2] +
color[3] +
color[3];
}
//处理六位的颜色值
let colorNew = [];
for (let i = 1; i < 7; i += 2) {
colorNew.push(parseInt('0x' + color.slice(i, i + 2)));
}
return colorNew;
//return 'RGB(' + colorNew.join(',') + ')';
} else if (color.indexOf('rgb') > -1) {
color = color.replace(/[rgba()]/g, '');
return color.split(',').slice(0, 3);
}
return [];
};
//颜色加透明度
/* const getOpacityColor = (color, opacity=1)=> {
let colorArr = getColorRgb(color);
return `rgba(${colorArr.concat(opacity).join(',')})`;
} */
//颜色减淡 或加深
const getChangeColor = (color, level = 0) => {
//level -1~0减淡 0~1加深
let colorArr = getColorRgb(color);
if (level > 0) {
for (let i = 0; i < 3; i++) {
colorArr[i] = Math.floor(colorArr[i] * (1 - level));
}
} else {
level = -level;
for (let i = 0; i < 3; i++) {
colorArr[i] = Math.floor((255 - colorArr[i]) * level + colorArr[i]);
}
}
return `rgb(${colorArr.join(',')})`;
};
//获取象形柱状图的颜色
const getPictorialColor = (itemColor, pictorial) => {
if (pictorial === 'diamond') {
return {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: itemColor
},
{
offset: 0.46,
color: itemColor
},
{
offset: 0.52,
color: getChangeColor(itemColor, 0.1) //颜色加深
},
{
offset: 1,
color: getChangeColor(itemColor, 0.2) //颜色加深
}
]
};
} else if (pictorial === 'circle') {
return {
x: 0,
y: 0,
x2: 1,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: itemColor
},
{
offset: 0.5,
color: itemColor
},
{
offset: 1,
color: getChangeColor(itemColor, 0.2) //颜色加深
}
]
};
} else {
return itemColor;
}
};
//无数据时的配置项
export const getNoDataOption = () => {
return {
/* graphic: [
{
type: 'image',
id: 'logo',
right: 'center',
top: 'center',
z: -10,
bounding: 'raw',
origin: [CONFIG.IMG_NONE_W / 2, CONFIG.IMG_NONE_H / 2],
style: {
image: CONFIG.IMG_NONE,
width: CONFIG.IMG_NONE_W,
height: CONFIG.IMG_NONE_H
},
textContent: {
style: {
position: 'insideBottom',
text: CONFIG.TEXT_NONE,
fill: getFontColor(),
font: CONFIG.FONT_S + 'px sans-serif',
opacity: .8,
padding: 10
}
},
textConfig: {
position: 'bottom'
}
}
] */
};
};
/**
* 标准线
*
* @param {[]} data 标准线相关数据
* @param {Object} [data[i].name] 标准线名称
* @param {String} [data[i].value] 标准线对应数值
* @param {Boolean} [data[i].color] 标准线对应颜色
* @return {Object} [option] 标准线配置项
*/
const getMarkLine = (data) => {
let lines = [];
data.forEach((v) => {
lines.push({
name: v.name,
yAxis: v.value,
itemStyle: {
color: v.color || '#f00'
}
});
});
let markLine = {
animation: false,
symbolSize: 0,
linStyle: {
type: 'dotted',
width: 2
},
data: lines,
label: {
show: true,
color: getFontColor(),
formatter: '{b}'
}
};
return markLine;
};
/**
* 饼图
*
* @param {[]} data 标题的series数据
* @param {Object} configObj
* @param {Object} [configObj.el] 图表绑定的dom元素，不传时返回option配置项
* @param {String} [configObj.color] 颜色
* @param {Boolean} [configObj.showLegend=false] 是否显示图例
* @param {Boolean} [configObj.showLabel=true] 是否显示线条文字
* @param {String} [configObj.title] 中间的标题
* @param {String} [configObj.showNullLabel] 是否显示无数据项的连线标签 默认 false
* @param {String} [configObj.subtext] 标题 一般放数值
* @param {String} [configObj.type='circle'] 半径 实心圆circle， 圆环ring 玫瑰图rose
* @param {Object} [opt] 自定义图表option中的属性
* @return {Object} [option] option配置项
*/
export const renderPie = (data, configObj, opt) => {
if (!data || data.length === 0) {
return getNoDataOption();
}
//避免修改原data值
data = JSON.parse(JSON.stringify(data));
configObj.showLabel = configObj.showLabel !== false;
let radius = configObj.radius;
let radius_ = 0;
let center = configObj.center;
if (!center) {
center = [configObj.legendOrient === 'vertical' ? '40%' : '50%', '50%'];
}
//半径
if (!radius) {
radius = configObj.type === 'ring' ? ['35%', '60%'] : '60%';
radius_ = configObj.type === 'ring' ? ['35%', '40%'] : '0';
} else if (radius.constructor === Array && radius[1]) {
radius_ = [radius[0], parseFloat(radius[0]) + 5 + '%'];
}
let legendDataObj = {};
//无数据的部分不显示label和连线 图例
data.forEach((v, i) => {
legendDataObj[v.name] = v.legendName;
if (v && (!v.value || isNaN(v.value))) {
data[i].value = 0;
if (!configObj.showNullLabel) {
data[i].label = {
show: false
};
data[i].labelLine = {
show: false
};
}
}
});
let legend = {
show: configObj.showLegend,
...LEGEND(),
formatter: function (name) {
return legendDataObj[name] || name;
},
textStyle: {
color: getFontColor(),
...configObj.legendTextStyle
}
};
if (configObj.legendOrient === 'vertical') {
legend.left = 'auto';
legend.right = '5%';
legend.top = 'center';
legend.orient = 'vertical';
}
let option = {
textStyle: {
color: null //避免全局字体颜色覆盖饼图颜色
},
legend,
/* title: {
left: 'center',
top: 'center',
text: configObj.title,
subtext: configObj.subtext,
textStyle: {
lineHeight: CONFIG.FONT_L,
color: CONFIG.FONT_COLOR,
fontWeight: 400
},
subtextStyle: {
fontSize: CONFIG.FONT_L
}
}, */
color: getColor(configObj.color),
tooltip: {
...TOOLTIP(),
formatter: configObj.labelFormatter
},
series: [
{
name: '',
type: 'pie',
radius: radius,
roseType: configObj.type === 'rose',
center: center,
label: {
show: configObj.showLabel,
color: getFontColor(),
formatter: configObj.labelFormatter
},
itemStyle: {
//shadowColor: 'rgba(0,0,0,0.4)',
shadowBlur: 0
},
labelLine: {
show: configObj.showLabel
},
data: data
}
]
};
// 分隔饼图
let isShowSplit = configObj.isShowSplit;
if(isShowSplit){
option.series[0].itemStyle = {
borderWidth: 3,
borderColor: '#fff'
}
}
if (configObj.title || configObj.type === 'ring') {
//为了标题始终在圆环中间，使用饼图的label显示标题
option.series.push({
name: '',
type: 'pie',
center: center,
silent: true,
data: [{ name: '', value: 100 }],
radius: radius_,
label: {
position: 'center',
formatter: configObj.title,
fontSize: CONFIG.FONT_M,
lineHeight: CONFIG.FONT_M * 1.4,
color: getFontColor()
},
itemStyle: {
color:
configObj.isShowInnerShadow !== false
? 'rgba(0,0,0,0.3)'
: 'rgba(0,0,0,0)'
},
z: 10
});
}
/* if (configObj.showLabel) {
option.series[0].label = {
show: true,
color: CONFIG.FONT_COLOR,
formatter: configObj.labelFormatter
};
} */
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 堆叠图
* @param {Object} data 图表数据 必须,
* @param {[]} data.xAxis x轴
* @param {[]} data.yAxis y轴(与data.xAxis二选一)
* @param {[]} data.series 必须
* @param {Object} configObj 配置项 可选
* @param configObj.el 图表绑定的dom元素 可选
* @param configObj.color 颜色 可选
* @param {String} configObj.unit 数值单位 可选 默认%
* @param {Object} opt 自定义图表option中的属性 可选
* @return {Object} 图表配置项
* */
export const renderStackBar = (data, configObj, opt) => {
if (!data || !data.series || data.series.length === 0) {
return getNoDataOption();
}
let unit = configObj.unit || '';
let barWidth = configObj.barWidth || 20;
let legend = [];
data.series.map((v) => {
legend.push(v.name);
v.stack = configObj.include ? '' : 'one';
v.type = 'bar';
v.barWidth = barWidth;
v.barMaxWidth = '60%';
v.barGap = configObj.include ? '-100%' : null;
});
//类目轴
let categoryAxis = {
...AXIS_STYLE(),
type: 'category',
data: data.xAxis || data.yAxis || null
};
categoryAxis.axisLine.show = !data.yAxis; //y轴做类目轴时 不显示
//数值轴
let valueAxis = {
...AXIS_STYLE(),
type: 'value',
name: unit,
nameTextStyle: {
padding: [0, 20, 2, 0]
},
axisLine: {
show: false
},
splitLine: {
show: !data.yAxis, //y轴做类目轴时 不显示
lineStyle: {
color: getBorderColor(),
width: 1,
type: 'dashed'
}
}
};
let option = {
tooltip: {
...TOOLTIP(),
trigger: 'axis',
axisPointer: {
type: 'none'
}
},
grid: CONFIG.GRID,
color: getColor(configObj.color),
legend: LEGEND(),
yAxis: data.yAxis ? categoryAxis : valueAxis,
xAxis: data.xAxis ? categoryAxis : valueAxis,
series: data.series
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 象形堆叠图
* @param {Object} data 图表数据 必须,
* @param {[]} data.xAxis x轴
* @param {[]} data.yAxis y轴(与data.xAxis二选一)
* @param {[]} data.series 必须
* @param {Object} configObj 配置项 可选
* @param configObj.el 图表绑定的dom元素 可选
* @param configObj.color 颜色 可选
* @param {String} configObj.unit 数值单位 可选 默认%
* @param {Object} opt 自定义图表option中的属性 可选
* @return {Object} 图表配置项
* */
export const renderPictorialStackBar = (data, configObj, opt) => {
if (
!data ||
!data.xAxis ||
!data.xAxis.length ||
!data.series ||
!data.series.length
) {
return getNoDataOption();
}
let colorArr = getColor(configObj.color);
let barWidth = configObj.barWidth || 20;
let minArr = data.xAxis.map(() => {
return 1;
});
let len = data.series.length;
let series = [];
let legendData = [];
let unit = configObj.unit || '';
let sumArr = data.xAxis.map(() => {
return 0;
});
data.series.forEach((s, i) => {
let color = colorArr[i] || colorArr[0];
let color_ = colorArr[i - 1] || colorArr[0];
let barColor =
configObj.pictorial === 'diamond'
? getPictorialColor(color, configObj.pictorial)
: color;
let n = i + 1;
legendData.push({
name: s.name,
itemStyle: {
color: color
}
});
if (configObj.include) {
series.push(
{
//柱子
name: s.name,
data: s.data,
type: 'bar',
barMaxWidth: 'auto',
barWidth: barWidth,
itemStyle: {
color: barColor
// opacity: 0.9
},
barMinHeight: 1,
z: 2 * n,
barGap: '-100%'
},
{
//柱子的底部图标
name: s.name,
data: minArr,
silent: true,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: configObj.pictorial,
symbolOffset: [0, '50%'],
symbolSize: [barWidth, barWidth / 2],
itemStyle: {
color: barColor
},
z: 2 * n,
tooltip: {
show: false
}
},
{
//柱子的顶部图标
name: s.name,
data: s.data,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: configObj.pictorial,
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, barWidth / 2],
z: i > 0 && len > 1 ? 3 * n : 99,
itemStyle: {
// color: '#19a0fb'
/* color:
i > 0 && len > 1 && configObj.pictorial === "diamond"
? getPictorialColor(color_, configObj.pictorial)
: getChangeColor(color_, 0.1), */
color:
i > 0 &&
len > 1 &&
configObj.pictorial === 'diamond'
? getPictorialColor(color_, configObj.pictorial)
: i > 0 && len > 1
? color_
: getChangeColor(color_, 0.1)
},
barMinHeight: 1,
silent: true,
tooltip: {
show: false
}
}
);
} else {
// let lastArr = data.series[i - 1] ? data.series[i - 1].data : minArr
let lastSum = sumArr;
sumArr = s.data.map((v, idx) => {
let n = isNaN(v) ? 0 : Number(v);
return sumArr[idx] + n;
});
//堆叠 底部只要一个 底部图标需要求和
series.push(
{
//柱子
name: s.name,
data: s.data,
type: 'bar',
barMaxWidth: 'auto',
barWidth: barWidth,
itemStyle: {
color: barColor
},
barMinHeight: 1,
z: 2 * n,
stack: 'one'
},
{
//柱子的底部图标
name: s.name,
data: lastSum,
symbolPosition: 'end',
silent: true,
type: 'pictorialBar',
barMaxWidth: '20',
symbol: configObj.pictorial,
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, barWidth / 2],
barMinHeight: 1,
itemStyle: {
color: barColor
},
z: 2 * n,
tooltip: {
show: false
}
},
{
//柱子的顶部图标
name: s.name,
data: sumArr,
type: 'pictorialBar',
barMaxWidth: '20',
symbolPosition: 'end',
symbol: configObj.pictorial,
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, barWidth / 2],
z: 2 * n + 1,
barMinHeight: 1,
itemStyle: {
color: getChangeColor(color, 0.1)
},
silent: true,
tooltip: {
show: false
}
}
);
}
});
// console.log(series);
//类目轴
let categoryAxis = {
...AXIS_STYLE(),
type: 'category',
data: data.xAxis || data.yAxis || null
};
categoryAxis.axisLine.show = !data.yAxis; //y轴做类目轴时 不显示
if (configObj.pictorial) {
categoryAxis.axisLabel.textStyle = {
padding: [5, 0, 0, 0]
};
}
//数值轴
let valueAxis = {
...AXIS_STYLE(),
type: 'value',
name: unit,
nameTextStyle: {
padding: [0, 20, 2, 0]
},
axisLine: {
show: false
},
splitLine: {
show: !data.yAxis, //y轴做类目轴时 不显示
lineStyle: {
color: getBorderColor(),
width: 1,
// opacity: 0.6,
type: 'dashed'
}
}
};
let option = {
tooltip: {
...TOOLTIP(),
trigger: 'axis'
},
grid: CONFIG.GRID,
color: getColor(configObj.color),
legend: {
...LEGEND(),
data: legendData,
selectedMode: !configObj.pictorial
},
yAxis: data.yAxis ? categoryAxis : valueAxis,
xAxis: data.xAxis ? categoryAxis : valueAxis,
series: series
};
if (opt) {
_merge(option, opt);
}
// debugger
return option;
};
/**
* 条纹图
* data Array 图表数据 必须,
* configObj Object
* 属性如下：
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Array 颜色 可选
* unit String 数值单位 可选
* barWidth Number 柱宽 可选
* opt Object 自定义图表option中的属性
* */
export const renderStripeBar = (data, configObj, opt) => {
if (!data || data.length === 0) {
return getNoDataOption();
}
let seriesData = [];
let unit = configObj.unit || '';
let max = 0;
let yAxis = [];
let barWidth = configObj.barWidth || 10;
let color = configObj.color || [
{
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: '#459ded' // 0% 处的颜色
},
{
offset: 1,
color: '#20dbe7' // 100% 处的颜色
}
]
},
'#eee'
];
data.forEach((v) => {
if (v.rank !== undefined) {
let rank = v.rank;
yAxis.push(rank + ' ' + v.name);
seriesData.push(v.value);
} else {
yAxis.push(v.name);
seriesData.push(v.value || 0);
}
});
max = Math.max(...seriesData);
max = max && !isNaN(max) ? max : 100;
let option = {
grid: {
containLabel: true,
top: 40,
right: 80,
left: 10,
bottom: 10
},
tooltip: {
...TOOLTIP()
},
yAxis: {
type: 'category',
data: yAxis,
inverse: true,
axisLabel: {
textStyle: {
color: getFontColor(),
fontSize: CONFIG.FONT_S
},
interval: 0
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
xAxis: {
show: false,
max: max
},
series: [
{
type: 'bar',
barWidth: barWidth,
barGap: '-100%',
data: seriesData.map(() => max), //每个值都取最大值
itemStyle: {
barBorderRadius: barWidth / 2,
//borderColor: color[1],
color: color[1]
},
label: {
show:
configObj.showLabel ||
configObj.showLabel === undefined,
position: 'right',
color: getFontColor(),
padding: [0, 10],
formatter: function (o) {
let n = seriesData[o.dataIndex];
n = isNaN(n + '') ? '-' : n;
return n + unit;
}
},
silent: true
},
{
type: 'bar',
barGap: '-100%',
barWidth: barWidth,
data: seriesData,
itemStyle: {
barBorderRadius: 8,
color: color[0],
shadowBlur: 0,
shadowColor: '#000'
}
}
]
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 条纹图样式2
* data Array 图表数据 必须,
* configObj Object
* 属性如下：
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Array 颜色 可选
* unit String 数值单位 可选
* barWidth Number 柱宽 可选
* opt Object 自定义图表option中的属性
* */
export const renderStripeBar2 = (data, configObj, opt) => {
if (!data || data.length === 0) {
return getNoDataOption();
}
let seriesData = [];
let unit = configObj.unit || '';
let max = 0;
let yAxis = [];
let barWidth = configObj.barWidth || 10;
data.forEach((v) => {
if (v.rank !== undefined) {
let rank = v.rank;
yAxis.push(rank + ' ' + v.name);
seriesData.push(v.value);
} else {
yAxis.push(v.name);
seriesData.push(v.value || 0);
}
});
max = Math.max(...seriesData);
max = max && !isNaN(max) ? max : 100;
let option = {
color: getColor(configObj.color),
grid: {
containLabel: true,
top: 40,
right: 80,
left: 10,
bottom: 10
},
tooltip: {
...TOOLTIP()
},
yAxis: {
type: 'category',
data: yAxis,
inverse: true,
axisLabel: {
textStyle: {
fontSize: CONFIG.FONT_S
},
interval: 0
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
xAxis: {
show: false,
max: max
},
series: [
{
type: 'pictorialBar',
symbolClip: true,
symbol: configObj.pictorial,
symbolRepeat: 'fixed',
symbolPosition: 'start',
// symbol: 'image://' + pBar3,
symbolBoundingData: max,
// symbolOffset: [20, '0'],
symbolSize: [barWidth * 0.4, barWidth],
symbolRotate: configObj.symbolRotate,
symbolMargin: barWidth * 0.3,
label: {
show:
configObj.showLabel ||
configObj.showLabel === undefined,
color: getFontColor(),
verticalAlign: 'middle',
position: 'right',
fontWeight: '600',
fontSize: 16,
padding: [4, 0, 0, 10],
formatter: '{c}' + unit
},
data: seriesData
}
]
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 条纹图样式3
* data Array 图表数据 必须,
* configObj Object
* 属性如下：
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Array 颜色 可选
* opt Object 自定义图表option中的属性
* */
export const renderStripeBar3 = (data, configObj, opt) => {
if (!data || data.length === 0) {
return getNoDataOption();
}
// 新加的方法
var defaultData = [];
data.forEach(item=>{
console.log(item);
defaultData.push(item);
})
let getArrByKey = function(data, k) {
let key = k || 'value';
let res = [];
if (data) {
data.forEach(function (t) {
res.push(t[key]);
});
}
return res;
};
let getSymbolData = function(data) {
let arr = [];
for (var i = 0; i < data.length; i++) {
arr.push({
value: data[i].value,
symbolPosition: 'end',
});
}
return arr;
};
let seriesData = [];
let max = 0;
let yAxis = [];
data.forEach((v) => {
if (v.rank !== undefined) {
let rank = v.rank;
yAxis.push(rank + ' ' + v.name);
seriesData.push(v.value);
} else {
yAxis.push(v.name);
seriesData.push(v.value || 0);
}
});
max = Math.max(...seriesData);
max = max && !isNaN(max) ? max : 100;
let option = {
color: [
{
x: 0,
y: 0,
x2: 1,
y2: 0,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: 'rgb(0,251,253,0)'
},
{
offset: 1,
color: 'rgb(0,251,253,1)'
}
]
}
],
tooltip: {
...TOOLTIP()
},
grid: {
containLabel: true,
top: 40,
right: 10,
left: 40,
bottom: 10
},
yAxis:[
{
triggerEvent: false,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
interval: 0,
align: 'left',
margin: 80,
fontSize: CONFIG.FONT_S,
formatter: function (value) {
return '{title|' + value + '}';
},
rich: {
title: {
width: 165,
},
},
},
},
{
triggerEvent: false,
show: true,
inverse: true,
data: getArrByKey(data, 'name'),
axisLine: {
show: false,
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
shadowOffsetX: '-40px',
align: 'right',
verticalAlign: 'bottom',
lineHeight: 40,
fontSize: CONFIG.FONT_S,
formatter: function (value, index) {
return (
'' + data[index].value + ' '
);
},
rich: {
percentNumber: {
color: '#ff8e2e',
},
},
},
},
],
xAxis: {
show: false,
max: max
},
series: [
{
name: 'XXX',
type: 'pictorialBar',
symbol:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
symbolSize: [50, 50],
symbolOffset: [25, 0],
z: 12,
itemStyle: {
color: '#fff',
},
data: getSymbolData(data),
},
{
name: '背景',
type: 'bar',
barWidth: 10,
barGap: '-100%',
z: 1,
data: defaultData,
itemStyle: {
color: '#0b2645',
barBorderRadius: 10,
},
},
{
name: '条',
type: 'bar',
showBackground: true,
// backgroundColor:'#fff',
barBorderRadius: 30,
yAxisIndex: 0,
data: data,
barWidth: 10,
// align: left,
itemStyle: {
// color: [
// {
// x: 0,
// y: 0,
// x2: 1,
// y2: 0,
// type: 'linear',
// global: false,
// colorStops: [
// {
// offset: 0,
// color: '#224059'
// },
// {
// offset: 1,
// color: '#4AF2F5'
// }
// ]
// }
// ]
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
// {
// offset: 0,
// color: 'rgb(0,251,253,0)',
// },
// {
// offset: 1,
// color: 'rgb(0,251,253,1)',
// },
// ]),
// barBorderRadius: 10,
// },
// barBorderRadius: 4,
},
label: {
color: '#fff',
show: true,
position: [0, '-20px'],
textStyle: {
fontSize: 16,
},
formatter: function (a) {
return a.name;
},
},
},
]
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 圆柱图
* data Object 图表数据 必须,
* xAxis 必须
* data 必须
* configObj Object
* 属性如下：
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Array 颜色 可选
* unit String 数值单位 可选
* barWidth Number 柱宽 可选
* opt Object 自定义图表option中的属性
* */
export const renderCylinderBar = (data, configObj, opt) => {
if (!data || !data.data || data.data.length === 0) {
return getNoDataOption();
}
let barWidth = configObj.barWidth || 30;
let color = getColor(configObj.color);
let seriesData = [];
if (configObj.color) {
data.data.forEach((v, i) => {
seriesData.push({
value: v,
itemStyle: {
color: color[i] || color[0]
}
});
});
} else {
seriesData = data.data;
}
let option = {
color: color.slice(0, 1),
grid: {
containLabel: true,
left: 0
},
xAxis: {
type: 'category',
data: data.xAxis,
offset: 5,
axisLabel: {
interval: 0,
textStyle: {
fontSize: CONFIG.FONT_S
}
},
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
show: false
},
series: [
{
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, -5],
symbolPosition: 'end',
z: 12,
label: {
textStyle: {
color: getFontColor()
},
show: true,
position: 'top',
formatter: '{c}' + (configObj.unit || '')
},
silent: true,
data: seriesData
},
{
name: '',
type: 'pictorialBar',
symbolSize: [barWidth, 10],
symbolOffset: [0, 5],
z: 12,
data: seriesData,
silent: true
},
{
type: 'bar',
/* itemStyle: {
normal: {
opacity: 0.8
}
}, */
barWidth: barWidth,
silent: true,
data: seriesData
}
]
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 词云
* data Object 图表数据 必须,
* data 必须
* configObj Object showShape true false 两种不同形式
* 属性如下：
* opt Object 自定义图表option中的属性
* */
export const renderWordcloud = (data, configObj, opt) => {
if (!data || data.length === 0) {
return getNoDataOption();
}
let wordCloudColor = getColor();
let option = {
series: [
{
type: "wordCloud",
textPadding: 0,
autoSize: {
enable: true,
minSize: 6
},
textStyle: {
color: () => {
const r = Math.floor(
Math.random() * wordCloudColor.length
);
return wordCloudColor[r];
}
},
width: '100%',
height: '100%',
//数据
data: data
}
]
};
// 是否变换展现形式
if(configObj.showShape){
option.series[0].shape = 'circle';
option.series[0].gridSize = 20;
option.series[0].sizeRange= [12, 50];
option.series[0].rotationRange= [0, 0];
option.series[0].autoSize = {
"enable": true,
"minSize": 18
}
}
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 彩虹图
* configObj Object
* 属性如下：
* data Object 图表数据 必须,
* 包含xAxis或yAxis二选一
* series 必须
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Arrway 颜色 可选
* unit String 数值单位 可选 默认%
* opt Object 自定义图表option中的属性
* */
export const rainbowchart = (configObj, opt) => {
let seriesd = [];
let legend = [];
let test_data = configObj.data;
let maxData = Number(test_data[0].value);
for (let i = 1; i < test_data.length; i++) {
maxData =
maxData < Number(test_data[i].value) ? test_data[i].value : maxData;
}
for (let j in test_data) {
if (legend.indexOf(test_data[j]['name'] == -1)) {
legend.push({
icon: 'rect',
name: test_data[j]['name']
});
}
let ra = test_data.length - 1 - j;
seriesd.push({
name: test_data[j]['name'],
type: 'pie',
radius: [ra * 20 + 52 + '%', 43 + ra * 20 + '%'],
itemStyle: {
label: {
show: false
}
},
hoverAnimation: false,
startAngle: 180,
center: ['50%', '75%'],
data: [
{
value: test_data[j]['value'],
name: test_data[j]['name'],
label: {
postion: 'center'
}
},
{
value: maxData - test_data[j]['value'],
itemStyle: {
color: 'rgba(203,203,203,0.5)',
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
color: 'rgba(203,203,203,1)'
}
},
name: 'showtip_' + test_data[j]['value']
},
{
value: maxData,
itemStyle: {
// normal: {
color: 'rgba(0,0,0,0)',
label: {
show: true
},
labelLine: {
show: true
},
// },
emphasis: {
color: 'rgba(0,0,0,0)'
}
},
name: 'hide'
}
]
});
}
let option = {
//legend: {},
maxnum: maxData,
tooltip: {
show: true,
...TOOLTIP(),
formatter: function (params) {
if (params.name === 'hide') {
return null;
} else {
let num = '';
if (params.name.indexOf('showtip_') != -1) {
num = Number(params.name.split('_')[1]);
} else {
num = params.value;
}
if (Number(num) === 0)
return params.seriesName + ':' + Number(num) + '';
return (
params.seriesName +
':' +
parseFloat((num * 100) / maxData).toFixed(2) +
'%'
);
}
}
},
grid: {
top: 0,
height: 0,
left: '10%',
right: '10%'
},
series: seriesd,
color: getColor(configObj.color)
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 圆环图
* configObj Object
* 属性如下：
* data Object 图表数据 必须,
* 包含xAxis或yAxis二选一
* series 必须
* el 图表绑定的dom元素 可选 不传时返回option配置项
* color Arrway 颜色 可选
* unit String 数值单位 可选 默认%
* opt Object 自定义图表option中的属性
* */
export const ringchart = (configObj, opt) => {
let text = configObj.data.name;
let val = configObj.data.value;
let dataStyle = {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: 'rgba(40, 40, 40, 0.1)'
};
let placeHolderStyle = {
color: configObj.color ? getColor(configObj.color[0]) : '#78b4ff', // 未完成的圆环的颜色
label: {
show: false
},
labelLine: {
show: false
},
emphasis: {
color: configObj.color ? getColor(configObj.color[0]) : '#78b4ff' // 未完成的圆环的颜色
}
};
let option = {
title: {
text: text,
x: 'center',
y: 'center',
subtext: val,
textStyle: {
fontWeight: 'normal',
color: configObj.color
? getColor(configObj.color[0])
: '#78b4ff',
fontSize: 18
},
subtextStyle: {
color: configObj.color
? getColor(configObj.color[0])
: '#78b4ff', // 副标题文字颜色
fontSize: '25',
fontWeight: 'normal'
}
},
tooltip: {
show: false
},
series: [
{
name: 'Pie2',
type: 'pie',
clockWise: false,
radius: ['80%', '90%'],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [
{
value: 100 - Number(val),
itemStyle: {
color: configObj.color
? getColor(configObj.color[1])
: '#eee',
shadowBlur: 0
}
},
{
value: val,
name: 'invisible',
itemStyle: placeHolderStyle
}
]
}
]
};
if (opt) {
_merge(option, opt);
}
return option;
};
/**
* 热力图
* configObj Object
* 属性如下：
* data Object 图表数据 必须,
* xAxis 必须
* series 必须
* el 图表绑定的dom元素 可选 不传时返回option配置项
* type 类型 连续continuous 或分段piecewise 默认连续
* 连续型：
* max 图例最大值 可选 默认数值中的最大值
* min 图例最小值 可选 默认数值中的最小值
* 分段型：
* categories Array 各分段名称
* color Arrway 颜色 可选
* unit String 数值单位 可选
* showLabel Boolean 是否显示文字 默认显示
* opt Object 自定义图表option中的属性
* */
export const renderHeatmap = (data, configObj, opt) => {
if (!data || !data.series || data.series.length === 0) {
return getNoDataOption();
}
let xAxis = data.xAxis;
let yAxis = [];
let seriesData = [];
let series = [...data.series].reverse();
let nums = [];
let visualMap = [];
for (let i = 0; i < xAxis.length; i++) {
for (let j = 0; j < series.length; j++) {
let n = series[j].data[i];
let arrItem = [i, j, n];
seriesData.push(arrItem);
if (i === 0) {
yAxis.push(series[j].name);
}
if (!isNaN(n)) {
nums.push(Number(n));
}
}
}
if (configObj.type === 'piecewise' && configObj.categories) {
let colors = getColor(configObj.color);
let pieces = [];
configObj.categories.forEach((v, i) => {
pieces.push({
label: v,
value: i + 1,
color: colors[i]
});
});
visualMap = [
{
type: 'piecewise',
pieces: pieces,
calculable: false,
orient: 'horizontal',
left: 'center',
top: 20,
itemWidth: CONFIG.LEGEND_ICON_SIZE,
itemHeight: CONFIG.LEGEND_ICON_SIZE,
itemSymbol: CONFIG.LEGEND_ICON,
textStyle: {
color: getFontColor(),
fontSize: CONFIG.FONT_S
}
}
];
} else {
let max = configObj.max;
let min = configObj.min;
let unit = configObj.unit || '';
configObj.color = configObj.color || ['#C7021D', '#79E73C'];
if (min === undefined) {
min = Math.min(...nums);
}
if (max === undefined) {
max = Math.max(...nums);
}
visualMap = [
{
min: min,
max: max,
calculable: false,
orient: 'horizontal',
left: 'center',
top: 20,
color: configObj.color,
text: ['高' + ' ' + unit, '低'],
textStyle: {
color: getFontColor(),
fontSize: CONFIG.FONT_S
}
}
];
}
let option = {
/*textStyle: {
color: null
},*/
tooltip: {
...TOOLTIP(),
formatter: function (v) {
let val = v.value[2];
if (configObj.categories) {
return configObj.categories[val - 1] || '-';
}
return val;
}
},
grid: CONFIG.GRID,
xAxis: {
...AXIS_STYLE(),
type: 'category',
data: xAxis,
axisLabel: {
interval: 0,
textStyle: {
fontSize: CONFIG.FONT_S
}
},
splitLine: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(200,200,200,0.3)', 'rgba(200,200,200,0.2)']
}
}
},
yAxis: {
...AXIS_STYLE(),
type: 'category',
data: yAxis,
axisLabel: {
interval: 0,
textSty