You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
22 KiB
563 lines
22 KiB
// 全部 echarts map 缓存
|
|
var __ALL_ECHARTS = {};
|
|
|
|
function debounce(fn, delay) {
|
|
var timer = null;
|
|
return function () {
|
|
if (timer) {
|
|
clearTimeout(timer);
|
|
}
|
|
timer = setTimeout(fn, delay);
|
|
};
|
|
}
|
|
|
|
// 当 页面大小改变时, 重新渲染 echarts
|
|
window.onresize = debounce(function () {
|
|
for (var x in __ALL_ECHARTS) {
|
|
var it = __ALL_ECHARTS[x];
|
|
if (it) {
|
|
it.echart.resize();
|
|
}
|
|
}
|
|
}, 400);
|
|
|
|
var EchartsUtil = {
|
|
/**
|
|
* 创建 一个 echarts 渲染对象
|
|
* @param domId div id 例如 'echarts-1'
|
|
* @param {Object|undefined} option 空 或者 echarts 配置 (示例:https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType)
|
|
*/
|
|
NewEcharts: function (domId, option) {
|
|
if (!domId) {
|
|
throw ('要初始化一个 echarts 对象, 必须指定 dom id');
|
|
}
|
|
|
|
var chart = {
|
|
domId: domId,
|
|
// 内部维护的 echart 对象
|
|
echart: echarts.init(document.getElementById(domId)),
|
|
event: {},
|
|
option: option,
|
|
dispose: function () {
|
|
var dom = document.getElementById(domId);
|
|
// 先销毁 dom echart
|
|
echarts.dispose(dom);
|
|
},
|
|
/**
|
|
* 渲染 echarts <br/>
|
|
* 重复调用 render, 可能引发异常（例如 地图）
|
|
* @param {Object | null} option
|
|
*/
|
|
render: function (option) {
|
|
var dom = document.getElementById(domId);
|
|
// 先销毁 dom echart
|
|
echarts.dispose(dom);
|
|
var wrapEchart = echarts.init(dom);
|
|
this.echart = wrapEchart;
|
|
if (option) {
|
|
// 如果参数不为空, 使用 传递的参数而不是自身的参数
|
|
wrapEchart.setOption(option);
|
|
} else {
|
|
wrapEchart.setOption(this.option);
|
|
}
|
|
if (this.event.click) {
|
|
wrapEchart.on('click', this.event.click);
|
|
}
|
|
},
|
|
// 方法执行前设置的变量.
|
|
setContext: function (option) {
|
|
var evt = option.event;
|
|
if (evt != null) {
|
|
this.event = evt;
|
|
}
|
|
},
|
|
/**
|
|
* - 渲染玫瑰图 示例: https://echarts.apache.org/examples/zh/editor.html?c=pie-roseType ,
|
|
* - option 参数只做简单封装
|
|
* @param {{data:Array<{name:string,value:number}>,colors:Array<string>,title:string}} option 个性化配置,比如颜色,标题
|
|
* @param option.data 数据集合 name:string,value:number
|
|
* @param option.colors 颜色集合
|
|
* @param option.title 标题
|
|
*
|
|
*/
|
|
drawRose: function (option) {
|
|
this.setContext(option);
|
|
|
|
this.option = {
|
|
color: option.colors,
|
|
title: {
|
|
text: option.title || '',
|
|
// subtext: '纯属虚构', // 副标题
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
formatter: '{b} : {c} ({d}%)'
|
|
},
|
|
// 图例显示
|
|
/*legend: {
|
|
left: 'center',
|
|
top: 'bottom',
|
|
data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
|
|
},*/
|
|
toolbox: {
|
|
show: false,
|
|
feature: {
|
|
mark: {show: true},
|
|
dataView: {show: true, readOnly: false},
|
|
magicType: {
|
|
show: true,
|
|
type: ['pie', 'funnel']
|
|
},
|
|
restore: {show: true},
|
|
saveAsImage: {show: true}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '面积模式',
|
|
type: 'pie',
|
|
radius: [30, 110],
|
|
center: ['50%', '50%'],
|
|
roseType: 'area', // area 或者 radius
|
|
data: option.data,
|
|
minAngle: 60
|
|
}
|
|
],
|
|
itemStyle: {
|
|
color: function (params) {
|
|
var a = params.dataIndex;
|
|
var xscolor = option.colors[a];
|
|
|
|
var ret = {
|
|
type: 'radial',
|
|
r: 1,
|
|
colorStops: [
|
|
{offset: 1, color: xscolor + 'A2'},
|
|
{offset: 0, color: xscolor}
|
|
],
|
|
};
|
|
return ret;
|
|
}
|
|
},
|
|
label: {
|
|
show: true,
|
|
color: '#fff'
|
|
}
|
|
};
|
|
|
|
this.render();
|
|
},
|
|
/**
|
|
* - 渲染一个 柱状图,详细请参考 https://echarts.apache.org/examples/zh/editor.html?c=bar-tick-align
|
|
* - option 参数只做简单封装
|
|
* @param {{data:Array<{name:string,value:number}>,colors:Array<string>,title:string,seriesName:string,barWidth:string}} option 个性化配置,比如颜色,标题
|
|
* @param option.data 数据集合 name:string,value:number
|
|
* @param option.colors 颜色集合
|
|
* @param option.title 标题
|
|
* @param option.barWidth 指定柱状图宽度 例如 10%
|
|
* @param {Object} option.yAxis echarts 原始配置.
|
|
* @param {Array<number>} option.barBorderRadius 边框 默认为 [5,5,0,0]
|
|
* @param {string} option.unit 单位
|
|
* @param {string} option.xName (x 轴 名称)
|
|
* @param {Object} option.grid 坐标位置
|
|
*/
|
|
drawBar: function (option) {
|
|
this.setContext(option);
|
|
option.unit = option.unit || '';
|
|
var list = option.data;
|
|
var xData = [];
|
|
var yData = [];
|
|
for (var i = 0; i < list.length; i++) {
|
|
var item = list[i];
|
|
xData.push(item.name);
|
|
yData.push(item.value);
|
|
}
|
|
|
|
var lineStyle = {
|
|
color: '#fff'
|
|
};
|
|
|
|
this.option = {
|
|
color: option.colors,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
formatter: '{b} : {c}' + option.unit //'{b} : {c} ({d}%)'
|
|
},
|
|
|
|
grid: option.grid || {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '12%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: option.xName,
|
|
show: true,
|
|
type: 'category',
|
|
data: xData,
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: lineStyle
|
|
}
|
|
}
|
|
],
|
|
yAxis: option.yAxis || [
|
|
{
|
|
show: false,
|
|
type: 'value',
|
|
axisLine: {
|
|
lineStyle: lineStyle
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
barMinHeight: 20,
|
|
name: option.seriesName,
|
|
type: 'bar',
|
|
barWidth: option.barWidth || '20%',
|
|
data: yData,
|
|
label: {
|
|
show: true,
|
|
color: '#fff',
|
|
position: 'top'
|
|
},
|
|
}
|
|
],
|
|
itemStyle: {
|
|
color: function (params) {
|
|
var a = params.dataIndex;
|
|
var xscolor = option.colors[a % option.colors.length];
|
|
var start = '', end = '';
|
|
if (typeof xscolor === 'object') {
|
|
start = xscolor[0];
|
|
end = xscolor[1];
|
|
} else {
|
|
start = xscolor;
|
|
end = xscolor + '00';
|
|
}
|
|
|
|
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: start
|
|
}, {
|
|
offset: 1,
|
|
color: end
|
|
}]);
|
|
},
|
|
barBorderRadius: option.barBorderRadius || [5, 5, 0, 0]
|
|
}
|
|
|
|
};
|
|
|
|
this.render();
|
|
},
|
|
/**
|
|
* - 渲染带背景颜色的 饼图 , 样式示例(中间最大的饼图): https://cjycyjc.mimk.cn/hbcyjc/region/130000/pages/lydyfxxt/dyfxxt.jsp
|
|
* - option 参数只做简单封装
|
|
* @param option 个性化配置,比如颜色,标题
|
|
* @param {Array<{name:string,value:number}>} option.data 数据集合 name:string,value:number
|
|
* @param {Array<string>} option.colors 颜色集合
|
|
* @param {title:string} option.title 标题
|
|
*
|
|
*/
|
|
drawPieWithImg: function (option) {
|
|
this.setContext(option);
|
|
|
|
var colorList = option.colors;
|
|
|
|
var piePatternImg = new Image();
|
|
piePatternImg.src = ECHARTS_VALUE.echartsPieImg;
|
|
var bgPatternImg = new Image();
|
|
bgPatternImg.src = ECHARTS_VALUE.pieBackgroundImg;
|
|
|
|
var rich = {
|
|
name: {
|
|
color: '#FFF',
|
|
fontSize: 18,
|
|
padding: [10, 15, 0, 10],
|
|
fontWeight: '400',
|
|
align: 'left'
|
|
},
|
|
value: {
|
|
color: '#FFF',
|
|
fontSize: 18,
|
|
padding: [10, 10, 0, 15],
|
|
fontWeight: '500',
|
|
align: 'right'
|
|
},
|
|
percent: {
|
|
color: '#FFF',
|
|
align: 'right',
|
|
fontSize: 18,
|
|
fontWeight: '500',
|
|
//padding: [0, 5]
|
|
},
|
|
hr: {
|
|
width: '100%',
|
|
height: 0,
|
|
},
|
|
cir: {
|
|
fontSize: 26,
|
|
}
|
|
};
|
|
this.option = {
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
title: {
|
|
text: '占比',
|
|
top: '46%',
|
|
textAlign: 'center',
|
|
left: '49%',
|
|
textStyle: {
|
|
color: '#6bfdff',
|
|
fontSize: 22,
|
|
fontWeight: '800'
|
|
}
|
|
},
|
|
series: [{
|
|
//name: 'pie',
|
|
type: 'pie',
|
|
selectedMode: 'single',
|
|
selectedOffset: 30,
|
|
clockwise: true,
|
|
radius: ['20%', '60%'],
|
|
center: ['50%', '50%'],
|
|
label: {
|
|
normal: {
|
|
formatter: function (params) {
|
|
return '{name|' + params.name + '}{value|' + params.value + '}\n{hr|————————}';
|
|
},
|
|
rich: rich,
|
|
}
|
|
},
|
|
labelLine: {
|
|
lineStyle: {
|
|
color: '#83dfff'
|
|
}
|
|
},
|
|
data: option.data,
|
|
itemStyle: {
|
|
normal: {
|
|
opacity: 0.7,
|
|
color: function (params) {
|
|
var ret = {image: piePatternImg, repeat: 'repeat'};
|
|
var a = params.dataIndex;
|
|
if (a == 0) {
|
|
ret = {image: bgPatternImg, repeat: 'repeat'};
|
|
} else {
|
|
ret;
|
|
}
|
|
return ret;
|
|
},
|
|
borderWidth: 3,
|
|
borderColor: '#235894'
|
|
}
|
|
}
|
|
}]
|
|
};
|
|
|
|
this.render();
|
|
},
|
|
/**
|
|
* - 渲染多个圆环图,每个圆环图一类数据, 样式示例(中间最大的饼图): https://cjycyjc.mimk.cn/hbcyjc/region/130000/pages/lydyfxxt/dyfxxt.jsp 导游等级统计
|
|
* - option 参数只做简单封装
|
|
* - [示例图片](http://192.168.0.110/img/echarts/multi-pie.png)
|
|
* @param {Array<{name:string,value:number}>} option.data 数据集合 (name 圆环图下方标题)
|
|
* @param {Array<string>} option.colors 颜色集合
|
|
* @param {number} option.offset 修改 offset 以使 圆环居中对齐,此值默认为 30
|
|
*
|
|
*/
|
|
drawMultiCircle: function (option) {
|
|
this.setContext(option);
|
|
var titleArr = [], seriesArr = [];
|
|
option.offset = option.offset || 30;
|
|
var colors = option.colors;
|
|
for (var index = 0; index < option.data.length; index++) {
|
|
var item = option.data[index];
|
|
var color = colors[index % colors.length];
|
|
titleArr.push(
|
|
{
|
|
text: item.name,
|
|
left: index * 20 + (option.offset - 1) + '%',
|
|
bottom: '0', // 标题距 底部
|
|
textAlign: 'center',
|
|
textStyle: {
|
|
fontWeight: 'normal',
|
|
fontSize: '16',
|
|
color: color,
|
|
textAlign: 'center',
|
|
},
|
|
}
|
|
);
|
|
seriesArr.push(
|
|
{
|
|
name: item.name,
|
|
type: 'pie',
|
|
clockWise: false,
|
|
radius: ['60%', '70%'],
|
|
itemStyle: {
|
|
normal: {
|
|
color: color,
|
|
shadowColor: color,
|
|
shadowBlur: 0,
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
}
|
|
},
|
|
hoverAnimation: false,
|
|
center: [index * 20 + (option.offset) + '%', '50%'],
|
|
data: [{
|
|
value: item.value,
|
|
label: {
|
|
normal: {
|
|
formatter: function (params) {
|
|
return params.value + '%';
|
|
},
|
|
position: 'center',
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: '20',
|
|
fontWeight: 'bold',
|
|
color: color
|
|
}
|
|
}
|
|
},
|
|
}, {
|
|
value: 100 - item.value,
|
|
name: 'invisible',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#4D596F' // 固定次要颜色
|
|
},
|
|
emphasis: {
|
|
color: '#4D596F' // 固定次要颜色
|
|
}
|
|
}
|
|
}]
|
|
}
|
|
);
|
|
}
|
|
|
|
|
|
this.option = {
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
|
title: titleArr,
|
|
series: seriesArr
|
|
};
|
|
this.render();
|
|
},
|
|
/**
|
|
* 区域折线图
|
|
*
|
|
* https://echarts.apache.org/examples/zh/editor.html?c=area-basic&theme=light
|
|
* @param {string[]} option.colors
|
|
* @param {Array<{name:string,value:number}>} option.data
|
|
* @param {string} option.unit 单位
|
|
* @param {string} option.xName x轴单位
|
|
* @param {Object} option.grid 坐标位置
|
|
*/
|
|
drawAreaChart: function (option) {
|
|
this.setContext(option);
|
|
|
|
var data = option.data;
|
|
var keyArr = [], valueArr = [];
|
|
for (var i = 0; i < data.length; i++) {
|
|
var it = data[i];
|
|
keyArr.push(it['key'] || it['name']);
|
|
valueArr.push(it['value']);
|
|
}
|
|
|
|
this.option = {
|
|
grid: option.grid,
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
formatter: '{b} : {c}' + option.unit //'{b} : {c} ({d}%)'
|
|
},
|
|
xAxis: {
|
|
show: true,
|
|
name: option.xName,
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: keyArr,
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
nameTextStyle: {
|
|
color: '#fff'
|
|
},
|
|
},
|
|
yAxis: {
|
|
name: '/' + option.unit,
|
|
type: 'value',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
nameTextStyle: {
|
|
color: '#fff'
|
|
},
|
|
axisLabel: {
|
|
color: '#fff'
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
}
|
|
},
|
|
series: [{
|
|
data: valueArr,
|
|
type: 'line',
|
|
itemStyle: {
|
|
color: option.colors[0] || '#8ec6ad'
|
|
},
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
areaStyle: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: option.colors[1] || '#8ec6ad'
|
|
}, {
|
|
offset: 1,
|
|
color: option.colors[2] || '#ffe'
|
|
}])
|
|
},
|
|
}]
|
|
};
|
|
this.render();
|
|
}
|
|
};
|
|
|
|
// 每次 创建 echarts 对象都放到缓存中.
|
|
__ALL_ECHARTS[domId] = chart;
|
|
return chart;
|
|
},
|
|
/**
|
|
* 清空所有图表
|
|
* @constructor
|
|
*/
|
|
Clear: function () {
|
|
for (var x in __ALL_ECHARTS) {
|
|
var it = __ALL_ECHARTS[x];
|
|
if (it) {
|
|
it.dispose();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|