mengff
4 weeks ago
3 changed files with 507 additions and 11 deletions
@ -0,0 +1,316 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
tooltip: { |
|||
show: true, |
|||
trigger: "axis", |
|||
position: function (point, params, dom, rect, size) { |
|||
// 提示框位置
|
|||
var x = 0; // x坐标位置
|
|||
var y = 0; // y坐标位置
|
|||
// 当前鼠标位置
|
|||
var pointX = point[0]; |
|||
var pointY = point[1]; |
|||
// 提示框大小
|
|||
var boxWidth = size.contentSize[0]; |
|||
var boxHeight = size.contentSize[1]; |
|||
// boxWidth > pointX 说明鼠标左边放不下提示框
|
|||
if (boxWidth > pointX) { |
|||
x = 5; |
|||
} else { |
|||
// 左边放的下
|
|||
x = pointX - boxWidth; |
|||
} |
|||
// boxHeight > pointY 说明鼠标上边放不下提示框
|
|||
if (boxHeight > pointY) { |
|||
y = 5; |
|||
} else { |
|||
// 上边放得下
|
|||
y = pointY - boxHeight; |
|||
} |
|||
return [point[0] + 10, y]; |
|||
}, |
|||
formatter: (params) => { |
|||
|
|||
let name = params[0].name.replace(/-/g, "") |
|||
let name1 = '济南-' + name |
|||
let name2 = '菏泽-' + name |
|||
if(params[0].axisIndex === 1){ |
|||
name1 = '菏泽-' + name |
|||
name2 = '济南-' + name |
|||
} |
|||
let tip = `${name1}<br/>`; |
|||
params.forEach((item,index) =>{ |
|||
if (item.axisIndex === 0){ |
|||
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>` |
|||
} |
|||
}) |
|||
tip = tip + `<br/>${name2}<br/>` |
|||
params.forEach((item,index) =>{ |
|||
if (item.axisIndex === 1){ |
|||
tip = tip + `${params[index].marker}${params[index].seriesName}: <span style="font-weight:bold;"> ${params[index].value} 辆</span><br/>` |
|||
} |
|||
}) |
|||
return tip; |
|||
}, |
|||
}, |
|||
axisPointer: { |
|||
link: [ |
|||
{ |
|||
xAxisIndex: "all", |
|||
}, |
|||
], |
|||
}, |
|||
legend: { |
|||
top: 0, |
|||
right: 0, |
|||
icon:'rect', |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
itemHeight: 5, |
|||
itemWidth: 10, |
|||
data: [ |
|||
{ |
|||
name: "本期车流量", |
|||
itemStyle: { |
|||
color: '#6DBBFB' |
|||
} |
|||
|
|||
},{ |
|||
name: "去年同期", |
|||
itemStyle: { |
|||
color: '#5FA52B' |
|||
} |
|||
|
|||
}, |
|||
], |
|||
}, |
|||
grid: [ |
|||
{ |
|||
left: 60, |
|||
top: '25%', |
|||
right: 10, |
|||
height: "35%", |
|||
}, |
|||
{ |
|||
left: 60, |
|||
right: 10, |
|||
top: "60%", |
|||
height: "35%", |
|||
}, |
|||
], |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
data: [], |
|||
axisLabel: { |
|||
show:false |
|||
}, |
|||
z: 10, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
onZero: true, |
|||
axisLine: { show: false }, |
|||
gridIndex: 1, |
|||
type: "category", |
|||
z: 10, |
|||
data: [], |
|||
position: "top", |
|||
axisLabel: { |
|||
color: "#fff", |
|||
margin: -7, |
|||
// formatter: function (params) {
|
|||
// return `${params.substr(0,params.length-2)}\n\n${params.substr(params.length-2)}`;
|
|||
// },
|
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
name: "车流量 ", |
|||
type: "value", |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#00D1FF", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
gridIndex: 1, |
|||
name: "", |
|||
type: "value", |
|||
inverse: true, |
|||
axisLabel: { |
|||
color: "#FFF", |
|||
}, |
|||
axisLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "本期车流量", |
|||
type: "line", |
|||
symbolSize: 0, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
smooth: true, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 1, |
|||
color: "#06AED300", |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: "#06AED3", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
57, 36, 56, 95, 125, 194, 94, 94, 74, 34, 125, 194, 94, 94, 74, 34, |
|||
], |
|||
}, |
|||
{ |
|||
name: "去年同期", |
|||
type: "line", |
|||
symbol: 'none', |
|||
smooth: true, |
|||
lineStyle: { |
|||
type:'dashed', |
|||
width: 1 |
|||
}, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 1, |
|||
color: "#5FA52B00", |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: "#5FA52B55", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
94, 74, 34, 125, 194, 94, 94, 74, 34,57, 36, 56, 95, 125, 194, 94, |
|||
], |
|||
}, |
|||
{ |
|||
name: "本期车流量", |
|||
type: "line", |
|||
symbol: "circle", |
|||
symbolSize: 0, |
|||
xAxisIndex: 1, |
|||
yAxisIndex: 1, |
|||
smooth: true, |
|||
lineStyle: { |
|||
color: "#06AED3", |
|||
}, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "#06AED300", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "#06AED3", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
67, 36, 56, 195, 25, 194, 94, 94, 74, 21, 195, 25, 194, 94, 94, 74, 21, |
|||
], |
|||
}, |
|||
{ |
|||
name: "去年同期", |
|||
type: "line", |
|||
symbol: 'none', |
|||
smooth: true, |
|||
xAxisIndex: 1, |
|||
yAxisIndex: 1, |
|||
lineStyle: { |
|||
type:'dashed', |
|||
width: 1 |
|||
}, |
|||
areaStyle: { |
|||
normal: { |
|||
color: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
0, |
|||
1, |
|||
[ |
|||
{ |
|||
offset: 1, |
|||
color: "#5FA52B00", |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: "#5FA52B55", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
}, |
|||
}, |
|||
data: [ |
|||
195,25, 194, 94, 94, 7, 25, 194, 94, 94, 74, 21, 67, 36, 56, 195, 4, 21, |
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
Loading…
Reference in new issue