<template>
<div :id="id" :chartType="chartType"></div>
</template>
<script>
import downloadIcon from '@/assets/img/export.png'
import { Loading } from 'element-ui';
export default {
props: {
options: Object,
id: [String, Number],
chartType: String
},
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 'Heatmap':
this.drawHeatmap(this.id, val);
break;
case 'YearHeatmap':
this.drawYearHeatmap(this.id, val);
break;
case 'Scatter':
this.drawScatter(this.id, val);
break;
case 'YearScatter':
this.drawYearScatter(this.id, val);
break;
case 'GenderBar':
this.drawGenderBar(this.id, val);
break;
case 'AgeBar':
this.drawAgeBar(this.id, val);
break;
case 'HolidayActBar':
this.drawHoActBar(this.id, val);
break;
case 'Line':
this.drawLine(this.id, val);
break;
case 'YearLine':
this.drawYearLine(this.id, val);
break;
case 'TfLine':
this.drawTfLine(this.id, val);
break;
case 'Pie':
this.drawPie(this.id, val);
break;
case 'ComtPie':
this.drawComtPie(this.id, val);
break;
case 'Radar':
this.drawRadar(this.id, val);
break;
case 'LineBar':
this.drawLineBar(this.id, val);
break;
case 'ActLineBg':
this.drawLineBg(this.id, val);
break;
case 'ActHolidayActBar':
this.drawActBar(this.id, val);
break;
case 'ActLine':
this.drawActLine(this.id, val);
break;
case 'RankBar':
this.drawRankBar(this.id, val);
break;
case 'GroupBar':
this.drawGroupBar(this.id, val);
break;
default:
break;
}
}
},
mounted() {
switch (this.chartType) {
case 'Heatmap':
this.drawHeatmap(this.id, this.options);
break;
case 'YearHeatmap':
this.drawYearHeatmap(this.id, this.options);
break;
case 'Scatter':
this.drawScatter(this.id, this.options);
break;
case 'YearScatter':
this.drawYearScatter(this.id, this.options);
break;
case 'GenderBar':
this.drawGenderBar(this.id, this.options);
break;
case 'AgeBar':
this.drawAgeBar(this.id, this.options);
break;
case 'HolidayActBar':
this.drawHoActBar(this.id, this.options);
break;
case 'Line':
this.drawLine(this.id, this.options);
break;
case 'YearLine':
this.drawYearLine(this.id, this.options);
break;
case 'TfLine':
this.drawTfLine(this.id, this.options);
break;
case 'Pie':
this.drawPie(this.id, this.options);
break;
case 'ComtPie':
this.drawComtPie(this.id, this.options);
break;
case 'Radar':
this.drawRadar(this.id, this.options);
break;
case 'LineBar':
this.drawLineBar(this.id, this.options);
break;
case 'ActLineBg':
this.drawLineBg(this.id, this.options);
break;
case 'ActHolidayActBar':
this.drawActBar(this.id, this.options);
break;
case 'ActLine':
this.drawActLine(this.id, this.options);
break;
case 'RankBar':
this.drawRankBar(this.id, this.options);
break;
case 'GroupBar':
this.drawGroupBar(this.id, this.options);
break;
default:
break;
}
},
methods: {
i18nFomatter(title){
let langeuageTitle = 'echartsTitle.' + title;
return this.$t(langeuageTitle)
},
// check and init chartInstance
initChartInstance(domId) {
let chartInstance = null,
chartDom = document.getElementById(domId);
chartInstance = this.$echarts.getInstanceByDom(chartDom) || this.$echarts.init(chartDom);
return chartInstance;
},
drawHeatmap(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let yAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let defaultOption = {
title: {},
animation: false,
grid: {
left: 36,
right: 0,
top: 36,
bottom: 52
},
toolbox: {
show: true,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: 0,
right: 0
},
xAxis: {
type: 'category',
data: [],
nameTextStyle: {
color: '#444',
fontSize: 12,
fontFamily: this.fontFamily
},
axisLabel: {
width: 140
},
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
}
},
yAxis: {
type: 'category',
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
data: yAxisData
},
visualMap: {
min: 0,
max: 20,
calculable: true,
orient: 'horizontal',
left: 'left',
bottom: -10,
itemWidth: 15,
color: ['#0068FF', '#fff'],
},
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
}
}
option = {...defaultOption, ...option};
// debugger
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;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(option.series.length > 0) {
let seriesData = [], yIndex = null;
let maxArr = [], onedimen = [], maxNum = null;
for(let i = 0, len = option.series.length; i < len; i++) {
option.series[i].type = 'heatmap';
option.series[i].itemStyle = {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
option.series[i].label = {
normal: {
show: true,
color: '#444'
}
};
}
// 处理series data
option.series.forEach((item, index) => {
yIndex = getIndex(item.name, yAxisData);
maxArr.push(item.data);
for(let i = 0; i < item.data.length; i++) {
seriesData.push([parseInt(yIndex), i, item.data[i]]);
}
});
try {
onedimen = maxArr.join(',').split(',');
maxNum = Math.max.apply(null, onedimen);
} catch (error) {
// console.log('heatmap max value', error.message)
}
option.visualMap.max = maxNum;
seriesData = seriesData.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
for(let i in option.series) {
option.series[i].data = [];
option.series[i].data = seriesData.splice(0, option.xAxis.data.length);
}
// 获取在Y轴的值
function getIndex (val, arr) {
for(let i in arr) {
if(val == arr[i]) {
return i;
}
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.visualMap.show = false;
option.yAxis.data = [];
option.grid.height = 670;
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
// tooltip
option.tooltip.formatter = function (params, ticket, callback) {
// if(!params.name) return;
let yAxisArr = option.yAxis.data;
let xAxisArr = option.xAxis.data;
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; color: #0068FF;">' + yAxisArr[params.value[1]] + '</div><div>'
+ '<p style="font-size:13px;padding:4px 15px;color:"#444444"">' + xAxisArr[params.value[0]] + ': ' + this.$t('echarts.averageThermal') + params.value[2] + '</p>'
+ '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawYearHeatmap(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let yAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
let defaultOption = {
title: {},
animation: false,
grid: {
left: 36,
right: 0,
top: 36,
bottom: 52
},
xAxis: {
type: 'category',
data: [],
nameTextStyle: {
color: '#444',
fontSize: 12,
fontFamily: this.fontFamily
},
axisLabel: {
width: 140
},
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
}
},
yAxis: {
type: 'category',
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
data: yAxisData
},
toolbox: {
show: true,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: 0,
right: 0
},
visualMap: {
show: false,
min: 0,
max: 20,
calculable: true,
orient: 'horizontal',
left: 'left',
bottom: -10,
itemWidth: 15,
color: ['#0068FF', '#fff'],
},
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
},
// dataZoom: {
// type: 'slider'
// }
}
option = {...defaultOption, ...option};
// debugger
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,
};
}
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(!option.series) return;
if(option.series.length > 0) {
let seriesData = [], yIndex = null;
let maxArr = [], onedimen = [], maxNum = null;
for(let i = 0, len = option.series.length; i < len; i++) {
option.series[i].type = 'heatmap';
option.series[i].itemStyle = {
emphasis: {
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
option.series[i].label = {
normal: {
show: true,
color: '#444'
}
};
}
// 处理series data
option.series.forEach((item, index) => {
yIndex = getIndex(item.name, yAxisData);
maxArr.push(item.data);
for(let i = 0; i < item.data.length; i++) {
seriesData.push([parseInt(yIndex), i, item.data[i]]);
}
});
onedimen = maxArr.join(',').split(',');
maxNum = Math.max.apply(null, onedimen);
option.visualMap.max = maxNum;
seriesData = seriesData.map(function (item) {
return [item[1], item[0], item[2] || '-'];
});
for(let i in option.series) {
option.series[i].data = [];
option.series[i].data = seriesData.splice(0, option.xAxis.data.length);
}
// 获取在Y轴的值
function getIndex (val, arr) {
for(let i in arr) {
if(val == arr[i]) {
return i;
}
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.visualMap.show = false;
option.yAxis.data = [];
option.grid.height = 670;
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
// tooltip
option.tooltip.formatter = function (params, ticket, callback) {
// if(!params.name) return;
let yAxisArr = option.yAxis.data;
let xAxisArr = option.xAxis.data;
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; color: #0068FF;">' + yAxisArr[params.value[1]] + '</div><div>'
+ '<p style="font-size:13px;padding:4px 15px;color:"#444444"">' + xAxisArr[params.value[0]] + ': ' + this.$t('echarts.averageThermal') + params.value[2] + '</p>'
+ '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawScatter(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
// let colorArr = ['#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3'];
let colorArr = ['#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E'];
// let colorArr = this.getRandomColors(20);
let defaultOption = {
backgroundColor: '#fff',
grid: {
top: 88,
left: 74,
right: 75,
},
color: colorArr,
legend: {
y: 'top',
// data: legendData,
textStyle: {
color: '#444',
fontSize: 14,
fontFamily: this.fontFamily
},
top: 26,
data: []
},
toolbox: {
show: false,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: '26px',
right: '21px'
},
xAxis: {
type: 'category',
name: '日期',
// data: xAxisData,
data: [],
nameTextStyle: {
color: '#888',
// fontSize: 12,
fontFamily: this.fontFamily
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameTextStyle: {
color: '#888',
// fontSize: 12,
fontFamily: this.fontFamily
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#E5E5E5'
}
},
axisTick: {
show: false
},
// data: []
},
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
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: 26,
top: 26,
};
}
if(!option.series) return;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) {}
let tooltipData = [], dataNumArr = [], maxNum = null, minNum = null, ratio = null, maxSize = 120, minSize = 13, maxRatio = null, cords = 6, itemColors = '', yAxisData = [], _dataNumIndex = 0;
let symbolsizeArr = [], seriesColors = [];;
if(option.series.length > 0) {
seriesColors = this.getRandomColors(option.series.length)
let _seriesData = [];
option.series.forEach((item, index) => {
symbolsizeArr[index] = [];
item.data.forEach((item2, index2) => {
if(item2) {
symbolsizeArr[index][index2] = item2.value1
// symbolsizeArr.push(item2.value1);
dataNumArr.push(item2.value1);
// yAxisData.push(item2.weather.aqi);
} else {
symbolsizeArr[index][index2] = 0;
// symbolsizeArr.push(0);
}
// if(item2) {
// dataNumArr.push(item2.value1);
// yAxisData.push(item2.weather.aqi);
// }
})
})
maxNum = Math.max.apply(null, dataNumArr);
minNum = Math.min.apply(null, dataNumArr);
// ratio = maxNum == minNum ? 0 : minNum / maxNum;
ratio = this.computeSize(maxNum, maxSize);
for(let i = 0, len = option.series.length; i < len; i++) {
let legendName = this.getSessionLocal('weather', option.series[i].name);
option.series[i].type = 'scatter';
option.series[i].symbolSize = (data, param) => {
let _size = null;
_size = symbolsizeArr[i][param.dataIndex] ? symbolsizeArr[i][param.dataIndex] / ratio : 0;
if(_size == 0) {
_size = 0;
} else {
_size = _size <= 4 ? 4 : _size;
}
return _size;
};
// itemColors = colorArr[i] ? colorArr[i] : '#f00'
option.series[i].itemStyle = {
normal: {
color: colorArr[i],
borderColor: colorArr[i],
borderWidth: 2,
opacity: .5
// {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.5,
// colorStops: [{
// offset: 0, color: '#e5e5e5' // 0% 处的颜色
// }, {
// offset: 1, color: colorArr[i] // 100% 处的颜色
// }],
// globalCoord: false
// }
}
};
legendName = legendName ? legendName : '未知' + [i];
option.legend.data.push({
name: legendName,
icon: 'circle'
});
option.series[i].name = legendName;
// option.legend.data.push(option.series[i].name);
tooltipData[legendName] = option.series[i].data;
// tooltipData[option.series[i].name] = option.series[i].data;
option.series[i].data.forEach((item, index) => {
if(item) {
// _seriesData[index] = item.value1;
_seriesData[index] = item.weather.aqi;
} else {
_seriesData[index] = 0;
}
});
option.series[i].data = _seriesData;
_seriesData = []; // 清空组 下一次就不会被覆盖
}
// option.yAxis.data = yAxisData.sort((a, b) => { return a - b });
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.grid.height = 600;
option.xAxis.data = [];
// option.yAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
// tooltip
let that = this;
option.tooltip.formatter = function (params, ticket, callback) {
if(!tooltipData[params.seriesName][params.dataIndex]) return;
let toolData, flowNum = '', weatherStr = '', apiIndex = '', temperature = '';
let htmls = '';
toolData = tooltipData[params.seriesName][params.dataIndex];
if(toolData) {
flowNum = toolData.value1;
weatherStr = that.getSessionLocal('weather', toolData.weather.type);
apiIndex = toolData.weather.aqi;
temperature = (toolData.weather.ltemp) + '℃ ~ ' + (toolData.weather.htemp) + '℃';
}
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; color: #0068FF;">' + (params.name).replace(/\(|\)/g, ' ') + '</div><div>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + option.kpiName + ' : ' + flowNum + this.$t('format.perTime') + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + '天气 : ' + weatherStr + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + 'AQI指数 : ' + apiIndex + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + '温度 : ' + temperature + '</p>'
+ '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawYearScatter(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let colorArr = ['#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E', '#6784E3', '#3BB8FF', '#3D97CB', '#87D14B', '#0069FF', '#FF9631', '#FFC62E'];
// let colorArr = this.getRandomColors(20);
let defaultOption = {
backgroundColor: '#fff',
grid: {
top: 64,
left: 42,
right: 40,
},
color: colorArr,
legend: {
y: 'top',
// data: legendData,
textStyle: {
color: '#444',
fontSize: 14,
fontFamily: this.fontFamily
},
top: 26,
data: []
},
toolbox: {
show: false,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: '-1px',
right: '-3px'
},
xAxis: {
type: 'category',
name: '日期',
// data: xAxisData,
data: [],
nameTextStyle: {
color: '#888',
// fontSize: 12,
fontFamily: this.fontFamily
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
name: 'AQI指数',
nameLocation: 'end',
nameTextStyle: {
color: '#888',
// fontSize: 12,
fontFamily: this.fontFamily
},
axisLine: {
lineStyle: {
color: '#535353'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dotted',
color: '#E5E5E5'
}
},
axisTick: {
show: false
}
},
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333'
},
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: 26,
top: 26,
};
}
if(!option.series) {
return;
}
let tooltipData = [], dataNumArr = [], symbolsizeArr = [], _dataNumIndex = 0, maxNum = null, minNum = null, ratio = null, maxSize = 80, cords = 6, itemColors = '';
let seriesColors = [];
if(option.series.length > 0) {
let _seriesData = [];
try {
option['dataZoom'] = {
type: 'slider',
bottom: 0
};
option.xAxis.data = option.xaxis.data;
seriesColors = this.getRandomColors(option.series.length);
} catch (error) { }
option.series.forEach((item, index) => {
symbolsizeArr[index] = [];
item.data.forEach((item2, index2) => {
if(item2) {
symbolsizeArr[index][index2] = item2.value1;
// symbolsizeArr.push(item2.value1);
dataNumArr.push(item2.value1);
} else {
symbolsizeArr[index][index2] = 0
// symbolsizeArr.push(0);
}
})
})
maxNum = Math.max.apply(null, dataNumArr);
minNum = Math.min.apply(null, dataNumArr);
// ratio = maxNum == minNum ? 0 : minNum / maxNum;
ratio = this.computeSize(maxNum, maxSize);
for(let i = 0, len = option.series.length; i < len; i++) {
option.series[i].type = 'scatter';
option.series[i].symbolSize = (data, param) => {
let _size = null;
_size = symbolsizeArr[i][param.dataIndex] ? symbolsizeArr[i][param.dataIndex] / ratio : 0;
if(_size == 0) {
_size = 0;
} else {
_size = _size <= 4 ? 4 : _size;
}
return _size
};
option.series[i].animation = false;
// try{
// itemColors = colorArr[i]
// } catch(e) {
// console.log(e.message);
// itemColors = '#f00'
// }
// itemColors = colorArr[i] ? colorArr[i] : '#f00'
option.series[i].itemStyle = {
normal: {
color: colorArr[i],
borderColor: colorArr[i],
borderWidth: 2,
opacity: .5,
// color: {
// type: 'radial',
// x: 0.5,
// y: 0.5,
// r: 0.5,
// colorStops: [{
// offset: 0, color: '#e5e5e5' // 0% 处的颜色
// }, {
// offset: 1, color: colorArr[i] // 100% 处的颜色
// }],
// globalCoord: false
// }
}
};
let legendName = this.getSessionLocal('weather', option.series[i].name);
legendName = legendName ? legendName : '未知' + [i];
option.legend.data.push(legendName);
option.series[i].name = legendName;
tooltipData[option.series[i].name] = option.series[i].data;
option.series[i].data.forEach((item, index) => {
if(item) {
// _seriesData[index] = item.value1;
_seriesData[index] = item.weather.aqi;
} else {
_seriesData[index] = 0;
}
});
option.series[i].data = _seriesData;
_seriesData = []; // 清空组 下一次就不会被覆盖
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.grid.height = 650;
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
// tooltip
let that = this;
option.tooltip.formatter = function (params, ticket, callback) {
if(!tooltipData[params.seriesName][params.dataIndex]) return;
let toolData, flowNum = '', weatherStr = '', apiIndex = '', temperature = '';
let htmls = '';
toolData = tooltipData[params.seriesName][params.dataIndex];
if(toolData) {
flowNum = toolData.value1;
weatherStr = that.getSessionLocal('weather', toolData.weather.type);
apiIndex = toolData.weather.aqi;
temperature = (toolData.weather.ltemp) + '℃ ~ ' + (toolData.weather.htemp) + '℃';
}
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; color: #0068FF;">' + (params.name).replace(/\(|\)/g, ' ') + '</div><div>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + option.kpiName + ' : ' + flowNum + this.$t('format.perTime') + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + '天气 : ' + weatherStr + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + 'AQI指数 : ' + apiIndex + '</p>'
+ '<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">' + '温度 : ' + temperature + '</p>'
+ '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawGenderBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
grid: {
top: 66,
left: 60,
bottom: 66,
right: 40
},
legend: {
data: [],
bottom: 16,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 12
},
itemGap: 85,
itemWidth: 10,
itemHeight: 10
},
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'
// },
yAxis: {
name: this.$t('format.perTime'),
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
}
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;
// 按照 echarts 数据规范重构数据
let seriesObj = {}, seriesData = [], totalData = [];;
try {
seriesData = option.xaxis.data.map(item => {
return {
name: item,
data: []
}
});
if(option.series.length > 0) {
for(let i = 0; i < option.series.length; i++) {
option.xAxis.data.push(option.series[i].name);
for(let j = 0; j < option.series[i].data.length; j++) {
seriesObj[option.xaxis.data[j]] = option.series[i].data[j];
for(let k in seriesObj) {
if(seriesData[j].name == k) {
seriesData[j].data.push(seriesObj[k])
}
}
seriesObj = {};
}
}
}
for(let i = 0; i < seriesData.length; i++) {
seriesData[i].itemStyle = {
show: false
};
seriesData[i].type = 'bar';
seriesData[i].stack = 'gender';
// seriesData[i].barWidth = 20;
seriesData[i].barMaxWidth = 60;
seriesData[i].barGap = '6px';
option.legend.data.push(seriesData[i].name);
}
seriesData.forEach((item) => {
item.data.forEach((k, i) => {
if(totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
})
})
option.series = seriesData;
if(!option.series.length) {
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);
}
} catch (error) {}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', xaxisName = '', ratio = '', numRatio = '';
if(params.length > 0) {
xaxisName = params[0].axisValue;
htmls += '<div style="font-size:14px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left;">' + xaxisName + '</div><div>';
for(let j = 0; j < params.length; j++) {
numRatio = (params[j].data == 0 || totalData[params[j].dataIndex] == 0) ? 0 : params[j].data / totalData[params[j].dataIndex];
ratio = numRatio == 0 ? '0%' : (numRatio * 100).toFixed(2) + '%';
htmls += '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">'+ params[j].seriesName + ' : ' + ratio +'</p>';
}
htmls += '</div>';
return htmls;
}
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawAgeBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
grid: {
top: 66,
left: 60,
bottom: 66,
right: 40
},
legend: {
data: [],
bottom: 16,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 12
},
itemGap: 6,
itemWidth: 10,
itemHeight: 10
},
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'
// },
yAxis: {
name: this.$t('format.perTime'),
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
};
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;
// 按照 echarts 数据规范重构数据
let seriesObj = {}, seriesData = [], totalData = [];
try {
seriesData = option.xaxis.data.map(item => {
return {
name: item,
data: []
}
});
if(option.series.length > 0) {
for(let i = 0; i < option.series.length; i++) {
option.xAxis.data.push(option.series[i].name);
for(let j = 0; j < option.series[i].data.length; j++) {
seriesObj[option.xaxis.data[j]] = option.series[i].data[j];
for(let k in seriesObj) {
if(seriesData[j].name == k) {
seriesData[j].data.push(seriesObj[k])
}
}
seriesObj = {};
}
}
}
for(let i = 0; i < seriesData.length; i++) {
seriesData[i].itemStyle = {
show: false
};
seriesData[i].type = 'bar';
seriesData[i].stack = 'gender';
// seriesData[i].barWidth = 20;
seriesData[i].barMaxWidth = 60;
// seriesData[i].barGap = '6px';
seriesData[i].barCategoryGap = '50px';
option.legend.data.push(seriesData[i].name);
}
seriesData.forEach(item => {
item.data.forEach((k, i) => {
if(totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
})
})
option.series = seriesData;
if(!option.series.length) {
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);
}
} catch (error) {}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', xaxisName = '', ratio = '', numRatio = '';
if(params.length > 0) {
xaxisName = params[0].axisValue;
htmls += '<div style="font-size:14px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left;">' + xaxisName + '</div><div>';
for(let j = 0; j < params.length; j++) {
numRatio = (params[j].data == 0 || totalData[params[j].dataIndex] == 0) ? 0 : params[j].data / totalData[params[j].dataIndex];
ratio = numRatio == 0 ? '0%' : (numRatio * 100).toFixed(2) + '%';
htmls += '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">'+ params[j].seriesName + ' : ' + ratio + '</p>';
}
htmls += '</div>';
return htmls;
}
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawHoActBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
color: ['#3BB8FF', '#87D14B', '#6784E3'],
grid: {
top: 66,
left: 60,
bottom: 66,
right: 40
},
legend: {
data: [],
bottom: 16,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 14
},
itemGap: 34,
itemWidth: 10,
itemHeight: 10
},
tooltip: {
// show: true,
trigger: 'item',
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'
// },
yAxis: {
name: this.$t('format.perTime'),
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
};
if(typeof(option.title) == 'string') {
option.title = {
show: false,
text: option.title,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 26,
top: 26,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
// 按照 echarts 数据规范重构数据
let seriesObj = {}, seriesData = [], totalData = [];
try {
seriesData = option.xaxis.data.map(item => {
return {
name: item,
data: []
}
});
if(option.series.length > 0) {
for(let i = 0; i < option.series.length; i++) {
option.xAxis.data.push(option.series[i].name);
for(let j = 0; j < option.series[i].data.length; j++) {
seriesObj[option.xaxis.data[j]] = option.series[i].data[j];
for(let k in seriesObj) {
if(seriesData[j].name == k) {
seriesData[j].data.push(seriesObj[k])
}
}
seriesObj = {};
}
}
}
for(let i = 0; i < seriesData.length; i++) {
seriesData[i].itemStyle = {
normal: {
barBorderRadius: 7
}
};
seriesData[i].type = 'bar';
seriesData[i].barWidth = 14;
option.legend.data.push({
name: seriesData[i].name,
icon: 'circle'
});
}
seriesData.forEach(item => {
item.data.forEach((k, i) => {
if(totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
})
})
option.series = seriesData;
if(!option.series.length) {
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);
}
} catch (error) {}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', xaxisName = '', dataNum = null, unit = '';
xaxisName = params.name + params.seriesName;
if(params.value > 100000) {
dataNum = (params.value / 10000).toFixed(2);
unit = this.$t('format.millionTime');
} else {
dataNum = params.value;
unit = this.$t('format.perTime');
}
htmls += '<div style="font-size: 14px;height: 32px;color: #0069FF;border-radius: 4px;line-height: 36px;padding-left: 15px;padding-right: 15px;text-align: left;">' + xaxisName + '</div><div>';
htmls += '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">'+ dataNum + unit + '</p>';
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawActBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
color: ['#3BB8FF', '#87D14B', '#6784E3'],
grid: {
top: 80,
left: 70,
bottom: 97,
right: 45
},
legend: {
data: [],
bottom: 26,
textStyle: {
color: '#555',
fontFamily: this.fontFamily,
fontSize: 14
},
itemGap: 34,
itemWidth: 10,
itemHeight: 10
},
tooltip: {
// show: true,
trigger: 'item',
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'
// },
yAxis: {
name: this.$t('format.perTime'),
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
};
if(typeof(option.title) == 'string') {
option.title = {
show: false,
text: option.title,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 26,
top: 26,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
// 按照 echarts 数据规范重构数据
let seriesObj = {}, seriesData = [], totalData = [];
try {
seriesData = option.xaxis.data.map(item => {
return {
name: item,
data: []
}
});
if(option.series.length > 0) {
for(let i = 0; i < option.series.length; i++) {
option.xAxis.data.push(option.series[i].name);
for(let j = 0; j < option.series[i].data.length; j++) {
seriesObj[option.xaxis.data[j]] = option.series[i].data[j];
for(let k in seriesObj) {
if(seriesData[j].name == k) {
seriesData[j].data.push(seriesObj[k])
}
}
seriesObj = {};
}
}
}
for(let i = 0; i < seriesData.length; i++) {
seriesData[i].itemStyle = {
normal: {
barBorderRadius: 7
}
};
seriesData[i].type = 'bar';
seriesData[i].barWidth = 14;
option.legend.data.push({
name: seriesData[i].name,
icon: 'circle'
});
}
seriesData.forEach(item => {
item.data.forEach((k, i) => {
if(totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
})
})
option.series = seriesData;
if(!option.series.length) {
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);
}
} catch (error) {}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', xaxisName = '', dataNum = null, unit = '';
xaxisName = params.name + params.seriesName;
if(params.value > 100000) {
dataNum = (params.value / 10000).toFixed(2);
unit = this.$t('format.millionTime');
} else {
dataNum = params.value;
unit = this.$t('format.perTime');
}
htmls += '<div style="font-size: 14px;height: 32px;color: #0069FF;border-radius: 4px;line-height: 36px;padding-left: 15px;padding-right: 15px;text-align: left;">' + xaxisName + '</div><div>';
htmls += '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">'+ dataNum + unit + '</p>';
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawActLine() {},
drawLineBg(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
// 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)'
},
grid: {
top: 60,
left: 60,
bottom: 60,
right: 45
},
yAxis: {
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
legend: {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 15,
bottom: 12,
selected: {},
textStyle: {
color: '#555'
},
data: []
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
data: []
}
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,
};
}
let areaColor = [{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(135, 209, 75, 0.4)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(135, 209, 75, 0.2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}, {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(59, 184, 255, 0.4)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(59, 184, 255, 0.2)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}]
option = {...defaultOption, ...option};
if(!option.series) return;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(option.series.length > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
let seriesName = option.series[i].name;
// option.series[i].smooth = true;
option.series[i].type = 'line';
option.series[i].showSymbol = true;
option.series[i].symbolSize = 6;
option.series[i].areaStyle= {
normal: {
color: areaColor[i]
}
}
option.legend.data.push(option.series[i].name);
if(seriesName) {
if(i < 2) {
option.legend.selected[seriesName] = true;
} else {
option.legend.selected[seriesName] = false;
}
}
}
} 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);
}
option.tooltip.formatter = function(params, ticket, callback) {
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].axisValue + '</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.perTime') + '</p>';
}
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawLine(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
// 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)'
},
grid: {
top: 60,
left: 60,
bottom: 66,
right: 40
},
yAxis: {
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
legend: {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 15,
bottom: 16,
selected: {},
textStyle: {
color: '#555'
},
data: []
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
data: []
}
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;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(option.series.length > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
let seriesName = option.series[i].name;
// option.series[i].smooth = true;
option.series[i].type = 'line';
option.series[i].showSymbol = true;
option.legend.data.push(option.series[i].name);
if(seriesName) {
if(i < 2) {
option.legend.selected[seriesName] = true;
} else {
option.legend.selected[seriesName] = false;
}
}
}
} 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);
}
option.tooltip.formatter = function(params, ticket, callback) {
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].axisValue + '</div><div>';
if(option.seriesText === 'rate') {
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 : '--') + '</p>';
}
} else {
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.perTime') + '</p>';
}
}
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawYearLine(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
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)'
},
grid: {
top: 76,
left: 60,
bottom: 120,
right: 45
},
yAxis: {
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
legend: {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 15,
bottom: 64,
selected: {},
textStyle: {
color: '#555'
},
data: []
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
}
}
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;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(option.series.length > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
let seriesName = option.series[i].name;
// option.series[i].smooth = true;
option.series[i].type = 'line';
option.series[i].showSymbol = true;
option.legend.data.push(option.series[i].name);
if(seriesName) {
if(i < 2) {
option.legend.selected[seriesName] = true;
} else {
option.legend.selected[seriesName] = false;
}
}
}
option.dataZoom = {
type: 'slider',
bottom: 26
}
} 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);
}
option.tooltip.formatter = function(params, ticket, callback) {
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].axisValue + '</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.perTime') + '</p>';
}
htmls += '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawTfLine(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
var yAxisName = '',minVal,maxVal;
if(option.title == '开心指数'){
yAxisName = '开心指数';
let dataArr = [];
option.series.forEach(item => {
item.data = item.data.map(item2 => {
if(item2){
item2 = item2.toFixed(3);
dataArr.push(item2)
return item2;
}
})
})
// minVal = Math.min.apply(null, dataArr)
// maxVal = Math.max.apply(null, dataArr)
// console.log(option.series, dataArr, minVal, maxVal)
// for(let i = 0, len = option.series.length; i < len; i++) {
// for(let j = 0 ,len = option.series[i].data.length;j<len;j++) {
// if(option.series[i].data[j]){
// option.series[i].data[j] = option.series[i].data[j].toFixed(3)
// }else{
// console.log('remove',option.series[i].data[j])
// option.series[i].data.splice(j, 1)
// }
// }
// minVal = Math.min.apply(Math,option.series[i].data)
// maxVal = Math.max.apply(Math,option.series[i].data)
// console.log(minVal,maxVal,option.series[i].data)
// }
}
let defaultOption = {
backgroundColor: '#fff',
color: ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"],
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: 0,
// 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)'
},
grid: {
top: 48,
left: 40,
bottom: 48,
right: 30,
},
yAxis: {
name: yAxisName,
type: 'value',
nameRotate: 1,
min: function(value){
return Math.floor(value.min * 10) / 10
},
max: function(value){
return Math.ceil(value.max * 10) / 10
},
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
legend: {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 15,
bottom: 0,
selected: {},
textStyle: {
color: '#555'
},
data: []
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
data: []
}
if(typeof(option.title) == 'string') {
option.title = {
text: option.title,
show: false,
textStyle: {
color: '#444',
fontSize: 18,
fontFamily: this.fontFamily,
fontWeight: 'normal',
},
left: 0,
top: 0,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
try {
option.xAxis.data = option.xaxis.data;
} catch (error) { }
if(option.series.length > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
let seriesName = option.series[i].name;
// option.series[i].smooth = true;
option.series[i].type = 'line';
option.series[i].showSymbol = true;
option.legend.data.push(option.series[i].name);
if(seriesName) {
if(i < 2) {
option.legend.selected[seriesName] = true;
} else {
option.legend.selected[seriesName] = false;
}
}
}
} 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);
}
option.tooltip.formatter = function(params, ticket, callback) {
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].axisValue + '</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 : '--') + '</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 = ['30%', '60%'];
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
}
};
}
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 + '人</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);
}
},
drawComtPie(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
color: ['#3BB8FF', '#7460EE'],
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
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)'
},
legend: {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 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 => {
if(option.legend.data.indexOf(item.name) === -1) {
option.legend.data.push(item.name)
}
})
// let dealData = [];
// // dealData = option.series;
// for(let i = 0; i < option.series.length; i++) {
// dealData = option.series[i].data.map(item => {
// return item;
// })
// }
let len = option.series.length;
let centerX = '', radiusArr = [];
// let labelText = [];
// option.series.forEach(item => {
// labelText.push(item.name);
// })
let labelStr = '';
for(let i = 0; i < len; i++) {
centerX = (100 / len * (i + 1)) - (100 / len / 2) + '%';
if(len >= 7) {
radiusArr = ['30%', '40%'];
} else {
radiusArr = ['40%', '50%'];
}
option.series[i].center = [centerX, '50%'];
option.series[i].radius = radiusArr;
option.series[i].label = {
normal: {
show: true,
position: 'center',
align: 'center',
verticalAlign: 'middle',
color: '#666',
fontFamily: this.fontFamily,
formatter: function (params) {
if(labelStr === params.seriesName) {
labelStr = '';
return '';
} else {
labelStr = params.seriesName;
return params.seriesName;
}
}
},
emphasis: {
show: true,
position: 'center',
align: 'center',
verticalAlign: 'middle',
color: '#666',
fontFamily: this.fontFamily,
formatter: function (params) {
if(labelStr !== params.seriesName) {
labelStr = '';
return '';
} else {
labelStr = params.seriesName;
return params.seriesName;
}
}
}
};
option.series[i].labelLine = {
normal: {
show: false
}
}
}
} 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);
}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', dataVal = '', unit = '';
if(params.value || params.value == 0) {
dataVal = params.value > 100000 ? (params.value / 10000).toFixed(2) : params.value;
// unit = params.value > 100000 ? '' : '--';
} else {
dataVal = '--'
}
htmls += '<div style="font-size: 14px;height: 32px;color: #0069FF;border-radius: 4px;line-height: 36px;padding-left: 15px;padding-right: 15px;text-align: left;">' + params.seriesName + '</div><div>'
+ '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">'+ params.name + ': ' + dataVal + '</p>'
+ '</div>';
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawRadar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let defaultOption = {
backgroundColor: '#fff',
color: ['#3BB8FF', '#7460EE'],
tooltip: {
show: false
},
legend: {
icon: 'line',
data: [],
bottom: 66,
left: '30%',
// right: 26,
orient: 'vertical'
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
radar: {
name: {
textStyle: {
fontSize: 14,
color: '#666',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [],
axisLine: {
lineStyle: {
color: 'transparent'
}
},
splitLine: {
lineStyle: {
color: '#ccc',
width: 3,
type: 'dotted'
}
},
splitArea: {
areaStyle: {
color: '#fff'
}
}
}
};
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 maxItemArr = [], maxArr = [], seriesData = [];
if(option.series.length > 0) {
for(let i = 0, len = option.series.length; i < len; i++) {
option.legend.data.push(option.series[i].name)
maxItemArr.push(option.series[i].data);
seriesData.push({
name: option.series[i].name,
value: option.series[i].data
})
}
if(maxItemArr.length == 2) {
for(let k = 0; k < maxItemArr[0].length; k++) {
if(maxItemArr[0][k] > maxItemArr[1][k]) {
maxArr.push(maxItemArr[0][k])
} else {
maxArr.push(maxItemArr[1][k])
}
}
option.radar.indicator = option.xaxis.data.map((item, index) => {
return {
name: item,
max: maxArr[index] + Math.ceil(maxArr[index] / 5)
}
})
} else {
console.error('max length 不能小于2')
}
option.series = {
type: 'radar',
data: seriesData,
lineStyle: {
width: 3
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
try {
option.xAxis['data'] = [];
} catch(err) {}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawLineBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let colorArr = ['#3BB8FF', '#87D14B', '#FFC62E'];
let defaultOption = {
backgroundColor: '#fff',
grid: {
top: 78,
left: 60,
bottom: 66,
right: 60
},
legend: {
bottom: 16,
itemGap: 65,
itemWidth: 12,
itemHeight: 12,
},
// toolbox: {
// showTitle: false,
// feature: {
// saveAsImage: {
// icon: this.downloadIcon
// }
// },
// top: '26px',
// right: '21px'
// },
tooltip: {
show: true,
backgroundColor: '#fff',
textStyle: {
color: '#333333'
},
extraCssText: 'box-shadow: 0px 0px 10px -4px rgba(3, 3, 3, .4)',
trigger: 'axis'
},
color: colorArr,
yAxis: [{
name: '客流量',
type: 'value',
// interval: 200,
splitLine: {
lineStyle: {
color: '#e8e8e8'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
}, {
name: '增长率',
type: 'value',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
// max: 100,
// interval: 25,
}],
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
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: 26,
top: 26,
};
}
if(!option.series) return;
try {
option.xAxis.data = option.xaxis.data.map(item => {
return item;
});
} catch (error) { }
if(option.series.length > 0){
for(let i = 0, len = option.series.length; i < len; i++) {
// option.series[i].type = 'bar';
option.series[i].itemStyle = {
barBorderRadius: 7
};
option.series[i].barWidth = 14;
if(option.series[i].type === 'line') {
option.series[i].yAxisIndex = 1;
option.series[i].symbolSize = 6;
} else {
option.series[i].yAxisIndex = 0;
option.series[i].barGap = "100%";
}
if(option.series[i].name === 'avgWeekDay') {
option.series[i].name = '工作日平均客流';
} else if(option.series[i].name === 'avgWeekend') {
option.series[i].name = '双休日平均客流';
} else {
option.series[i].name = '增长率';
}
}
} else {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#444',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
option.xAxis.data = [];
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
// tooltip
option.tooltip.formatter = function (params, ticket, callback) {
let htmls = '', flowNum = '';
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; color: #0068FF;">' + params[0].name + '</div><div>';
if(params.length > 2) {
params.forEach((item, index) => {
if(item.seriesType === 'bar') {
flowNum = item.data ? (item.data > 100000 ? (item.data / 10000).toFixed(2) + '万人' : item.data + this.$t('format.perTime')) : '--' + this.$t('format.perTime');
htmls += '<p style="font-size:13px; padding:4px 15px; color:#444; text-align: left;">' + item.marker + ' ' + item.seriesName + ': ' + flowNum + '</p>';
}
if(item.seriesType === 'line') {
htmls += '<p style="font-size:13px; padding:4px 15px; color:#444; text-align: left;">' + item.marker + ' ' + item.seriesName + ': ' + (item.data ? item.data + '%' : '--') + '</p>';
}
})
htmls += '</div>';
}
return htmls;
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
}, 500);
myChart.setOption(option);
},
drawRankBar(domId, option) {
let myChart = {};
myChart = this.initChartInstance(domId);
myChart.showLoading('default', {
text: '',
color: '#409eff'
});
let that = this;
myChart.off('click')
myChart.on('click', (params) => {
let matchStage = [], stage = '';
if(/^\<|\>/g.test(params.name)) {
matchStage = params.name.match(/\d+/g);
stage = params.name.indexOf('<') !== -1 ? '-' + matchStage[0] : matchStage[0] + '-';
} else {
matchStage = params.name.match(/^\d+|\-\d+/g);
stage = matchStage.length > 1 ? (matchStage[0] + matchStage[1]) : matchStage[0];
}
var index = params.dataIndex
// let _option = myChart.getOption(option);
// option.series[0].[params.dataIndex]
var option = {
series: [{
itemStyle: {
normal:{
color: function (params){
if(params.dataIndex == index){
// console.log(params.dataIndex)
return '#0069FF';
}else{
return '#3BB8FF';
}
},
},
},
}],
}
myChart.setOption(option)
this.$emit('emitSingle', stage)
});
let defaultOption = {
grid: {
top: 70,
left: 60,
bottom: 66,
right: 40
},
// legend: {
// data: [],
// bottom: 16,
// textStyle: {
// color: '#555',
// fontFamily: this.fontFamily,
// fontSize: 14
// },
// itemGap: 85,
// itemWidth: 10,
// itemHeight: 10
// },
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: '18px'
// },
yAxis: {
// name: this.$t('format.perTime'),
type: 'value',
nameRotate: 1,
splitLine: {
lineStyle: {
color: '#EBEBEB'
}
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
}
},
xAxis: {
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: '#666'
},
data: []
}
}
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: 20,
};
}
option = {...defaultOption, ...option};
if(!option.series) return;
// 按照 echarts 数据规范重构数据
let seriesObj = {}, seriesData = [], totalData = [];
try {
option.xAxis.data = option.xaxis.data;
seriesData = option.xaxis.data.map(item => {
return {
name: item,
data: []
}
});
if(option.series.length > 0) {
for(let i = 0; i < option.series.length; i++) {
option.series[i].itemStyle = {
normal:{
color: function (params){
if(params.dataIndex == 0) {
return '#0069FF';
}else{
return '#3BB8FF';
}
}
}
}
option.series[i].type = 'bar';
option.series[i].barMaxWidth = '40px';
option.series[i].barGap = '6px';
// option.series[i].label = {
// show: true,
// position: 'top',
// formatter: (params) => {
// if(params.value) {
// return params
// }
// }
// }
// option.xAxis.data.push(option.series[i].name);
// for(let j = 0; j < option.series[i].data.length; j++) {
// seriesObj[option.xaxis.data[j]] = option.series[i].data[j];
// for(let k in seriesObj) {
// if(seriesData[j].name == k) {
// seriesData[j].data.push(seriesObj[k])
// }
// }
// seriesObj = {};
// }
}
}
// for(let i = 0; i < seriesData.length; i++) {
// seriesData[i].itemStyle = {
// show: false
// };
// seriesData[i].type = 'bar';
// seriesData[i].barMaxWidth = '100px';
// seriesData[i].barGap = '6px';
// option.legend.data.push(seriesData[i].name);
// }
// if(option.legend.data.length >= 15) {
// //
// }
// seriesData.forEach((item) => {
// item.data.forEach((k, i) => {
// if(totalData[i]) {
// totalData[i] += k;
// } else {
// totalData[i] = k;
// }
// })
// })
// option.series = seriesData;
// Y轴name
let nameDict = {
TRAFFIC: this.$t('format.perTime'),
ORDER: '单',
HANDBAGRATE: '%',
PREPRICE: '元/人',
PERAREAVALUE: '元/平米',
ENTERINGRATE: '%',
DURATIONTIME: '分',
DEPTH: '游逛深度',
SALES: '元'
}
option.yAxis.name = nameDict[option['kpiType']];
if(!option.series.length) {
option.graphic = {
type: 'text',
left: 'center',
top: 'middle',
z: 100,
style: {
fill: '#333',
text: this.$t('echartsTitle.noData'),
font: '14px ' + this.fontFamily
}
}
myChart.clear();
setTimeout(() => {
myChart.hideLoading();
myChart.setOption(option);
}, 500);
}
} catch (error) {}
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = '', xaxisName = '', ratio = '', unit = '';
if(params.length > 0) {
xaxisName = params[0].axisValue;
htmls += '<div style="font-size:14px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left;">' + xaxisName + '</div><div>';
for(let j = 0; j < params.length; j++) {
// ratio = (params[j].data / totalData[params[j].dataIndex] * 100).toFixed(2) + '%';
ratio = params[j].data > 100000 ? (params[j].data / 10000).toFixed(2) : params[j].data;
unit = params[j].data > 100000 ? '万人' : '人';
htmls += '<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">' + ratio + unit +'</p>';
}
htmls += '</div>';
return htmls;
}
}
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].barMaxWidth = 40;
// 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);
}
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"">人数: ' + dataVal + '人</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);
},
computeSize(maxNum, maxSize, x) {
x = x ? x : 1;
if((maxNum / x) > maxSize) {
x +=1;
return this.computeSize(maxNum, maxSize, x);
} else {
// x = x <= 2 ? 5 : x;
return x;
}
},
getRandomColors(colorsLen) {
let colors = [];
while(colors.length < colorsLen) {
let _color = '#' + ('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);
colors.push(_color);
}
return colors;
}
}
}
</script>