/**
*
* 横向柱状图
* @param {number} id
* @param {number} _this
*/
export function rangkingBar(id, _this, rankingYdata, rankingOptions, rankingOptionsPercent, gridRight = '105px') {
let echarts2 = _this.$echarts.init(document.getElementById(id));
// let echarts2 = _this.$echarts.init(_this.$refs[id]);
let option = {
color: ['#0697FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: '#fff',
textStyle: {
color: '#333'
},
formatter: function (params) {
let firstParams = params[0];
return (
firstParams.name +
'<br>' +
'数量: ' +
firstParams.data?.toLocaleString() +
'<br>' +
'占比: ' +
rankingOptionsPercent[firstParams.dataIndex]
);
}
},
grid: {
top: '25px',
left: 85,
bottom: 0,
right: gridRight
},
xAxis: [
{
show: false
}
],
yAxis: [
{
type: 'category',
data: rankingYdata,
splitLine: {
show: false
},
axisLine: {
// 隐藏Y轴
show: false
},
axisTick: {
// 隐藏刻度线
show: false,
alignWithLabel: true
},
axisLabel: {
align: 'left',
margin: 85,
formatter: function(value, index) {
// 如果标签长度超过4，将剩余的文字替换为省略号
if (value.length > 4) {
return `{a|${(rankingOptions.length - index)}} ${value.slice(0, 4)}...`;
} else {
return `{a|${(rankingOptions.length - index)}} ${value}`;
}
},
lineHeight: 20,
rich: {
a: {
color: '#FFFFFF',
backgroundColor: '#0697FF',
borderRadius: 16,
width: 16,
height: 16,
align: 'center',
verticalAlign: 'middle',
fontSize: 12,
lineHeight: 16
}
}
}
}
],
series: [
{
type: 'bar',
data: rankingOptions,
barWidth: 10,
label: {
position: 'right',
show: true,
color: '#333',
formatter: function (params) {
return `${rankingOptions[params.dataIndex]?.toLocaleString()} {a|${
rankingOptionsPercent[params.dataIndex]
}}`;
},
rich: {
a: {
color: '#2B3DE0'
}
}
}
}
]
};
echarts2.setOption(option);
window.addEventListener('resize', () => {
echarts2.resize();
});
}
/**
*
* 竖向柱状图
* @param {number} id
* @param {number} _this
*/
export function drawbar(id, _this, operatorDistributionData, arr = ['电瓶车运营商', '汽车运营商', '换电柜运营商', '充电柜运营商', '门禁运营商']) {
let myChart1 = _this.$echarts.init(document.getElementById(id));
let options1 = {
color: ['#0A9AFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: '#fff',
textStyle: {
color: '#333'
},
formatter: function (params) {
let firstParams = params[0];
return (
firstParams.name +
'<br>' +
'数量: ' +
firstParams.data?.toLocaleString()
);
}
},
xAxis: {
axisTick: {
show: false
},
data: arr,
axisLine: {
lineStyle: {
color: '#D6DCE0'
}
},
axisLabel: {
textStyle: {
color: '#0F3F62'
}
}
},
yAxis: [
{
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
],
series: [
{
data: operatorDistributionData,
type: 'bar',
showBackground: true,
label: {
show: true,
position: 'top',
color: '#333',
formatter: function (params) {
return params.data?.toLocaleString();
}
},
barWidth: '24px'
}
],
grid: {
left: '30px',
right: '-30px',
bottom: '36px',
containLabel: true
}
};
myChart1.setOption(options1);
window.addEventListener('resize', () => {
myChart1.resize();
});
}
/**
*
* 横向滚动柱状图
* @param {number} id
* @param {number} _this
*/
export function rangkingSrollBar(id, _this, rankingYdata, rankingOptions, rankingOptionsPercent) {
let echarts2 = _this.$echarts.init(document.getElementById(id));
let option = {
color: ['#0697FF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: '#fff',
textStyle: {
color: '#333'
},
formatter: function (params) {
let firstParams = params[0];
return (
firstParams.name +
'<br>' +
'数量: ' +
firstParams.data?.toLocaleString() +
'<br>' +
'占比: ' +
rankingOptionsPercent[firstParams.dataIndex]
);
}
},
grid: {
top: '25px',
left: 85,
bottom: 0,
right: '105px'
},
xAxis: [
{
show: false
}
],
yAxis: [
{
type: 'category',
data: rankingYdata,
splitLine: {
show: false
},
axisLine: {
// 隐藏Y轴
show: false
},
axisTick: {
// 隐藏刻度线
show: false,
alignWithLabel: true
},
axisLabel: {
align: 'left',
margin: 85,
formatter: function(value, index) {
const indexnum = rankingYdata.indexOf(value);
// 如果标签长度超过4，将剩余的文字替换为省略号
if (value.length > 4) {
return `{a|${(rankingYdata.length - indexnum)}} ${value.slice(0, 4)}...`;
} else {
return `{a|${(rankingYdata.length - indexnum)}} ${value}`;
}
},
lineHeight: 20,
rich: {
a: {
color: '#FFFFFF',
backgroundColor: '#0697FF',
borderRadius: 10,
width: 22,
height: 14,
align: 'center',
verticalAlign: 'middle',
fontSize: 12,
lineHeight: 14
}
}
}
}
],
series: [
{
type: 'bar',
data: rankingOptions,
barWidth: 10,
label: {
position: 'right',
show: true,
color: '#333',
formatter: function (params) {
return `${rankingOptions[params.dataIndex]?.toLocaleString()} {a|${
rankingOptionsPercent[params.dataIndex]
}}`;
},
rich: {
a: {
color: '#2B3DE0'
}
}
}
}
],
dataZoom: [
{
type: 'inside',
startValue: rankingYdata.length,
endValue: rankingYdata.length - 5,
minValueSpan: 4,
maxValueSpan: 4,
width: '10',
height: '90%',
yAxisIndex: [0], // 控制y轴滚动
fillerColor: 'rgba(154, 181, 215, 1)', // 滚动条颜色
borderColor: 'rgba(17, 100, 210, 0.12)',
backgroundColor: '#cfcfcf', // 两边未选中的滑动条区域的颜色
handleSize: 0, // 两边手柄尺寸
showDataShadow: false, // 是否显示数据阴影 默认auto
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
top: '1%',
right: '5'
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 15,
height: '88%',
showDataShadow: false,
moveHandleStyle: {
opacity: 0
},
handleSize: 0, // 两边手柄尺寸
showDetail: false, // 拖拽时是否展示滚动条两侧的文字
fillerColor: 'rgba(154, 181, 215, 1)', // 滚动条颜色
borderColor: 'rgba(17, 100, 210, 0.12)',
backgroundColor: '#cfcfcf', // 两边未选中的滑动条区域的颜色
left: '97%'
}]
};
echarts2.setOption(option);
window.addEventListener('resize', () => {
echarts2.resize();
});
}
/**
* 饼图
* @param {number} id
* @param {number} _this
*/
export function drawLine(id, _this) {
let myChart1 = _this.$echarts.init(document.getElementById(id));
let options1 = {
series: [
{
name: 'Access From',
type: 'pie',
radius: ['70%', '90%'],
avoidLabelOverlap: false,
itemStyle: {
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: _this.opinionData,
color: [
new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#158FFF' },
{ offset: 1, color: '#6398FF' }
]),
new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#a9e1fc' },
{ offset: 1, color: '#53bcf5' }
]),
new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color:'#ffca59' },
{ offset: 1, color: '#ffca5a' }
]),
new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#FF927A' },
{ offset: 1, color: '#FFB79F' }
]),
new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#38C46A' },
{ offset: 1, color: '#61DA93' }
])
]
}
]
};
myChart1.setOption(options1);
window.addEventListener('resize', () => {
myChart1.resize();
});
}
/**
* 曲线图
* @param {number} id
* @param {number} _this
* @param {array} arr
*/
export function trendLine(id, _this, arr = ['总数', '电瓶车', '汽车', '换电柜', '充电柜', '门禁']) {
let echarts3 = _this.$echarts.init(document.getElementById(id));
let option = {
color: ['#ff313d', '#2d40e1', '#53bcf5', '#ffca59', '#ff927a', '#38c46a'],
tooltip: {
trigger: 'axis',
position: function (pt, params, dom, rect, size) {
dom.style.transform = 'translateZ(0)';
// var obj = { top: 100 };
// obj[['left', 'right'][+(pt[0] < size.viewSize[0] / 2)]] = 5;
// return obj;
// return [pt[0], '20%'];
},
formatter: function (params) {
let firstParams = params[0];
let str = `<span style='display: flex; padding-top:12px;margin-bottom: 20px;padding-left: 10px;'>${firstParams.name}<br/></span>`;
params.forEach((item, idx) => {
str += `<span style='display: flex; justify-content: space-between;line-height: 30px; width: 300px; padding-left:10px;padding-right:16px'><span>${item.marker}${item.seriesName}</span><span'>${item.data?.toLocaleString()}</span></span>`;
});
return str;
},
transitionDuration: 0,
backgroundColor: '#FFF',
extraCssText: 'box-shadow: 0 0 8px 2px rgba(214,220,224,0.3);',
textStyle: {
color: '#0F3F62'
}
},
legend: {
x: 'center',
icon: 'rect',
itemWidth: 14,
itemHeight: 5,
data: [
{
name: arr[0],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF313D'
},
{
offset: 0.8,
color: '#FF9789'
}
])
}
},
{
name: arr[1],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#2D40E1'
},
{
offset: 0.8,
color: '#6398FF'
}
])
}
},
{
name: arr[2],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#53BcF5'
},
{
offset: 0.8,
color: '#A9E1FC'
}
])
}
},
{
name: arr[3],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#ffca59'
},
{
offset: 0.8,
color: '#ffca5a'
}
])
}
},
{
name: arr[4],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF927a'
},
{
offset: 0.8,
color: '#FFB79f'
}
])
}
},
{
name: arr[5],
itemStyle: {
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#38c46a'
},
{
offset: 0.8,
color: '#61da93'
}
])
}
}
]
},
grid: {
left: '0',
right: '3%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: _this.lineXDate
}
],
yAxis: [
{
type: 'value',
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
},
axisLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: [
{
name: arr[0],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#FF313D'
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,49,61,0.1)'
},
{
offset: 0.8,
color: 'rgba(255,49,61,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYTotailDate
},
{
name: arr[1],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#2D40E1'
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(45,64,225,0.1)'
},
{
offset: 0.8,
color: 'rgba(45,64,225,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYBikeDate
},
{
name: arr[2],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#53BcF5'
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(83,188,245,0.1)'
},
{
offset: 0.8,
color: 'rgba(83,188,245,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYCarDate
},
{
name: arr[3],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#ffca59'
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,202,89,0.1)'
},
{
offset: 0.8,
color: 'rgba(255,202,89,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYExchangeCabinetDate
},
{
name: arr[4],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#FF927a'
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255,146,122,0.1)'
},
{
offset: 0.8,
color: 'rgba(255,146,122,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYChargeCabinetDate
},
{
name: arr[5],
type: 'line',
// stack: 'Total',
smooth: true,
lineStyle: {
width: 2,
color: '#38c46a'
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(56,196,106,0.1)'
},
{
offset: 0.8,
color: 'rgba(56,196,106,0)'
}
])
},
emphasis: {
focus: 'series'
},
data: _this.lineYEntranceGuardDate
}
],
dataZoom: [
{
type: 'slider'
}
]
};
echarts3.setOption(option);
window.addEventListener('resize', () => {
echarts3.resize();
});
}
ps：以上横向柱状图场景适用于y轴有多个值 且柱状图后有多个数据展示
折线图时间计算方法:
import moment from 'moment';
/**
* @param {object} value
* @param {string} type 枚举 趋势图 type为trend
* @param {Function} callback
*/
export function getParamsData(value, type, callback) {
let todayDate = moment().subtract(1, 'days').format('YYYY-MM-DD');
let startDate = moment().subtract(31, 'days').format('YYYY-MM-DD');
if (type === 'trend') {
if (value && Object.keys(value).length) {
if (value.dateRange) {
let startDateRange = moment(value.dateRange[0]).format('YYYY-MM-DD');
let endDateRange = moment(value.dateRange[1]).format('YYYY-MM-DD');
// todo 判断多年，取最近一年，暂时不处理
// let lastYearDate = moment(value.dateRange[1]).subtract(1, 'year');
// let lastYearDateRange = moment(value.dateRange[1]).subtract(1, 'year').format('YYYY-MM-DD');
// if (moment(value.dateRange[0]) < lastYearDate) {
// return { ...value, dateRange: `${lastYearDateRange} ~ ${endDateRange}；
} else {
return { ...value, dateRange: undefined };
}
} else {
return {};
}
}
};
