<template>
<div :v-loading="chartLoad" :id="id" :chartType="chartType"></div>
</template>
<script>
import downloadIcon from '@/assets/img/export.png'
export default {
props: {
id: [String, Number],
options: Object,
chartType: String,
chartLoad: Boolean,
},
data () {
return {
downloadIcon: 'image://' + downloadIcon,
fontFamily: '"PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微软雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif'
}
},
watch: {
options(val) {
switch (this.chartType) {
case 'Ring':
this.drawRing(this.id, val);
break;
case 'Bar':
this.drawBar(this.id, val);
break;
case 'GroupBar':
this.drawGroupBar(this.id, val);
break;
case 'FtBar':
this.drawFtBar(this.id, val);
break;
case 'FgBar':
this.drawFgBar(this.id, val);
break;
case 'Pie':
this.drawPie(this.id, val);
break;
case 'horFtBar':
this.drawHozFtBar(this.id, val);
break;
case 'horFgBar':
this.drawHozFgBar(this.id, val);
break;
case 'areaAge':
this.drawHozAfgBar(this.id, val);
break;
case 'faceGender':
this.drawFaceGender(this.id, val);
break;
case 'faceAge':
this.drawfaceAge(this.id, val);
break
default:
break;
}
}
},
mounted() {
switch (this.chartType) {
case 'Ring':
this.drawRing(this.id, this.options);
break;
case 'Bar':
this.drawBar(this.id, this.options);
break;
case 'GroupBar':
this.drawGroupBar(this.id, this.options);
break;
case 'FtBar':
this.drawFtBar(this.id, this.options);
break;
case 'FgBar':
this.drawFgBar(this.id, this.options);
break;
case 'Pie':
this.drawPie(this.id, this.options);
break;
case 'horFtBar':
this.drawHozFtBar(this.id, this.options);
break;
case 'horFgBar':
this.drawHozFgBar(this.id, this.options);
break;
case 'areaAge':
this.drawHozAfgBar(this.id, this.options);
break;
case 'faceGender':
this.drawFaceGender(this.id, this.options);
break;
case 'faceAge':
this.drawfaceAge(this.id, this.options);
break
default:
break;
}
},
methods: {
i18nFormatter(title){
let languageTitle = 'echartsTitle.' + title;
return this.$t(languageTitle)
},
// check and init chartInstance
initChartInstance(domId) {
let chartInstance = null,
chartDom = document.getElementById(domId);
chartInstance = this.$echarts.getInstanceByDom(chartDom) || this.$echarts.init(chartDom);
return chartInstance;
},
drawRing(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
color: ['#58adf4', '#af89d7'],
tooltip: {},
legend: {
orient: 'horizontal',
x: 'center',
itemWidth: 12,
itemHight: 12,
itemGap: 15,
bottom: 30,
selected: {},
textStyle: {
color: '#555'
},
data: []
}
}
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
if(!option.series) return;
if(option.series.length > 0) {
option.series[0].data.forEach(item => {
option.legend.data.push(item.name);
})
for(let i = 0, len = option.series.length; i < len; i++) {
option.series[i].type = 'pie';
option.series[i].center = ['50%', '50%'];
option.series[i].radius = ['40%', '50%'];
option.series[i].label = {
normal: {
show: true,
color: '#666',
fontFamily: this.fontFamily,
formatter: '{d}%'
},
emphasis: {
show: true,
color: '#666',
fontFamily: this.fontFamily,
formatter: '{d}%'
}
}
option.series[i].labelLine = {
normal: {
show: true
}
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
// option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
color: ['#58adf4', '#af89d7'],
tooltip: {},
legend: {
data: [],
bottom: 26,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 14
},
itemGap: 34,
itemWidth: 10,
itemHeight: 10
},
yAxis: {
type: 'value',
},
xAxis: {
type: 'category',
data: []
}
}
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
if(!option.series) return;
if(option.series.length > 0) {
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
let totalNum = 0;
option.series.forEach(item => {
item.data.forEach(k => {
totalNum += k;
})
})
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barMaxWidth = '240px';
option.series[i].barGap = '6px';
option.series[i].label = {
normal: {
show: true,
position: 'top',
formatter: function (params) {
if(params.value) {
return ((params.value / totalNum) * 100).toFixed(2) + '%';
} else if(params.value == 0) {
return '0%';
}
}
}
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawGroupBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'],
tooltip: {
backgroundColor: '#fff',
padding: [0, 0, 0, 0],
textStyle: {
color: '#333'
},
axisPointer: {
type: 'line',
animation: true,
lineStyle: {
color: 'transparent'
}
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
// grid: {
// top: 80,
// left: 70,
// bottom: 97,
// right: 45
// },
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
}
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
if(!option.series) return;
let totalNum = 0,
colorArr = ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'];
if(option.series.length > 0) {
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
option.series.forEach(item => {
item.data.forEach(k => {
totalNum += k;
})
})
for(let i = 0, len = option.series.length; i < len; i++) {
option.series[i].type = 'bar';
// option.series[i].barWidth = 20;
option.series[i].barGap = '6px';
// option.series[i].itemStyle = {
// normal: {
// color: colorArr[i]
// }
// }
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', dataVal = '', ratio = '';
if(params.value || params.value == 0) {
dataVal = params.value;
ratio = (params.value / totalNum * 100).toFixed(2) + '%';
} else {
dataVal = '--';
ratio = '--';
}
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params.name + '</div><div>'
+ '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + _this.$t('asisTab.manNum') + ': ' + dataVal + _this.$t('format.perNum') +'</p>'
+ '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + _this.$t('asisTab.proportion') + ': ' + ratio + '</p>'
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawFtBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#58adf4', '#af89d7'],
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
grid: {
top: 68,
left: 60,
bottom: 60,
right: 45
},
yAxis: {
type: 'value',
name: this.$t('asisTab.manNum') + '/' + this.$t('format.perTime'),
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
},
legend: {
data: [],
bottom: 12,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 14
},
itemGap: 85,
itemWidth: 10,
itemHeight: 10
},
}
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
if(!option.series) return;
if(option.series.length > 0) {
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barGap = '15%';
option.series[i].barMaxWidth = '60px';
option.legend.data.push(option.series[i].name);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', dataVal = '', unit = '';
if(params.length) {
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params[0].axisValue + '</div><div>';
params.forEach(item => {
if(item.value || item.value == 0) {
dataVal = item.value > 100000 ? (item.value / 10000).toFixed(2) : item.value;
unit = item.value > 100000 ? _this.$t('format.millionNum') : _this.$t('format.perNum');
} else {
dataVal = '--';
unit = '';
}
htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + item.seriesName + ': ' + dataVal + unit + '</p>';
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
// console.log('option', JSON.stringify(option))
myChart.setOption(option);
},
drawFgBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#58adf4', '#af89d7'],
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
grid: {
top: 68,
left: 60,
bottom: 60,
right: 45
},
yAxis: {
type: 'value',
name: this.$t('asisTab.manNum') + '/' + this.$t('format.perTime'),
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
type: 'category',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
},
tooltip: {
// show: true,
trigger: 'axis',
backgroundColor: '#fff',
padding: [0, 0, 0, 0],
textStyle: {
color: '#333'
},
axisPointer: {
type: 'line',
animation: true,
lineStyle: {
color: 'transparent'
}
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
legend: {
data: [],
bottom: 12,
selected: {},
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 14
},
// itemGap: 85,
itemWidth: 10,
itemHeight: 10
},
}
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 26,
top: 26,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
if(option.series.length > 0) {
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
// let totalNum = 0;
// option.series.forEach(item => {
// item.data.forEach(k => {
// totalNum += k;
// })
// })
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barGap = '15%';
option.series[i].barMaxWidth = '60px';
option.series[i].stack = 'gender';
if(option.series[i].name) {
if(option.series[i].name !== '未知') {
option.legend.selected[option.series[i].name] = true;
} else {
option.legend.selected[option.series[i].name] = false;
}
}
option.legend.data.push(option.series[i].name);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', ratio = '', totalNum = 0, dataVal = '', unit = '';
if(params.length) {
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params[0].axisValue + '</div><div>';
params.forEach(item => {
totalNum += item.value;
})
params.forEach(item => {
if(item.value || item.value == 0) {
dataVal = item.value > 100000 ? (item.value / 10000).toFixed(2) : item.value;
unit = item.value > 100000 ? _this.$t('format.millionNum') : _this.$t('format.perNum');
ratio = totalNum ? (item.value / totalNum * 100).toFixed(2) + '%' : '--';
} else {
dataVal = '--';
unit = '';
ratio = '--';
}
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + item.seriesName + ': ' + dataVal + unit + '</p>';
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">占比: ' + ratio + '</p>';
htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:#444444; overflow: hidden;"><span style="float: left;">'+ item.seriesName + ': ' +'</span><span style="float: left; width: 60px; text-align: center;">'+ dataVal + unit +'</span><span style="float: right; width: 60px; text-align: center;">'+ ratio +'</span></p>';
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawPie(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
// color: ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c'],
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
tooltip: {
show: true,
// trigger: 'axis',
backgroundColor: '#fff',
padding: [0, 0, 0, 0],
textStyle: {
color: '#333333'
},
axisPointer: {
type: "line",
animation: true,
lineStyle: {
color: '#444'
}
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
}
};
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
option.legend = {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
bottom: 26,
selected: {},
textStyle: {
color: '#555'
},
data: []
}
let itemDatas = [], legendData = [], totalNum = 0;
if(!option.series) return;
if(option.series.length > 0) {
option.series.forEach(item => {
item.data.forEach(dataItem => {
totalNum += dataItem.value;
});
})
if(totalNum > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
for(var j = 0;j<option.series[i].data.length;j++){
if(option.series[i].data[j].value || option.series[i].data[j].value == 0) {
if(option.series[i].data[j].name) {
if(option.series[i].data[j].name !== '未知') {
option.legend.selected[option.series[i].data[j].name] = true;
} else {
option.legend.selected[option.series[i].data[j].name] = false;
}
}
option.legend.data.push({
name: option.series[i].data[j].name,
icon: 'rect'
})
} else {
option.series[i].label.show = false;
}
}
option.series[i].type = 'pie';
option.series[i].radius = ['0%', '50%'];
option.series[i].center = ['50%', '50%'];
option.series[i].itemStyle = {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
option.series[i].label = {
normal: {
show: true,
position: 'outside',
formatter: '{b} {d}%'
},
emphasis: {
show: true
}
};
option.series[i].labelLine = {
normal: {
show: true
}
};
}
let _this = this;
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', dataVal = '', ratio = '';
if(params.value || params.value == 0) {
dataVal = params.value;
ratio = (params.value / totalNum * 100).toFixed(2) + '%';
} else {
dataVal = '--';
ratio = '--';
}
htmls += '<div>'
+ '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + params.name + ': ' + dataVal + _this.$t('format.perNum') +'</p>'
+ '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + _this.$t('asisTab.proportion') + ': ' + params.percent + '%</p>'
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
}
else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.series = [];
// option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
// option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
},
drawHozFtBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#58adf4', '#af89d7'],
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
grid: {
top: 56,
left: 60,
bottom: 70,
right: 28
},
yAxis: {
type: 'category',
// name: this.$t('asisTab.manNum') + '/' + this.$t('format.perTime'),
// nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666',
formatter: function(value) {
value = value.toString();
let maxLen = 3;
if (value.length > maxLen) {
return value.substring(0, maxLen - 1) + '...';
} else {
return value;
}
},
},
data: []
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
},
legend: {
data: [],
bottom: 12,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 12
},
itemGap: 85,
itemWidth: 10,
itemHeight: 10
},
}
option = {...defaultOption, ...option};
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 24,
top: 16,
};
}
if(!option.series) return;
if(option.series.length > 0) {
try {
option.yAxis.data = option.xaxis.data;
} catch (error) { }
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barGap = '15%';
option.series[i].barMaxWidth = '60px';
option.legend.data.push(option.series[i].name);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', dataVal = '', unit = '';
if(params.length) {
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params[0].axisValue + '</div><div>';
params.forEach(item => {
if(item.value || item.value == 0) {
dataVal = item.value > 100000 ? (item.value / 10000).toFixed(2) : item.value;
unit = item.value > 100000 ? _this.$t('format.millionNum') : _this.$t('format.perNum');
} else {
dataVal = '--';
unit = '';
}
htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + item.seriesName + ': ' + dataVal + unit + '</p>';
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
// console.log('option', JSON.stringify(option))
myChart.setOption(option);
},
drawHozFgBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#58adf4', '#af89d7'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
grid: {
top: 56,
left: 60,
bottom: 70,
right: 28
},
yAxis: {
type: 'category',
// name: this.$t('asisTab.manNum') + '/' + this.$t('format.perTime'),
// nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666',
formatter: function(value) {
if(value && value.length) {
value = value.toString();
let maxLen = 3;
if (value.length > maxLen) {
return value.substring(0, maxLen - 1) + '...';
} else {
return value;
}
}
},
},
data: []
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
legend: {
data: [],
bottom: 12,
selected: {},
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 12
},
// itemGap: 85,
itemWidth: 10,
itemHeight: 10
},
}
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 26,
top: 26,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
if(option.series.length > 0) {
try {
option.yAxis.data = option.xaxis.data;
} catch (error) { }
// let totalNum = 0;
// option.series.forEach(item => {
// item.data.forEach(k => {
// totalNum += k;
// })
// })
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barGap = '15%';
option.series[i].barMaxWidth = '60px';
option.series[i].stack = 'gender';
if(option.series[i].name) {
if(option.series[i].name !== '未知') {
option.legend.selected[option.series[i].name] = true;
} else {
option.legend.selected[option.series[i].name] = false;
}
}
option.legend.data.push(option.series[i].name);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', ratio = '', totalNum = 0, dataVal = '', unit = '';
if(params.length) {
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params[0].axisValue + '</div><div>';
params.forEach(item => {
totalNum += item.value;
})
params.forEach(item => {
if(item.value || item.value == 0) {
dataVal = item.value > 100000 ? (item.value / 10000).toFixed(2) : item.value;
unit = item.value > 100000 ? _this.$t('format.millionNum') : _this.$t('format.perNum');
ratio = totalNum ? (item.value / totalNum * 100).toFixed(2) + '%' : '--';
} else {
dataVal = '--';
unit = '';
ratio = '--';
}
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + item.seriesName + ': ' + dataVal + unit + '</p>';
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">占比: ' + ratio + '</p>';
htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:#444444; overflow: hidden;"><span style="float: left;">'+ item.seriesName + ': ' +'</span><span style="float: left; width: 60px; text-align: center;">'+ dataVal + unit +'</span><span style="float: right; width: 60px; text-align: center;">'+ ratio +'</span></p>';
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
// console.log('fg', JSON.stringify(option))
myChart.setOption(option);
},
drawHozAfgBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
// color: ['#58adf4', '#af89d7'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
grid: {
top: 56,
left: 60,
bottom: 70,
right: 28
},
yAxis: {
type: 'category',
// name: this.$t('asisTab.manNum') + '/' + this.$t('format.perTime'),
// nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666',
formatter: function(value) {
if(value && value.length) {
value = value.toString();
let maxLen = 3;
if (value.length > maxLen) {
return value.substring(0, maxLen - 1) + '...';
} else {
return value;
}
}
},
},
data: []
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 13,
fontFamily: this.fontFamily,
color: '#666'
},
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
legend: {
data: [],
bottom: 12,
// left: 4,
itemGap: 4,
selected: {},
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 11
},
// itemGap: 85,
itemWidth: 8,
itemHeight: 8
},
}
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 26,
top: 26,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
if(option.series.length > 0) {
try {
option.yAxis.data = option.xaxis.data;
} catch (error) { }
// let totalNum = 0;
// option.series.forEach(item => {
// item.data.forEach(k => {
// totalNum += k;
// })
// })
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].barWidth = 20;
option.series[i].barGap = '15%';
option.series[i].barMaxWidth = '60px';
option.series[i].stack = 'gender';
if(option.series[i].name) {
if(option.series[i].name !== '未知') {
option.legend.selected[option.series[i].name] = true;
} else {
option.legend.selected[option.series[i].name] = false;
}
}
option.legend.data.push(option.series[i].name);
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
let _this = this;
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', ratio = '', totalNum = 0, dataVal = '', unit = '';
if(params.length) {
htmls += '<div style="font-size:16px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px; padding-right:15px; text-align: left; color: #0068FF;">' + params[0].axisValue + '</div><div>';
params.forEach(item => {
totalNum += item.value;
})
params.forEach(item => {
if(item.value || item.value == 0) {
dataVal = item.value > 100000 ? (item.value / 10000).toFixed(2) : item.value;
unit = item.value > 100000 ? _this.$t('format.millionNum') : _this.$t('format.perNum');
ratio = totalNum ? (item.value / totalNum * 100).toFixed(2) + '%' : '--';
} else {
dataVal = '--';
unit = '';
ratio = '--';
}
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">' + item.seriesName + ': ' + dataVal + unit + '</p>';
// htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:"#444444"">占比: ' + ratio + '</p>';
htmls += '<p style="font-size:14px; text-align: left; padding:4px 15px; color:#444444; overflow: hidden;"><span style="float: left;">'+ item.seriesName + ': ' +'</span><span style="float: left; width: 60px; text-align: center;">'+ dataVal + unit +'</span><span style="float: right; width: 60px; text-align: center;">'+ ratio +'</span></p>';
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
// console.log('fg', JSON.stringify(option))
myChart.setOption(option);
},
drawFaceGender(domId,option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('defalut',{
text: '',
color: '#409eff'
})
let defaultOption = {
legend: {
bottom: 0,
},
grid: {
top: 28,
left: 50,
bottom: 48,
right: 21
},
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
padding: [0, 0, 0, 0],
textStyle: {
color: '#333'
},
axisPointer: {
type: 'line',
animation: true,
lineStyle: {
color: 'transparent'
}
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
// axisPointer: {
// type: 'cross',
// crossStyle: {
// color: '#999'
// }
// }
},
xAxis: {
type: 'category',
boundaryGap: true,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
// axisPointer: {
// type: 'shadow'
// },
data: [],
},
yAxis: [
{
type: 'value',
name: this.$t('format.perNum'),
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
// {
// type: 'value',
// name: '人数',
// nameRotate: 1,
// splitLine: {
// lineStyle: {
// color: '#EBEBEB'
// }
// },
// axisLine: {
// lineStyle: {
// color: '#888'
// }
// },
// axisTick: {
// show: false
// },
// axisLabel: {
// fontSize: 12,
// fontFamily: this.fontFamily,
// color: '#666'
// }
// }
],
}
if(option.series) {
option['color'] = ['#97c05c', '#3BB8FF', '#FFC62E'];
option = {...defaultOption, ...option};
option.xAxis.data = option.xaxis.data;
option.series.forEach(item => {
if(item.type == 'bar') {
item.barMaxWidth = '30px'
item.stack = 1
}
})
if(option.title){
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 0,
top: 0,
};
}
let _this = this;
option.tooltip.formatter = function(params, ticket, callback) {
let time,nextTime,regex = /\d{2}\:\d{2}$/;
if(regex.test(params[0].name)) {
time = Number(params[0].name.split(':')[0]);
nextTime = time > 8 ? (time + 1) + ':00' : '0' + (time + 1) + ':00';
}
let htmls = '';
htmls += '<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px;text-align: left;">' + params[0].name + (nextTime ? '-' + nextTime : '') + '</div><div>';
for(let i = 0; i < params.length; i++) {
htmls += '<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">' + params[i].marker + ' ' + params[i].seriesName + ': ' + (params[i].data ? params[i].data : '--') + _this.$t('format.perNum') +'</p>';
}
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
}else{
setTimeout(() => {
myChart.hideLoading();
}, 500);
defaultOption.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
myChart.setOption(defaultOption)
}
},
drawfaceAge(domId,option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('defalut',{
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
legend: {
type: 'scroll',
bottom: 0,
},
grid: {
top: option.gridTop ? option.gridTop : 28,
left: 50,
bottom: 48,
right: 21
},
tooltip: {
trigger: 'axis',
backgroundColor: '#fff',
padding: [0, 0, 0, 0],
textStyle: {
color: '#333'
},
axisPointer: {
type: 'line',
animation: true,
lineStyle: {
color: 'transparent'
// color: '#444'
}
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)'
},
xAxis: {
type: 'category',
boundaryGap: true,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666',
},
data: [],
},
yAxis: {
type: 'value',
name: this.$t('format.perNum'),
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
},
// dataZoom: {
// type: 'slider',
// bottom: '0'
// }
}
if(option.series) {
option['color'] = ['#6e6fc1', '#33bafe', '#fec62b', '#ff9c01', '#38d4be', '#79ce4c', '#0069FF'];
option = {...defaultOption, ...option};
if(option.title){
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 0,
top: 0,
};
}
option.xAxis.data = option.xaxis.data;
option.series.forEach((item,index) => {
// item.type = 'line';
item.barGap = 0;
item.barMaxWidth = '30px';
item.stack = 1;
})
let _this = this;
option.tooltip.formatter = function(params, ticket, callback) {
let time,nextTime,regex = /\d{2}\:\d{2}$/;
if(regex.test(params[0].name)) {
time = Number(params[0].name.split(':')[0]);
nextTime = time > 8 ? (time + 1) + ':00' : '0' + (time + 1) + ':00';
}
let htmls = '';
htmls += '<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px;text-align: left;">' + params[0].name + (nextTime ? '-' + nextTime : '') + '</div><div>';
for(let i = 0; i < params.length; i++) {
htmls += '<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">' + params[i].marker + ' ' + params[i].seriesName + ': ' + (params[i].data ? params[i].data : '--') + _this.$t('format.perNum') +'</p>';
}
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
}else{
setTimeout(() => {
myChart.hideLoading();
}, 500);
defaultOption.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
myChart.setOption(defaultOption)
}
},
}
}
</script>