<template>
<div class="chart" :id="chartId" :chartType="chartType"></div>
</template>
<script>
// import echarts from 'echarts'
import {chartweather,weatherpng} from './weather'
import echarts from "@/third-party/echart_lib";
import { optionFormatter } from "@/utils/dealChart";
import resize from "./mixins/resize";
import downloadIcon from "@/assets/img/export.png";
import i18n from "@/assets/i18n/i18n";
export default {
name: "Charts",
mixins: [resize],
props: {
chartId: {
type: String,
required: true
},
chartType: {
type: String,
required: true
},
chartData: {
type: Object,
default: () => {}
}
},
filters: {
traffic(val) {
// 客流量
if (!val) return i18n.t("format.TRAFFIC");
return val >= 100000
? i18n.t("format.millionTime")
: i18n.t("format.perTime");
},
personNum(val) {
if (typeof val === "boolean") {
return i18n.t("format.perNum");
} else if (typeof val === "undefined") {
return val;
} else if (typeof val === "number") {
return val >= 100000
? i18n.t("format.millionNum")
: i18n.t("format.perNum");
} else {
return val;
}
},
sales(val, isUnit) {
// 销售额
if (!val) {
return i18n.t("format.SALES");
} else {
return val >= 100000 ? (val / 10000).toFixed(2) : val;
}
if (isUnit)
return val >= 100000
? i18n.t("format.salesUnit")
: i18n.t("format.saleUnit");
},
depth(val, isUnit) {
// 游逛深度
if (!val) return i18n.t("format.DEPTH");
return val >= 100000 ? "万个" : "个";
},
perareaValue(val, isUnit) {
// 坪效
if (!val) return i18n.t("format.PERAREAVALUE");
return val >= 100000 ? "万元/平米" : "元/平米";
},
preprice(val, isUnit) {
// 客单价
if (!val) return i18n.t("format.PREPRICE");
return val >= 100000 ? "万元/人" : "元/人";
},
enteringRate(val, isUnit) {
// 进店率
if (!val) return i18n.t("format.ENTERINGRATE");
return "%";
},
durationTime(val, isUnit) {
// 滞留时间
if (!val) return i18n.t("format.DURATIONTIME");
return val >= 1 ? "小时" : "分";
},
volume(val, isUnit) {
// 成交量
if (!val) return i18n.t("format.VOLUME");
return val >= 100000 ? "万单" : "单";
},
secondToMinute(val) {
if (typeof val === "boolean") {
return i18n.t("format.minute");
} else if (typeof val === "undefined") {
return;
} else {
return (val / 60).toFixed(2);
}
},
bagRate(val, isUnit) {
// 提袋率
if (!val) return i18n.t("format.BAGRATE");
return "%";
},
dwelltime(val) {
return i18n.t("format.minutesUnit");
}
},
watch: {
chartData: {
handler(newVal, val) {
// draw chart
if (!this.chartType) return;
newVal && this[`draw${this.chartType}`](newVal);
},
deep: true
}
},
data() {
return {
chart: null,
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'
};
},
mounted() {
this.initChart();
// chartType: HeatMap
if (!this.chartType) return;
this[`draw${this.chartType}`]
? this[`draw${this.chartType}`](this.chartData)
: this.$message({
type: "warning",
message: `${this.chartType} ${this.$t("message.unsupportChartType")}`
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart =
echarts.getInstanceByDom(document.getElementById(this.chartId)) ||
echarts.init(document.getElementById(this.chartId));
},
getRandomColors(length) {
let colors = [],
temp = [];
while (colors.length < length) {
temp.push(getColor());
colors = [...new Set(temp)];
}
function getColor() {
return (
"#" +
("00000" + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6)
);
}
return colors;
},
// 表格热力图
drawHeatmap(data) {
// 格式化自定义的 y 轴
let yAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
if (window.localStorage.getItem("lang") == "en_US") {
yAxisData = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
}
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let seriesData = [],
yIndex = null,
maxArr = [],
onedimen = [],
maxNum = null,
{ isYear } = optionFormat.otherConf;
optionFormat.series.forEach((item, index) => {
yIndex = yAxisData.indexOf(item.name);
maxArr.push(item.data);
item.data.forEach((dataItem, dataIndex) => {
seriesData.push([parseInt(yIndex), dataIndex, dataItem || "-"]);
});
item.type = "heatmap";
item.itemStyle = {
emphasis: {
shadowBlur: 10,
shadowColor: "rgba(0, 0, 0, .5)"
}
};
item.label = {
normal: {
show: true,
color: "#444"
}
};
});
optionFormat.legend.show = false;
optionFormat.xAxis.nameTextStyle = {
color: "#444",
fontSize: 12
};
optionFormat.xAxis.splitArea = {
show: true
};
optionFormat.xAxis.axisLine = {
lineStyle: {
color: "#535353"
}
};
seriesData = seriesData.map(function(item) {
return [item[1], item[0], item[2] || "-"];
});
if (maxArr.length) {
onedimen = maxArr.join(",").split(",");
maxNum = Math.max.apply(null, onedimen);
}
// 覆盖格式化后的`option`数据 按需修改
let coverTemp = {
grid: {
left: 36,
right: 0,
top: 26,
bottom: 52
},
toolbox: {
show: false,
showTitle: false,
feature: {
saveAsImage: {
icon: this.downloadIcon
}
},
top: 0,
right: 0
},
yAxis: {
type: "category",
splitArea: {
show: true
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "#535353"
}
},
data: yAxisData
},
visualMap: {
show: !isYear,
min: 0,
max: 20,
calculable: true,
orient: "horizontal",
left: "left",
bottom: -10,
itemWidth: 15,
color: ["#0068FF", "#fff"]
}
};
coverTemp.visualMap.max = maxNum;
let option = JSON.parse(
JSON.stringify({ ...optionFormat, ...coverTemp })
);
option.series.forEach(item => {
item.data = [];
item.data = seriesData.splice(0, optionFormat.xAxis.data.length); // 多次裁剪 seriesData 数组
});
option.tooltip.formatter = (params, ticket, callback) => {
let xData = option.xAxis.data,
yData = option.yAxis.data,
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;">${
yData[params.value[1]]
}</div><div><p style="font-size:13px;padding:4px 15px;color:"#444444"">${
xData[params.value[0]]
}: ${this.$t('echarts.averageThermal')}${params.value[2]}</p></div>`;
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawLine(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let {
_color,
grid,
seriesText,
legendBottom,
yAxisName,
isAllSelected,
isYear,
istip,
} = optionFormat.otherConf;
optionFormat.color = _color || optionFormat.color;
optionFormat.xAxis.boundaryGap = false;
optionFormat.yAxis.name = yAxisName;
// optionFormat.xAxis.axisLine.onZero = false
optionFormat.legend.itemGap = 15;
optionFormat.legend.bottom = legendBottom || 0;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "#444"
}
};
optionFormat.grid = grid || { top: 28, right: 21, bottom: 48, left: 50 };
if (isYear) {
let _dataZoom = [
{
type: "slider",
throttle: 0
},
{
type: "inside",
throttle: 0
}
];
optionFormat.dataZoom = _dataZoom;
}
optionFormat.series.forEach((item, index) => {
item.type = "line";
item.showSymbol = true;
if (!isAllSelected) {
optionFormat.legend.selected[item.name] = index >= 0;
}
});
let option = Object.assign({}, optionFormat);
option.tooltip.formatter = (params, ticket, callback) => {
let unit = false,
htmls = "",
titleText = option.title.text;
if(istip){
htmls = `<div style="font-size:14px;height:31px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:25px;text-align: left;position:relative ">${params[0].axisValue}</div><div>`;
//获取节日
let festival = "",isbreak = false;
for (let i = 0; i < params.length; i++) {
let sdata = option.series[i].oldData.data;
for(let k = 0; k < sdata.length; k++) {
if(sdata[k] && sdata[k].countdate == params[i].axisValue){
params[i]["festival"] = sdata[k].eventName || '';
isbreak = true;
break;
} else {
params[i]["festival"] = '';
}
}
htmls += `
<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
${params[i].marker} ${params[i].seriesName}${this.$t("format.TRAFFIC")
}: ${params[i].data || params[i].data === 0 ? params[i].data : "--"} ${this.$t("format.perTime")}<span style="margin-left:5px;">${params[i]['festival']?'(' +params[i]['festival']+')':'' }</span>
</p>
`;
}
htmls += "</div>";
} else {
if (seriesText) {
unit = this.$options.filters[seriesText](true);
} else {
unit =
titleText.includes("15YOTrendLine") ||
titleText.includes("同比") ||
titleText.includes("环比")
? "%"
: false;
}
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}${
unit ? "" : this.$t("format.TRAFFIC")
}: ${params[i].data || params[i].data === 0 ? params[i].data : "--"}${
unit ? unit : this.$t("format.perTime")
}
</p>
`;
}
htmls += "</div>";
}
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawDoubleYAxis(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
let {
_color,
grid,
seriesText,
legendBottom,
periodTime,
halfTime,
addTimeNum,
legendSelected,
// tooltipConfine,
// hasYaxisName,
yAxisName,
yIndex,
tooltipUnit,
// isConnect,
smooth
} = optionFormat.otherConf;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = grid || {
left: 36,
right: 36,
top: 60,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
optionFormat.color = _color || optionFormat.color;
optionFormat.xAxis.boundaryGap = false;
// optionFormat.xAxis.axisLine.onZero = false
optionFormat.legend.itemGap = 15;
optionFormat.legend.bottom = legendBottom || 0;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line"
};
optionFormat.grid = grid || { top: 40, right: 40, bottom: 48, left: 50 };
optionFormat.series.forEach((item, index) => {
item.id = tooltipUnit[index] + "@" + index;
item.type = "line";
item.showAllSymbol = true;
item.symbolSize = 6;
item.connectNulls = true;
item.smooth = smooth || false;
item.showSymbol = true;
item.yAxisIndex = yIndex[index];
optionFormat.legend.selected[item.name] = legendSelected
? true
: index < 2;
});
let option = Object.assign({}, optionFormat);
option.yAxis = yAxisName.map(yName => {
return {
...optionFormat.yAxis,
name: yName
};
});
option.tooltip.formatter = (params, ticket, callback) => {
let unit = false,
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;">${
periodTime
? this.addNextTime(params[0].axisValue)
: halfTime
? this.addHalfTime(params[0].axisValue, addTimeNum)
: params[0].axisValue
}</div><div>`;
params.forEach((item, i) => {
let value = item.data;
// tooltipUnit[i]
unit = item.seriesId.split("@")[0];
htmls += `
<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
${item.marker} ${item.seriesName}${
unit ? "" : this.$t("format.TRAFFIC")
}: ${value || "--"}${unit || this.$t("format.perTime")}
</p>
`;
});
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawAreaLine(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
top: 60,
right: 45,
bottom: 60,
left: 60
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// let _colors = ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"] // this.getRandomColors(optionFormat.legend.data.length)
// 特殊配置项
let {
normalXAxisLabel,
grid,
selectedLen,
_color,
isYear,
chartKey,
hasYaxisName,
periodTime,
nextTimeNum,
legendShow,
legendBottom,
seriesText,
calcPercent
} = optionFormat.otherConf;
optionFormat.legend.show = legendShow || true;
let _colors =
_color || this.getRandomColors(optionFormat.legend.data.length);
let areaColor = _colors.map(item => {
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item // 0% 处的颜色
},
{
offset: 1,
color: "#fff" // 100% 处的颜色
}
]
};
});
optionFormat.series.forEach((item, index) => {
item.type = "line";
item.showSymbol = true;
item.symbolSize = 6;
if (optionFormat.legend.data.length === 1 || !chartKey) {
item.areaStyle = {
normal: {
color: areaColor[index]
}
};
}
if (selectedLen) {
optionFormat.legend.selected[item.name] = index < selectedLen;
}
});
// default yAxis name 是否显示y轴单位
let yAxisNameFlag = true;
if (typeof hasYaxisName === "boolean") {
yAxisNameFlag = false;
}
if (yAxisNameFlag) {
optionFormat.yAxis.name = this.$t("format.perTime");
optionFormat.yAxis.nameRotate = 0.1;
} else {
optionFormat.yAxis.name = "";
}
optionFormat.xAxis.boundaryGap = false;
optionFormat.legend.bottom = legendBottom || 12;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
// animation: true,
lineStyle: {
color: "#444"
}
};
let _grid =
isYear && chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: isYear
? { top: 60, right: 26, bottom: 100, left: 60 }
: chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: { top: 60, right: 26, bottom: 60, left: 60 };
// 覆盖格式化后的`option`数据 按需修改
let coverTemp = {
color: _colors, // ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"]
grid: grid || _grid
};
let option = Object.assign({}, optionFormat, coverTemp);
let _dataZoom = [
{
type: "slider",
throttle: 0
},
{
type: "inside",
throttle: 0
}
];
if (isYear && chartKey) {
option.legend.bottom = 8;
option.dataZoom = _dataZoom;
} else if (isYear) {
_dataZoom[0].bottom = "40px";
option.dataZoom = _dataZoom;
} else if (chartKey) {
option.legend.bottom = 6;
option.legend.itemGap = 15;
}
if (
chartKey == "trafficMinuteForDates" ||
chartKey == "traffic10Min" ||
chartKey == "trafficdensity"
) {
_dataZoom[0].handleSize = 1;
option.dataZoom = _dataZoom;
// if (chartKey == 'trafficdensity') {
// option.dataZoom[0].start = 90
// option.dataZoom[0].end = 100
// }
}
option.tooltip.formatter = params => {
let axisText;
if (periodTime) {
axisText = this.addNextTime(params[0].axisValue, nextTimeNum);
} else {
let time,
nextTime,
regex = /\d{2}\:\d{2}$/;
if (regex.test(params[0].axisValue)) {
time = Number(params[0].axisValue.split(":")[0]);
nextTime = time > 8 ? time + 1 + ":00" : "0" + (time + 1) + ":00";
}
axisText = params[0].axisValue + (nextTime ? "-" + nextTime : "");
}
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;">${axisText}</div><div>`;
let marks = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0069FF;"></span>'
let dataList = []
let dataPercent = 0
params.forEach(item => {
dataList.push(item.data)
htmls += `<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${
item.marker
} ${item.seriesName}: ${item.data || "--"}${
chartKey === "trafficdensity"
? this.$t("format.perNum")
: seriesText
? this.$options.filters[seriesText](true)
: this.$t("format.perTime")
}</p>`;
});
if (calcPercent && dataList.length > 1) {
dataList.forEach(item => {
dataPercent = dataPercent !== 0
? dataPercent / item
: (item || '0')
})
// htmls += `
// <p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
// ${marks} ${this.$t('echarts.lossCustomerRatio')}: ${dataPercent ? (dataPercent * 100).toFixed(2) : '--'}%
// </p>
// `
}
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
//home单独Line绘制方式
drawHomeAreaLine(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
top: 60,
right: 45,
bottom: 60,
left: 60
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// let _colors = ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"] // this.getRandomColors(optionFormat.legend.data.length)
// 特殊配置项
let {
normalXAxisLabel,
grid,
selectedLen,
_color,
isYear,
chartKey,
hasYaxisName,
periodTime,
nextTimeNum,
legendShow,
legendBottom,
seriesText,
oriData,
calcPercent
} = optionFormat.otherConf;
optionFormat.legend.show = legendShow || true;
let _colors =
_color || this.getRandomColors(optionFormat.legend.data.length);
let areaColor = _colors.map(item => {
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: item // 0% 处的颜色
},
{
offset: 1,
color: "#fff" // 100% 处的颜色
}
]
};
});
optionFormat.series.forEach((item, index) => {
item.type = "line";
item.showSymbol = true;
item.symbolSize = 6;
if (optionFormat.legend.data.length === 1 || !chartKey) {
item.areaStyle = {
normal: {
color: areaColor[index]
}
};
}
if (selectedLen) {
optionFormat.legend.selected[item.name] = index < selectedLen;
}
});
// default yAxis name 是否显示y轴单位
let yAxisNameFlag = true;
if (typeof hasYaxisName === "boolean") {
yAxisNameFlag = false;
}
if (yAxisNameFlag) {
optionFormat.yAxis.name = this.$t("format.perTime");
optionFormat.yAxis.nameRotate = 0.1;
} else {
optionFormat.yAxis.name = "";
}
optionFormat.xAxis.boundaryGap = false;
optionFormat.legend.bottom = legendBottom || 12;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
// animation: true,
lineStyle: {
color: "#444"
}
};
let _grid =
isYear && chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: isYear
? { top: 60, right: 26, bottom: 100, left: 60 }
: chartKey
? { top: 16, right: 26, bottom: 60, left: 52 }
: { top: 60, right: 26, bottom: 60, left: 60 };
// 覆盖格式化后的`option`数据 按需修改
let coverTemp = {
color: _colors, // ["#87D14B", "#3BB8FF", "#FFC62E", "#FF9631", "#7460EE"]
grid: grid || _grid
};
let option = Object.assign({}, optionFormat, coverTemp);
let _dataZoom = [
{
type: "slider",
throttle: 0
},
{
type: "inside",
throttle: 0
}
];
if (isYear && chartKey) {
option.legend.bottom = 8;
option.dataZoom = _dataZoom;
} else if (isYear) {
_dataZoom[0].bottom = "40px";
option.dataZoom = _dataZoom;
} else if (chartKey) {
option.legend.bottom = 6;
option.legend.itemGap = 15;
}
if (
chartKey == "trafficMinuteForDates" ||
chartKey == "traffic10Min" ||
chartKey == "trafficdensity"
) {
_dataZoom[0].handleSize = 1;
option.dataZoom = _dataZoom;
// if (chartKey == 'trafficdensity') {
// option.dataZoom[0].start = 90
// option.dataZoom[0].end = 100
// }
}
let temperature,wather;
if(oriData) {
//获取温度和天气数组
oriData.map(ele=> {
if(ele.name == '温度') {
temperature = ele
} else {
wather = ele;
}
})
}
option.tooltip.formatter = params => {
let axisText;
if (periodTime) {
axisText = this.addNextTime(params[0].axisValue, nextTimeNum);
} else {
let time,
nextTime,
regex = /\d{2}\:\d{2}$/;
if (regex.test(params[0].axisValue)) {
time = Number(params[0].axisValue.split(":")[0]);
nextTime = time > 8 ? time + 1 + ":00" : "0" + (time + 1) + ":00";
}
axisText = params[0].axisValue + (nextTime ? "-" + nextTime : "");
}
//x轴显示天气
// optionFormat.xAxis.textStyle.lineHeight = 14
let temperaturetext,tem,cweather;
let htmls = "";
if(oriData) {
chartweather[wather.data[params[0].dataIndex]]
temperaturetext = temperature.data[params[0].dataIndex]
tem = temperaturetext?temperaturetext.split('-')[0]+'℃' +'~'+ temperaturetext.split('-')[1]+"℃":''
htmls = `<div style="font-size:14px;height:61px;color:#333;border-radius:4px;line-height:31px;padding-left:15px;padding-right:15px; text-align: left;">${axisText}<div style="overflow:hidden"><span style="float:left;padding-top:5px;margin-right:10px;">${cweather?cweather:''}</span><span style="font-size:13px">${tem}</span></div></div><div>`;
} else {
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;">${axisText}</div><div>`;
}
let marks = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#0069FF;"></span>'
let dataList = []
let dataPercent = 0
params.forEach((item,index) => {
dataList.push(item.data)
htmls += `<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${
item.marker
} ${item.seriesName}: ${item.data || "--"}${
chartKey === "trafficdensity"
? this.$t("format.perNum")
: seriesText
? this.$options.filters[seriesText](true)
: this.$t("format.perTime")
}</p>`;
});
if (calcPercent && dataList.length > 1) {
dataList.forEach(item => {
dataPercent = dataPercent !== 0
? dataPercent / item
: (item || '0')
})
// htmls += `
// <p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
// ${marks} ${this.$t('echarts.lossCustomerRatio')}: ${dataPercent ? (dataPercent * 100).toFixed(2) : '--'}%
// </p>
// `
}
htmls += "</div>";
return htmls;
};
let windex = 0;
if(oriData) {
optionFormat.xAxis.axisLabel.formatter = function(val,index){
let i = wather.data[index]
return val + '\n{weather'+i+'|}';
}
let richObj = {};
Object.keys(weatherpng).map(ele=> {
richObj['weather'+ele] = {
height: 20,
align: 'center',
backgroundColor: {
image: weatherpng[ele] //这个warnImg是上面定义的图片var warnImg = "img/warn.png";
}
}
})
console.log(richObj)
optionFormat.xAxis.axisLabel.rich = richObj
}
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawLineBar(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
top: 60,
right: 45,
bottom: 60,
left: 60
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// 特殊配置项
let {
normalXAxisLabel,
grid,
_color,
hasYaxisName,
legendBottom,
seriesText,
yAxisName,
isCylindrical,
tooltipTitle,
hasClickCallback
} = optionFormat.otherConf;
let currentClickIndex = null
optionFormat.legend.bottom = legendBottom || 0;
optionFormat.legend.itemGap = 65;
optionFormat.color = _color;
optionFormat.grid = grid || { top: 28, right: 40, bottom: 48, left: 60 };
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "#444"
}
};
optionFormat.yAxis = [
{
type: "value",
name: yAxisName[0], // this.$t('format.TRAFFIC')
// nameRotate: 1,
splitLine: {
lineStyle: {
color: "#f5f5f5"
}
},
axisLine: {
lineStyle: {
color: "#888"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: "#666"
}
},
{
type: "value",
name: yAxisName[1],
// nameRotate: 1,
splitLine: {
lineStyle: {
color: "#f5f5f5"
}
},
axisLine: {
lineStyle: {
color: "#888"
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 12,
fontFamily: this.fontFamily,
color: "#666"
}
}
];
optionFormat.xAxis.boundaryGap = true;
optionFormat.series.forEach(item => {
if (isCylindrical) item.itemStyle = { barBorderRadius: 7 };
if (item.type === "line") {
item.lineStyle = {
normal: {
color: '#FFC62E'
}
}
item.itemStyle = {
normal: {
color: '#FFC62E'
}
}
item.yAxisIndex = 1;
item.symbolSize = 6;
} else if (item.type === "bar") {
item.itemStyle = {
normal: {
color: (params) => {
let key = params.dataIndex
return key === currentClickIndex ? '#0069FF' : '#3BB8FF'
}
}
}
item.barWidth = 50;
if (isCylindrical) {
item.barWidth = 14;
item.barGap = "100%";
}
}
});
let option = Object.assign({}, optionFormat);
option.series.forEach(item => {
if (item.type === "line" && item.name === "growthRate") {
item.name = this.$t("echarts.growthRate");
} else if (item.type === "bar") {
item.name =
item.name === "avgWeekDay"
? this.$t("echarts.workdayAverageInnum")
: item.name === "avgWeekend"
? this.$t("echarts.weekendAverageInnum")
: item.name;
}
});
if (isCylindrical) {
option.legend.data = option.series.map(item => item.name);
}
option.tooltip.formatter = params => {
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}${tooltipTitle || ''}</div><div>`;
params.forEach(item => {
// if (item.seriesName === '去年环比' || item.seriesName === 'Last year ring ratio') {
if (item.componentSubType === "line") {
htmls += `
<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">${
item.marker
} ${item.seriesName}: ${item.data || "--"}${
typeof item.data === "string" && item.data.includes("%")
? ""
: "%"
}</p>
`;
} else {
// ${this.$t('format.TRAFFIC')}
htmls += `
<p style="font-size:13px;padding:4px 15px;color:#444444; text-align: left;">
${item.marker} ${item.seriesName}: ${item.data || "--"}${
seriesText
? this.$options.filters[seriesText](true)
: this.$t("format.perTime")
}
</p>
`;
}
});
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
if (hasClickCallback) {
this.chart.off('click')
this.chart.on('click', (params) => {
const { dataIndex, name, componentSubType } = params
if (componentSubType === 'bar') {
currentClickIndex = dataIndex
this.chart.setOption(option)
this.$emit('emitSingleBar', name)
}
})
}
},
drawRank(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
// optionFormat.xAxis = {}
// optionFormat.yAxis = {}
optionFormat.grid = {
left: 36,
right: 0,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let rankWidths = "",
barWidth = 6,
dataArr = [],
valArr = [],
labelPos = 0,
maxData = 0,
defaultData = 100,
{ isIndependent, grid, seriesText } = optionFormat.otherConf;
if (window.outerWidth <= 1376) {
rankWidths =
document.getElementById(this.chartId).offsetWidth - 76 - 36;
} else {
rankWidths =
document.getElementById(this.chartId).offsetWidth - 76 - 36 - 25;
}
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "transparent"
}
};
optionFormat.series.forEach((item, index) => {
this.autoComplete(item.data.length, item.data);
if (index == 0) {
item.data.forEach(dataItem => {
if (typeof dataItem === "string" && !maxData) {
maxData = defaultData;
} else if (maxData < dataItem) {
maxData = dataItem;
}
});
}
item.label = {
normal: {
show: true,
position: [rankWidths, -20],
fontSize: 12,
textStyle: {
color: "#666666"
}
},
emphasis: {
show: true,
position: [rankWidths, -20],
fontSize: 12,
textStyle: {
color: "#666666"
}
}
};
item.itemStyle = {
normal: {
barBorderRadius: 60,
color: "#3BB8FF"
},
emphasis: {
barBorderRadius: 60,
color: "#0069FF"
}
};
item.barGap = "40%";
item.barWidth = barWidth;
});
if (optionFormat.series.length > 0) {
dataArr = Array.from(
{ length: optionFormat.series[0].data.length },
() => maxData
);
valArr = optionFormat.series[0].data.map(item => item);
}
this.autoComplete(
optionFormat.yAxis.data.length,
optionFormat.yAxis.data,
"string"
);
optionFormat.yAxis.data.forEach(item => {
if (item.length > labelPos) {
labelPos = item.length;
}
});
let yAxisData = Object.assign([], optionFormat.yAxis.data);
let shadowSeries = {
type: "bar",
// legendHoverLink: false,
z: 0,
itemStyle: {
normal: {
color: "#f5f5f5",
barBorderRadius: 60
},
emphasis: {
color: "#f5f5f5",
barBorderRadius: 60
}
},
label: {
show: false
},
barWidth: barWidth,
barGap: "-100%",
barCategoryGap: "40%",
data: dataArr,
animation: false
};
let _grid = isIndependent
? { top: 66, right: 55, bottom: 20, left: 78 }
: { top: 66, right: 36, bottom: 20, left: 56 };
let coverTemp = {
grid: grid || _grid,
legend: null,
xAxis: {
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: {
triggerEvent: true,
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
axisLabel: {
margin: 40,
interval: 0,
padding: [0, 0, 8, 0],
verticalAlign: "bottom",
textStyle: {
align: "left",
color: "#666666"
},
formatter: (value, index) => {
let key = index + 1,
htmls = "";
if (key == 1) {
htmls =
"{firstLabel|" +
key +
"}" +
" " +
"{valueLabel|" +
value +
"}";
} else if (key == 2) {
htmls =
"{secondLabel|" +
key +
"}" +
" " +
"{valueLabel|" +
value +
"}";
} else if (key == 3) {
htmls =
"{thirdLabel|" +
key +
"}" +
" " +
"{valueLabel|" +
value +
"}";
} else {
htmls =
"{normalLabel|" +
key +
"}" +
" " +
"{valueLabel|" +
value +
"}";
}
return htmls;
},
rich: {
firstLabel: {
width: 18,
height: 18,
align: "center",
color: "#fff",
fontSize: 12,
backgroundColor: "#EB6100"
},
secondLabel: {
width: 18,
height: 18,
align: "center",
color: "#fff",
fontSize: 12,
backgroundColor: "#FF9631"
},
thirdLabel: {
width: 18,
height: 18,
align: "center",
color: "#fff",
fontSize: 12,
backgroundColor: "#FFC62E"
},
normalLabel: {
width: 18,
height: 18,
fontSize: 12,
align: "center",
color: "#666666"
},
valueLabel: {
// width: labelPos * 12,
height: 18,
padding: [0, 0, 0, 20],
align: "left",
color: "#666",
fontSize: 12
},
totalNumLabel: {
height: 18,
padding: [0, 0, 0, labelPos * 12],
align: "right",
color: "#666",
fontSize: 12
}
}
},
data: yAxisData
}
};
// 防止堆内存污染
let seriesData = Object.assign([], optionFormat.series);
seriesData.push(shadowSeries);
let option = Object.assign({}, optionFormat, coverTemp); // JSON.parse(JSON.stringify({ ...optionFormat, ...coverTemp }))
option.series = seriesData;
option.xAxis["max"] = "dataMax";
option.tooltip.formatter = (params, ticket, callback) => {
if (!params[0].data) return;
let _seriesNum = "",
unit = "",
num = "";
if (!this.$options.filters[seriesText]) {
_seriesNum = unit = "--";
} else {
_seriesNum = this.$options.filters[seriesText]();
unit = this.$options.filters[seriesText](params[0].data);
}
if (seriesText === "durationTime") {
num = params[0].data >= 1 ? params[0].data : params[0].data * 60;
} else {
num =
params[0].data || params[0].data == 0
? params[0].data >= 100000
? (params[0].data / 10000).toFixed(2)
: params[0].data
: "--";
}
let htmls = "";
htmls +=
'<div style="font-size:16px;height:31px;color:#0068FF;border-radius:4px;line-height:31px;padding-left:15px; padding-right: 15px;">' +
params[0].name +
"</div>" +
"<div>" +
'<p style="font-size:14px;padding:4px 15px 6px;color:#444444;">' +
_seriesNum +
" : " +
num +
unit +
"</p>" +
"</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawStackBar(data) {
this.chart.showLoading("default", { text: "", color: "#409eff" });
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let { _color, yAxisName, doubleYaxis, isSwapY, grid } = optionFormat.otherConf;
optionFormat.xAxis.boundaryGap = true;
// perTime perNum
optionFormat.yAxis.name = yAxisName || this.$t("format.perNum");
optionFormat.yAxis.nameRotate = 1;
optionFormat.legend.itemGap = 32;
optionFormat.legend.bottom = 12;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
// animation: true,
lineStyle: {
color: "transparent"
}
};
let seriesObj = {},
seriesData = [],
totalData = [],
totalNum = 0,
ageArr = [];
seriesData = optionFormat.xAxis.data.map(item => {
return {
name: item,
data: []
};
});
let ageNum;
console.log(seriesData)
console.log(optionFormat.series)
optionFormat.series.forEach((item, index) => {
ageNum = 0;
item.data.forEach((dataItem, dataIndex) => {
seriesObj[optionFormat.xAxis.data[dataIndex]] = item.data[dataIndex];
totalNum += item.data[dataIndex];
ageNum += item.data[dataIndex];
for (let k in seriesObj) {
if (seriesData[dataIndex] && seriesData[dataIndex].name === k) {
seriesData[dataIndex].data.push(seriesObj[k]);
}
}
seriesObj = {};
});
ageArr.push(ageNum);
});
let legendTempData = Object.assign([], optionFormat.legend.data).map(
item => item.name
);
optionFormat.legend.data = [];
seriesData.forEach(item => {
item.itemStyle = {
show: false
};
item.type = "bar";
item.stack = "gender";
item.barCategoryGap = "50px";
item.barMaxWidth = 60;
isSwapY && (item.yAxisIndex = 1);
optionFormat.legend.data.push(item.name);
item.data.forEach((dataItem, dataIndex) => {
if (totalData[dataIndex]) {
totalData[dataIndex] += dataItem;
} else {
totalData[dataIndex] = dataItem;
}
});
});
let _colors =
_color || this.getRandomColors(optionFormat.legend.data.length);
let coverTemp = {
color: _colors,
grid: grid || {
top: 60,
right: doubleYaxis ? 60 : 26,
bottom: 60,
left: 60
}
};
if (doubleYaxis) {
coverTemp["yAxis"] = isSwapY
? [
Object.assign({}, optionFormat.yAxis, { name: "%" }),
optionFormat.yAxis
]
: [
optionFormat.yAxis,
Object.assign({}, optionFormat.yAxis, { name: "%" })
];
seriesData.push({
type: "line",
name: "rate",
yAxisIndex: isSwapY ? 0 : 1,
symbol: "none",
lineStyle: {
color: "transparent"
},
data: totalData.map(item => {
return ((item / totalNum) * 100).toFixed(2);
})
});
}
let option = Object.assign({}, optionFormat, coverTemp);
option.xAxis.data = legendTempData;
option.series = seriesData;
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = "",
xaxisName = "",
ratio = "",
numRatio = "",
ageNum = "",
ageRatioNum = "",
ageRatio = "",
ageUnit = "",
genderUnit = "",
genderNum = "",
lang = "";
if (window.localStorage.getItem("lang")) {
lang = window.localStorage.getItem("lang");
}
if (params.length > 0) {
xaxisName = params[0].axisValue;
ageNum =
ageArr[params[0].dataIndex] || ageArr[params[0].dataIndex] == 0
? ageArr[params[0].dataIndex] >= 100000
? (ageArr[params[0].dataIndex] / 10000).toFixed(2)
: ageArr[params[0].dataIndex]
: "--";
ageUnit = ageArr[params[0].dataIndex]
? ageArr[params[0].dataIndex] >= 100000
? this.$t("format.millionTime")
: this.$t("format.perNum")
: this.$t("format.perNum");
ageRatioNum = ageArr[params[0].dataIndex] / totalNum;
ageRatio =
ageRatioNum == 0 ? "0%" : (ageRatioNum * 100).toFixed(2) + "%";
htmls +=
'<div style="font-size:16px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left; overflow: hidden;"><span style="float: left; text-align: left;">' +
xaxisName +
"</span>";
if (lang == "en_US") {
htmls +=
'<span style="float: left; width: 100px; text-align: center; padding: 0 10px;">' +
ageNum +
ageUnit +
"</span>";
} else {
htmls +=
'<span style="float: left; width: 80px; text-align: center; padding: 0 10px;">' +
ageNum +
ageUnit +
"</span>";
}
htmls +=
'<span style="float: right; width: 90px; text-align: center;">' +
ageRatio +
"</span></div><div>";
params.forEach(item => {
if (item.seriesName !== "rate") {
genderNum =
params[0].data || params[0].data == 0
? item.data >= 100000
? (item.data / 10000).toFixed(2)
: item.data
: "--";
numRatio =
item.data == 0 || totalData[item.dataIndex] == 0
? 0
: item.data / totalData[item.dataIndex];
genderUnit = item.data
? item.data >= 100000
? this.$t("format.millionTime")
: this.$t("format.perNum")
: this.$t("format.perNum");
ratio = numRatio == 0 ? "0%" : (numRatio * 100).toFixed(2) + "%";
htmls +=
'<p style="font-size:14px;padding:4px 23px 6px 15px;color:#333;text-align: center; overflow: hidden;"><span style="float: left; text-align: center;">' +
item.seriesName +
':</span><span style="float: right; text-align: center; width: 90px;">' +
ratio +
"</span>";
if (lang == "en_US") {
htmls +=
'<span style="float: right; text-align: center; width: 100px;">' +
genderNum +
genderUnit +
"</span></p>";
} else {
htmls +=
'<span style="float: right; text-align: center; width: 90px;">' +
genderNum +
genderUnit +
"</span></p>";
}
}
});
htmls += "</div>";
return htmls;
}
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawNormalStackBar(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let {
_color,
yAxisName,
_grid,
legendBottom,
seriesText,
isVisibleZoom
} = optionFormat.otherConf;
optionFormat.grid = _grid || {
left: 36,
right: 36,
top: 26,
bottom: 36
};
// let _colors = _color || this.getRandomColors(optionFormat.legend.data.length)
optionFormat.color = _color;
optionFormat.xAxis.boundaryGap = true;
optionFormat.yAxis.name = yAxisName || this.$t("format.perNum");
optionFormat.yAxis.nameRotate = 1;
optionFormat.legend.itemGap = 32;
optionFormat.legend.bottom = legendBottom || 8;
optionFormat.legend.data = [];
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "transparent"
}
};
let totalData = [];
optionFormat.series.forEach((item, index) => {
optionFormat.legend.data.push(item.name);
item.itemStyle = {
show: false
};
item.type = "bar";
item.stack = "stackBar";
// item.barCategoryGap = '50px'
item.barMaxWidth = 60;
item.data.forEach((dataItem, dataIndex) => {
totalData[dataIndex] = totalData[dataIndex]
? totalData[dataIndex] + dataItem
: dataItem;
});
});
isVisibleZoom &&
(optionFormat.dataZoom = [
{
type: "slider",
throttle: 0,
handleSize: 1,
showDetail: false
},
{
type: "inside",
throttle: 0
}
]);
let option = Object.assign({}, optionFormat);
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = "",
numbers = "",
ratio = "",
unit = seriesText
? this.$options.filters[seriesText](true)
: this.$t("format.perNum"),
totalNum = totalData[params[0].dataIndex];
totalNum =
totalNum || totalNum == 0
? totalNum >= 100000
? (totalNum / 10000).toFixed(2)
: totalNum
: "--";
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 style="font-size:14px;color:#444;">
<p style="padding:4px 15px;text-align: left;">
${this.$t("table.totalNum")}: ${totalNum}${this.$options.filters[
seriesText
](totalNum)}
</p>
`;
params.forEach(item => {
ratio =
(item.data != 0
? ((item.data / totalData[item.dataIndex]) * 100).toFixed(2)
: "--") + "%";
numbers =
item.data || item.data == 0
? item.data >= 100000
? (item.data / 10000).toFixed(2)
: item.data
: "--";
unit = this.$options.filters[seriesText](numbers);
htmls += `
<p style="padding:4px 15px; text-align: left; overflow: hidden;">
<span style="float: left; text-align: left;">${item.seriesName}: ${numbers}${unit}</span>
<span style="float: right; text-align: right; width: 60px;">${ratio}</span>
</p>
`;
});
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawBar(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 0,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// let _colors = optionFormat.color || this.getRandomColors(optionFormat.legend.data.length)
// 特殊配置项
let {
normalXAxisLabel,
hideDataZoom,
grid,
_color,
isYear,
chartKey,
kpiType,
seriesText,
barMaxWidth,
xAxisfontSize,
legend
} = optionFormat.otherConf;
let _colors =
_color || this.getRandomColors(optionFormat.legend.data.length);
optionFormat.color = _colors;
optionFormat.xAxis.boundaryGap = true;
optionFormat.legend.itemGap = 15;
optionFormat.legend.bottom = 6;
optionFormat.legend.show = legend === false ? false : true;
optionFormat.tooltip.trigger = "axis";
optionFormat.tooltip.axisPointer = {
type: "line",
animation: false,
lineStyle: {
color: "transparent"
}
};
optionFormat.xAxis.axisLabel = {
fontSize: xAxisfontSize ? xAxisfontSize : 12,
interval: 0,
rotate: normalXAxisLabel ? 0 : 30,
textStyle: {
color: "#888"
}
};
optionFormat.grid = grid || { top: 26, right: 26, left: 52, bottom: 84 };
optionFormat.series.forEach(item => {
item.barGap = 0;
if (optionFormat.xAxis.data.length <= 8) {
item.barMaxWidth = 60;
}
});
if (!hideDataZoom) {
if (
optionFormat.xAxis.data.length >= 15 ||
optionFormat.series.length >= 15
) {
optionFormat.dataZoom = [
{
type: "slider",
throttle: 0,
handleSize: 1,
start: 0,
end: 40,
xAxisIndex: [0],
},
{
type: "inside",
throttle: 0
}
];
}
}
let coverTemp = {};
if (chartKey === "rankReport") {
let seriesObj = {},
seriesData = [],
totalData = [],
xAxisData = [],
legendData = [];
seriesData = optionFormat.xAxis.data.map(item => {
return {
name: item,
data: []
};
});
optionFormat.series.forEach(item => {
xAxisData.push(item.name);
item.data.forEach((dataItem, dataIndex) => {
seriesObj[optionFormat.xAxis.data[dataIndex]] = dataItem;
Object.keys(seriesObj).forEach(key => {
if (seriesData[dataIndex].name === key) {
seriesData[dataIndex].data.push(seriesObj[key]);
}
});
seriesObj = {};
});
});
seriesData.forEach(item => {
item.itemStyle = {
show: false
};
item.type = "bar";
item.barMaxWidth = "100px";
if (barMaxWidth) {
item.barMaxWidth = barMaxWidth;
}
legendData.push(item.name);
item.data.forEach((k, i) => {
if (totalData[i]) {
totalData[i] += k;
} else {
totalData[i] = k;
}
});
});
// Y轴name
let nameDict = {
TRAFFIC: this.$t('format.perTime'),
ORDER: "单",
HANDBAGRATE: "%",
PREPRICE: "元/人",
PERAREAVALUE: "元/平米",
ENTERINGRATE: "%",
DURATIONTIME: "分",
DEPTH: "游逛深度",
SALES: "元",
KPITRAFFIC:'人/㎡',
};
optionFormat.yAxis.nameRotate = 1;
optionFormat.yAxis.name = nameDict[kpiType];
coverTemp = {
series: seriesData,
xAxis: Object.assign({}, optionFormat.xAxis)
};
coverTemp.xAxis.data = xAxisData;
optionFormat.legend.data = legendData;
}
let option = Object.assign({}, optionFormat, coverTemp);
option.tooltip.formatter = params => {
let htmls = "",
nums = 0,
unit1 = "";
unit1 = seriesText
? this.$options.filters[seriesText](true)
: kpiType == 'KPITRAFFIC'?"人/㎡":this.$t("format.perTime");
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 (!seriesText) {
nums = item.value
? item.value > 100000
? (item.value / 10000).toFixed(2)
: item.value
: 0;
if (item.value > 100000 && !seriesText) {
unit1 = this.$t("format.millionTime");
}
} else {
nums = item.value;
}
htmls +=
'<p style="font-size:14px;padding:4px 15px;color:#444;text-align: left;">' +
item.marker +
" " +
item.seriesName +
"：" +
(nums || "--") +
((item.seriesName === 'Passenger flow' || item.seriesName === '客流人次') ? unit1 : '') +
"</p>";
});
htmls += "</div>";
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawCylindrical(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 0,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// 重组结构
let {
grid,
_color,
legendBottom,
seriesText,
yAxisName
} = optionFormat.otherConf,
seriesObj = {},
seriesData = [],
totalData = [],
newXAxisData = [],
legendTempData = [];
optionFormat.grid = grid || {};
optionFormat.color = _color || optionFormat.color;
optionFormat.legend.bottom = legendBottom || 16;
optionFormat.legend.itemGap = 34;
optionFormat.yAxis.name = yAxisName;
optionFormat.yAxis.nameRotate = 1;
optionFormat.tooltip.trigger = "item";
optionFormat.tooltip.axisPointer = {
type: "line",
lineStyle: {
color: "transparent"
}
};
optionFormat.legend.data = [];
seriesData = optionFormat.xAxis.data.map(item => {
return {
name: item,
data: []
};
});
optionFormat.series.forEach((item, index) => {
newXAxisData.push(item.name);
item.data.forEach((dataItem, dataIndex) => {
seriesObj[optionFormat.xAxis.data[dataIndex]] = item.data[dataIndex];
// Object.keys(seriesObj).forEach(key => {
// })
for (let k in seriesObj) {
if (seriesData[dataIndex].name === k) {
seriesData[dataIndex].data.push(seriesObj[k]);
}
}
seriesObj = {};
});
});
seriesData.forEach(item => {
item.itemStyle = {
normal: {
barBorderRadius: 7
}
};
item.type = "bar";
item.barWidth = 14;
optionFormat.legend.data.push({
name: item.name,
icon: "circle"
});
item.data.forEach((dataItem, dataIndex) => {
if (totalData[dataIndex]) {
totalData[dataIndex] += dataItem;
} else {
totalData[dataIndex] = dataItem;
}
});
});
let option = Object.assign({}, optionFormat);
option.xAxis.data = newXAxisData;
option.series = seriesData;
option.tooltip.formatter = params => {
let xaxisName = "",
dataNum = null,
unit = "";
xaxisName = params.name + params.seriesName;
dataNum = params.value
// params.value > 10000
// ? (params.value / 10000).toFixed(2)
// : params.value;
unit = this.$options.filters[seriesText](params.value);
let 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>
<p style="font-size:13px;padding:4px 23px 6px 15px;color:#333;text-align: left;">${dataNum}${unit}</p>
</div>
`;
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawScatter(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = { top: 88, right: 75, left: 74 };
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
// 特殊配置项
let { kpiName, grid, _color, isYear } = optionFormat.otherConf;
optionFormat.xAxis.name = this.$t("table.date");
optionFormat.yAxis.name = "AQI" + this.$t("echarts.index");
optionFormat.grid = isYear
? { top: 64, right: 40, left: 42 }
: grid || { top: 88, right: 75, left: 74 };
optionFormat.legend.top = 26;
optionFormat.legend.fontSize = 14;
if (isYear) {
optionFormat.dataZoom = [
{
type: "slider",
throttle: 0
},
{
type: "inside",
throttle: 0
}
];
}
let tooltipData = [],
dataNumArr = [],
maxNum = null,
minNum = null,
sizeRatio = null,
maxSize = 100,
// , minSize = 13
// , maxRatio = null
// , cords = 6
// , itemColors = ''
// , yAxisData = []
// , _dataNumIndex = 0
symbolsizeArr = [],
sessionLocalWeather = "",
legendName = "",
legendData = [],
newSeries = [];
optionFormat.series.forEach((item, index) => {
sessionLocalWeather = this.getSessionLocal("weather", item.name);
legendName = sessionLocalWeather
? this.$t("dictionary." + sessionLocalWeather)
: this.$t("dictionary.unknow") + [i];
legendData.push({
name: legendName,
icon: "circle"
});
tooltipData[legendName] = item.data;
item.name = legendName;
item.type = "scatter";
item.itemStyle = {
normal: {
color: _color[index],
borderColor: _color[index],
borderWidth: 2,
opacity: 0.5
}
};
symbolsizeArr[index] = [];
item.data.forEach((dataItem, dataIndex) => {
if (dataItem) {
symbolsizeArr[index][dataIndex] = dataItem.value1;
dataNumArr.push(dataItem.value1);
} else {
symbolsizeArr[index][dataIndex] = 0;
}
});
});
newSeries = Object.assign([], optionFormat.series);
maxNum = Math.max(...dataNumArr);
minNum = Math.min(...dataNumArr);
sizeRatio = this.computeSize(maxNum, maxSize);
let option = Object.assign({}, optionFormat); // coverTemp
option.series = newSeries.map((item, index) => {
item.symbolSize = (data, param) => {
let _size = null;
_size = symbolsizeArr[index][param.dataIndex]
? symbolsizeArr[index][param.dataIndex] / sizeRatio
: 0;
if (_size === 0) {
_size = 0;
} else {
_size = _size <= 4 ? 4 : _size;
}
return _size;
};
item.data = item.data.map(dataItem => {
return dataItem ? dataItem.weather.aqi : 0;
});
return item;
});
option.legend.data = legendData;
option.tooltip.formatter = params => {
if (!tooltipData[params.seriesName][params.dataIndex]) return;
let toolData = null,
flowNum = "",
weatherStr = "",
apiIndex = "",
temperature = "",
htmls = "",
dicWeather = "";
toolData = tooltipData[params.seriesName][params.dataIndex];
if (toolData) {
flowNum = toolData.value1;
dicWeather = this.getSessionLocal("weather", toolData.weather.type);
weatherStr = dicWeather
? this.$t("dictionary." + dicWeather)
: this.$t("dictionary.unknow");
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;">${kpiName}: ${flowNum}${this.$t(
"format.perTime"
)}</p>
<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">${this.$t(
"table.weather"
)} : ${weatherStr}</p>
<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">AQI${this.$t(
"echarts.index"
)} : ${apiIndex}</p>
<p style="font-size:13px; padding:4px 15px; color:#444444; text-align: left;">${this.$t(
"table.tem"
)} : ${temperature}</p>
</div>`;
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawSankey(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
if (!data || JSON.stringify(data) === "{}") {
return false;
} else if (!data.node.length && !data.link.length) {
this.chart.clear();
let emptyOption = {
graphic: {
type: "text",
left: "center",
top: "middle",
z: 100,
style: {
fill: "#444",
text: "暂无数据",
font: "26px " + this.fontFamily
}
},
grid: {
left: 36,
right: 0,
top: 26,
bottom: 52
}
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(emptyOption);
return false;
}
// 结构格式化
debugger
let option = {
backgroundColor: "#fff",
color: data.color || [
"#77C3F2",
"#FAA805",
"#efa18d",
"#61a0a8",
"#d87c7c",
"#30588C",
"#6e7074",
"#919e8b"
],
tooltip: {
formatter: params => {
return `${params.name} ${params.value || ""}${
params.value ? this.$t("format.perNum") : ""
}`;
}
},
series: {
type: "sankey",
layout: "none",
draggable: false,
focusNodeAdjacency: true,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "#aaa"
}
},
lineStyle: {
normal: {
color: "source",
curveness: 0.7,
borderWidth: 1,
borderColor: "#000"
},
emphasis: {
borderWidth: 1,
borderColor: "#000"
}
},
label: {
normal: {
fontSize: 14
}
},
data: data.node.map((item, index) => {
item.itemStyle = {
color: data.color[index]
};
return item;
}),
links: data.link
}
};
if(data.otherConf) {
option.series.lineStyle = data.otherConf.lineStyle || '';
option.series.top = data.otherConf.top || ''
option.series.levels = [
{
depth: 0,
itemStyle: {
color: '#F27E7E',
},
lineStyle: {
color: 'source',
opacity: 0.2,
},
},
{
depth: 1,
lineStyle: {
color: 'source',
opacity: 0.2,
},
},
{
depth: 2,
lineStyle: {
color: 'source',
opacity: 0.2,
},
},
{
depth: 3,
label: {
fontSize: 12,
},
},
]
}
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawRing(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 36,
right: 36,
top: 26,
bottom: 52
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
let { _color, seriesText, legendBottom } = optionFormat.otherConf,
legendData = [];
optionFormat.xAxis = null;
optionFormat.yAxis = null;
optionFormat.color = _color || optionFormat.color;
optionFormat.legend.bottom = legendBottom || 16;
optionFormat.series.forEach((item, index) => {
item.center = [50 * index + 25 + "%", "50%"];
item.radius = ["55%", "65%"];
item.avoidLabelOverlap = false;
item.label = {
normal: {
show: true,
position: "center",
formatter: param => {
return index === 0 ? this.$t("asisTab.totalPassengerFlow") : this.$t("asisTab.averagePassengerFlow");
},
color: "#000",
fontSize: 24
},
emphasis: {
show: true
}
};
item.labelLine = {
normal: {
show: false
}
};
item.data.forEach(dataItem => {
if (legendData.indexOf(dataItem.name) === -1) {
legendData.push(dataItem.name);
}
});
});
let option = Object.assign({}, optionFormat);
option.legend.data = legendData;
option.tooltip.formatter = params => {
let htmls = "",
flowNum = "",
unit = "";
flowNum =
params.value || params.value == 0
? params.value > 100000
? (params.value / 10000).toFixed(2)
: params.value
: "--";
unit = this.$options.filters[seriesText]
? this.$options.filters[seriesText](params.value)
: "";
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.seriesName}
</div>
<p style="font-size:13px; padding:4px 15px; color:#444; text-align: left;">${params.name}: ${flowNum}${unit}</p>
<p style="font-size:13px; padding:4px 15px; color:#444; text-align: left;">${this.$t("asisTab.proportion")}: ${params.percent}%</p>`;
return htmls;
};
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawReflectLine(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
// 特殊配置项
let {
grid,
_color,
seriesText,
legendShow = true,
periodTime,
nextTimeNum,
legendBottom = 0,
legendSelectedLen
} = optionFormat.otherConf;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = {};
optionFormat.yAxis = {};
optionFormat.grid = {
left: 60,
right: 26,
top: "6%"
};
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
}, 500);
this.chart.setOption(optionFormat);
return;
}
optionFormat.grid = grid || [
{
left: 60,
right: 26,
top: "10%",
height: "40%"
},
{
left: 60,
right: 26,
top: "53%",
height: "40%"
}
];
optionFormat.color = _color;
optionFormat.animation = false;
optionFormat.tooltip.trigger = "axis";
optionFormat.axisPointer = {
animation: false,
link: {
xAxisIndex: "all"
}
};
optionFormat.dataZoom = [
{
type: "slider",
show: false,
realtime: true,
xAxisIndex: [0, 1]
},
{
type: "inside",
show: true,
xAxisIndex: [0, 1]
}
];
// let xAxisStyle = {}
// Object.keys(optionFormat.xAxis).forEach(item => {
// if(item !== 'data') {
// xAxisStyle[item] = optionFormat.xAxis[item]
// }
// })
let xAxisData = optionFormat.xAxis.data;
optionFormat.yAxis = [
{
type: "value",
name: this.$t("format.INNUM"),
splitLine: {
lineStyle: {
color: "#f5f5f5"
}
}
},
{
type: "value",
name: this.$t("format.OUTNUM"),
splitLine: {
lineStyle: {
color: "#f5f5f5"
}
},
gridIndex: 1,
inverse: true
}
];
if (legendShow) {
optionFormat.legend.bottom = legendBottom
} else {
optionFormat.legend = null
}
// inNum: 进 outNum: 出
optionFormat.series.forEach((item, index) => {
if (legendShow) {
optionFormat.legend.selected[item.name] = legendSelectedLen
// ? index <= legendSelectedLen
? index >= 0
: true
}
if (item.id.endsWith('inNum')) {
item.xAxisIndex = 0;
item.yAxisIndex = 0;
} else {
item.xAxisIndex = 1;
item.yAxisIndex = 1;
}
item.type = "line";
item.symbolSize = 10;
item.sampling = "average";
// if (index === 1) {
// item.xAxisIndex = 1;
// item.yAxisIndex = 1;
// }
});
let option = Object.assign({}, optionFormat);
option.xAxis = [
{
type: "category",
boundaryGap: true,
axisLine: {
onZero: false
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
textStyle: {
color: "#888",
fontFamily: this.fontFamily
}
},
data: xAxisData
},
{
type: "category",
boundaryGap: true,
axisLine: {
onZero: false
},
axisTick: {
alignWithLabel: true
},
axisLabel: {
show: false
},
gridIndex: 1,
position: "top",
data: xAxisData
}
];
option.tooltip.formatter = params => {
let htmls = `
<div style="font-size:16px;height:32px;color:#0069FF;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left; overflow: hidden;">${
periodTime
? this.addNextTime(params[0].name, nextTimeNum)
: params[0].name
}</div>
`,
val = "",
unit = "";
if (params[0].axisIndex === 1) {
params.reverse();
}
params.forEach(item => {
val = item.value
? item.value >= 100000
? (item.value / 10000).toFixed(2)
: item.value
: "";
unit = this.$options.filters[seriesText](item.value || 0);
htmls += `
<p style="font-size:16px;height:32px;color:#444;border-radius:4px;line-height:36px;padding-left:15px;padding-right:15px;text-align: left;">
${
item.seriesId.split("_").length > 1
? item.seriesId.split("_")[0] +
this.$t("button." + item.seriesId.split("_")[1])
: item.seriesId
}: ${val || "--"}${unit || this.$t("format.perNum")}
</p>
`;
});
return htmls;
};
// 控制显示选择图例个数
// this.chart.on('legendselectchanged', ({ name, selected }) => {
// console.log('legendselectchanged change', name, selected)
// })
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
drawPie(data) {
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
let optionFormat = optionFormatter(data);
if (!optionFormat) return;
if (optionFormat.isEmpty) {
this.chart.clear();
optionFormat.xAxis = null;
optionFormat.yAxis = null;
setTimeout(() => {
if (this.chart) {
this.chart.hideLoading();
}
this.chart.setOption(optionFormat);
}, 500);
return;
}
let { _color, seriesText, legendBottom, radius } = optionFormat.otherConf
let itemDatas = []
let totalNum = 0
optionFormat.xAxis = null;
optionFormat.yAxis = null;
optionFormat.color = _color || optionFormat.color;
optionFormat.legend = {
orient: "horizontal",
x: "center",
itemWidth: 12,
itemHeight: 12,
itemGap: 30,
bottom: legendBottom || 30,
selected: {},
textStyle: {
color: '#555'
},
data: []
}
optionFormat.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)'
}
let option = Object.assign({}, optionFormat);
option.series.forEach((item, index) => {
item.data.forEach(dataItem => {
totalNum += dataItem.value;
option.legend.data.push(dataItem.name)
})
item.type = 'pie'
item.radius = radius || ['0%', '50%']
item.center = ['50%', '50%']
item.itemStyle = {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
item.label = {
normal: {
show: true,
position: 'outside',
formatter: '{b} {d}%'
},
emphasis: {
show: true
}
}
item.labelLine = {
normal: {
show: true
}
}
})
option.tooltip.formatter = (params, ticket, callback) => {
let htmls = ''
let dataVal = ''
let 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;
}
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
this.chart.off('click')
this.chart.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
var option = {
series: [{
itemStyle: {
normal:{
color: function (params){
if(params.dataIndex == index){
// console.log(params.dataIndex)
return '#0069FF';
} else {
return '#3BB8FF';
}
},
},
},
}],
}
this.chart.setOption(option)
this.$emit('emitSingle', stage)
});
},
drawFunnel(data){
var uploadedDataURL = "/asset/get/s/data-1576742942370-X6JMK0GY.png";
var colors = ['#1cd389', '#668eff', '#ffc751', '#ff6e73', '#8683e6', '#9692ff'];
var url = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAARCAMAAACLgl7OAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAaVBMVEUAAADBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcHBwcEAAAD45xibAAAAInRSTlMAmT6WJYwSfBMGZAFHmEgtkBeCCW0KAlI1k5QeiA10A1tc7ah1owAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAB7SURBVCjPtZDZDoAgDAQXvA+8bwX1/3/SGKIBEd+cx07TdgtIiAF0/mygDvnAoYDr2b3nnjP8wOaDUG6J4ncfR9cdScpMzbJECZEXT1/kesyy0n1VPv6AulF908Kg6+9DWN/hjWGUfhpgYV5Ov8ywwgUhguODddtXvXIAjuUEs/70/t4AAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMTItMTZUMTU6MzM6MDkrMDg6MDCzL2BEAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTEyLTE2VDE1OjMzOjA5KzA4OjAwwnLY+AAAAABJRU5ErkJggg==';
this.chart.showLoading("default", {
text: "",
color: "#409eff"
});
if (!data || JSON.stringify(data) === "{}") {
return false;
}
let chartdata = data.data;
var data1 =[],data2 = [];
for (var i = 0; i < chartdata.length; i++) {
let {name,value} = chartdata[i];
let obj1 = {
value:value,
name:name
}
let obj2 = {
value:value,
itemStyle: {
opacity: 0,
},
}
data1.push(obj1)
data2.push(obj2)
}
console.log(chartdata)
// 结构格式化
let option = {
backgroundColor: "#fff",
color: data.color || ["#B8CDF3", "#9AB9F9", "#7BA5F5", "#6A95EB"],
grid:{
left: 36,
right: 36,
top: 56,
bottom: 52
},
tooltip: {
formatter: params => {
return `${params.name} ${params.value || ""}${
params.value ? this.$t("format.perNum") : ""
}`;
}
},
series: [{
top: 56,
type: 'funnel',
height: '400',
gap: 0,
minSize: 150,
left: '20%',
width: '60%',
label: {
show: true,
position: 'inside',
fontSize: '14',
formatter: function(d) {
var ins = d.name + '{aa|}\n' + d.data.value;
return ins
},
rich: {
aa: {
padding: [8, 0, 6, 0],
}
}
},
data: data1
},{
top: 56,
type: 'funnel',
height: '400',
gap: -1,
minSize: 150,
left: '20%',
width: '60%',
z: 2,
label: {
normal: {
color: '#333',
position: 'right',
formatter: function(d) {
let index = d.dataIndex;
var ins = index == data1.length-1?"{bb|转化率}":'{bb|' + d.percent + '%}{cc|}';
ins=""
return ins
},
rich: {
bb: {
align: 'center',
color: '#333',
fontSize: '22',
},
cc:{
backgroundColor: {
margin:[0,0,0,30],
fontSize:90,
image: weatherpng['1'] //这个warnImg是上面定义的图片var warnImg = "img/warn.png";
}
}
}
}
},
labelLine: {
show: false
},
data: data2
},{
z: 1,
top: 106,
height: 300,
type: 'graph',
layout: 'none',
symbolSize: 0,
roam: false,
edgeSymbol: ['circle', 'arrow'],
// edgeSymbolSize: [4, 10],
lineStyle: {
normal: {
width: 2,
}
},
edgeLabel: {
normal: {
show: true,
rotate: 90,
position: 'middle',
backgroundColor: '#e4f5da',
borderRadius: 4,
color: '#333',
verticalAlign: 'middle',
fontSize: 14,
legendHoverLink: true,
padding: [3, 10, 5, 10],
formatter: function(d) {
console.log(d)
if (d.value) {
var ins = '{img1|} ' + '{words|' + d.value + '%}';
return ins;
}
},
rich: {
img1: {
backgroundColor: {
image: uploadedDataURL,
},
width: 18,
height: 16
},
words: {
color: '#333',
position: 'right',
fontSize: 14,
lineHeight: 20,
padding: [0, 0, 5, 0],
}
}
}
},
data: [{
name: '全场客流',
x: 400,
y: 0
}, {
name: '楼层客流',
x: 400,
y: 20
}, {
name: '过店客流',
x: 400,
y: 40
}, {
name: '进店客流',
x: 400,
y: 60
}],
links: [{
source: '全场客流',
target: '楼层客流',
value: ((chartdata[2].value/chartdata[3].value)*100).toFixed(2),
lineStyle: {
normal: {
curveness: 6,
}
}
},
{
source: '楼层客流',
target: '过店客流',
value: ((chartdata[0].value/chartdata[2].value)*100).toFixed(2),
lineStyle: {
normal: {
curveness: 5,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#668eff' // 0% 处的颜色
}, {
offset: 1,
color: '#ffc751' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
{
source: '过店客流',
target: '进店客流',
value: ((chartdata[1].value/chartdata[0].value)*100).toFixed(2),
lineStyle: {
normal: {
curveness: 4,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#ffc751' // 0% 处的颜色
}, {
offset: 1,
color: '#ff6e73' // 100% 处的颜色
}],
global: false // 缺省为 false
}
}
}
},
],
}]
};
if(data.otherConf) {
option.series.lineStyle = data.otherConf.lineStyle || '';
option.series.top = data.otherConf.top || ''
}
this.chart.clear();
this.chart.hideLoading();
this.chart.setOption(option);
},
autoComplete(dataLen, data, type) {
if (type === "string") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
} else if (type === "seven") {
if (dataLen < 7) {
for (let i = 0; i < 7; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
} else if (type === "zero") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = 0;
}
}
}
} else if (type === "test") {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "C119 BHG MARKET PLACE超市、 BHG厨房";
}
}
}
} else {
if (dataLen < 10) {
for (let i = 0; i < 10; i++) {
if (!data[i] && data[i] != 0) {
data[i] = "";
}
}
}
}
return data;
},
computeSize(maxNum, maxSize, x) {
x = x || 1;
if (maxNum / x > maxSize) {
x += 1;
return this.computeSize(maxNum, maxSize, x);
} else {
return x;
}
},
addNextTenTime(timeStr) {
let start = timeStr;
let matchtTime = timeStr.split(":");
return `${start}-${matchtTime[0] + ":" + (matchtTime[1] - 0 + 10)}`;
},
addNextTime(timeStr, nextTimeNum) {
let start = timeStr,
matchtTime = timeStr.split(":"),
endTime;
endTime = nextTimeNum
? matchtTime[1] - 0 + nextTimeNum < 60
? matchtTime[0] + ":" + (matchtTime[1] - 0 + nextTimeNum)
: matchtTime[0] - 0 + 1 + ":" + "00"
: (matchtTime[0] > 8
? matchtTime[0] - 0 + 1
: "0" + (matchtTime[0] - 0 + 1)) +
":" +
matchtTime[1];
return `${start}-${endTime}`;
}
//
}
};
</script>