289 lines
9.1 KiB
JavaScript
289 lines
9.1 KiB
JavaScript
|
|
/**
|
|
* 左侧柱状图
|
|
* @param data
|
|
* @param xAxisData
|
|
* @param legend
|
|
* @param $echarts
|
|
* @returns {{yAxis: {axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, xAxis: {axisLabel: {show: boolean}, data, axisLine: {lineStyle: {color: string}}, splitLine: {lineStyle: {color: string, type: string}, show: boolean}, type: string}, color: string[], series, grid: {x: number, y: number, y2: number, x2: number}, legend: {formatter: (function(*=): *), padding: number[], itemGap: number, data, top: number, icon: string, width: string, itemWidth: number, textStyle: {verticalAlign: string, color: string, rich: {wxb: {verticalAlign: string, fontSize: number}, sub: {verticalAlign: string, fontSize: number}, wsb: {verticalAlign: string, fontSize: number}, sup: {verticalAlign: string, fontSize: number}}, lineHeight: number, fontSize: number}, align: string, selected}, tooltip: {alwaysShowContent: boolean, show: boolean, trigger: string}}}
|
|
*/
|
|
export const barChartData = function (data, xAxisData, legend,$echarts) {
|
|
const chartData = data.map((item,i)=>{
|
|
let color = [];
|
|
if (i === 0){
|
|
color = ['#BD7EFF','#947FEA']
|
|
}else{
|
|
color = ['#67D6FF','#7DAEFF']
|
|
}
|
|
return {
|
|
'data': item,
|
|
'type': 'bar',
|
|
'smooth': true,
|
|
"name": legend[i],
|
|
'barWidth': 4,
|
|
'barGap':'130%',
|
|
'itemStyle': {
|
|
'borderRadius': [2, 2, 0, 0],
|
|
'color': function (params) {
|
|
return new $echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[{
|
|
offset: 0,
|
|
color: color[0]
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: color[1]
|
|
}
|
|
]
|
|
)
|
|
},
|
|
}
|
|
}
|
|
})
|
|
return {
|
|
title: {
|
|
text:'用水统计',
|
|
textStyle:{
|
|
color:'#ffffff',
|
|
fontWeight:'normal',
|
|
}
|
|
},
|
|
color: ['#947FEA','#7DAEFF'],
|
|
xAxis: {
|
|
type: 'category',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(153,153,153,0.4)',
|
|
type: 'solid'
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
interval: 0,//使x轴文字显示全
|
|
rotate:30,
|
|
fontSize:10
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999999',
|
|
}
|
|
},
|
|
|
|
data: xAxisData
|
|
},
|
|
yAxis: {
|
|
name:'单位：吨',
|
|
type: 'value',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(153,153,153,0.4)',
|
|
type: 'solid'
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999999',
|
|
}
|
|
},
|
|
},
|
|
series: chartData,
|
|
tooltip: {
|
|
show: false,
|
|
alwaysShowContent: false,
|
|
trigger: 'item'
|
|
},
|
|
grid: {
|
|
x: 30,
|
|
y: 70,
|
|
x2: 22,
|
|
y2: 20,
|
|
},
|
|
legend: {
|
|
data: legend,
|
|
top: 10,
|
|
padding: [2, 2],
|
|
icon:'circle',
|
|
align:'left',
|
|
right:0,
|
|
itemGap:10,
|
|
width: "100%",
|
|
itemWidth:10,
|
|
// 设置文本样式
|
|
textStyle: {
|
|
// 未单独设置样式的图例（即非上下标）
|
|
lineHeight: 8,
|
|
verticalAlign: "middle",
|
|
fontSize: 10,
|
|
color: "#fff",
|
|
// 单独设置样式的图例（即上下标）
|
|
rich: {
|
|
// 数字下标
|
|
sub: {
|
|
verticalAlign: "bottom",
|
|
fontSize: 8
|
|
},
|
|
// 数字上标
|
|
sup: {
|
|
verticalAlign: "top",
|
|
fontSize: 8
|
|
},
|
|
// 文字下标
|
|
wxb: {
|
|
verticalAlign: "bottom",
|
|
fontSize: 7,
|
|
},
|
|
// 文字上标
|
|
wsb: {
|
|
verticalAlign: "top",
|
|
fontSize: 7,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
export const lineChartData = function () {
|
|
let xLabel = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
|
let dataValue = ['50', '150', '60', '110', '60', '200', '150'];
|
|
let dataValue1 = ['10', '60', '25', '45', '60', '76', '60'];
|
|
return {
|
|
dataZoom : {
|
|
type:"inside",
|
|
// orient:"vertical",
|
|
startValue:0,
|
|
endValue:10
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: '10%',
|
|
icon: "rect",
|
|
itemWidth: 10, // 图例标记的图形宽度。
|
|
// itemGap: 20, // 图例每项之间的间隔。
|
|
itemHeight: 10, // 图例标记的图形高度。
|
|
textStyle: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
padding: [0, 8, 0, 8]
|
|
}
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
left: '10%',
|
|
right: '5%',
|
|
bottom: '20%',
|
|
},
|
|
xAxis: {
|
|
boundaryGap: false,
|
|
name:'日',
|
|
type: 'category',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(153,153,153,0.4)',
|
|
type: 'solid'
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//x轴文字的配置
|
|
show: true,
|
|
// interval: 0,//使x轴文字显示全
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999999',
|
|
}
|
|
},
|
|
data: xLabel
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
name:'单位：吨',
|
|
nameLocation:'end',
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: 'rgba(153,153,153,0.4)',
|
|
type: 'solid'
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#999999',
|
|
}
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
name: '示例示例',
|
|
type: 'line',
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
smooth: true,
|
|
color:'#FADFA4',
|
|
lineStyle: {
|
|
color:'#FADFA4',
|
|
normal: {
|
|
width: 2,
|
|
},
|
|
},
|
|
symbolSize: 4, //设定实心点的大小
|
|
data: dataValue,
|
|
areaStyle: {
|
|
normal: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(250,223,164,0.2)'
|
|
}, {
|
|
offset: 1, color: 'rgba(250,223,164,0.2)'
|
|
}],
|
|
global: false
|
|
}
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '示例示例',
|
|
type: 'line',
|
|
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
smooth: true,
|
|
color:'#947FEA',
|
|
lineStyle: {
|
|
normal: {
|
|
width: 2,
|
|
},
|
|
},
|
|
symbolSize: 4, //设定实心点的大小
|
|
data: dataValue1,
|
|
areaStyle: {
|
|
normal: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(148,127,234,0.2)'
|
|
}, {
|
|
offset: 1, color: 'rgba(148,127,234,0.2)'
|
|
}],
|
|
global: false
|
|
}
|
|
},
|
|
},
|
|
}
|
|
]
|
|
}
|
|
}
|