zhangzhang
1 year ago
4 changed files with 216 additions and 208 deletions
@ -1,218 +1,224 @@ |
|||
import * as echarts from "echarts"; |
|||
var options = { |
|||
color: ["#5090FF", "#01B3E4"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
textStyle: { |
|||
color: "#333", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "0%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "30px", |
|||
containLabel: true, |
|||
}, |
|||
|
|||
color: ["#5090FF", "#01B3E4"], |
|||
tooltip: { |
|||
trigger: "axis", |
|||
textStyle: { |
|||
color: "#333", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: "2%", |
|||
right: "5%", |
|||
bottom: "10%", |
|||
top: "30px", |
|||
containLabel: true, |
|||
}, |
|||
|
|||
dataZoom: [ |
|||
{ |
|||
type: 'slider', |
|||
xAxisIndex: 0, |
|||
startValue: 0, |
|||
endValue: 7, |
|||
filterMode: 'filter', |
|||
height: 14, |
|||
bottom: 5, |
|||
handleSize: '200%', |
|||
handleIcon: "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", |
|||
// 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
|
|||
handleStyle: { |
|||
color: '#0BDADA', |
|||
borderWidth: 0, |
|||
}, |
|||
moveHandleStyle: { |
|||
color: 'transparent', |
|||
borderWidth: 0, |
|||
opacity: 0, |
|||
}, |
|||
selectedDataBackground: { |
|||
color: 'transparent', |
|||
areaStyle: { |
|||
opacity: 0 |
|||
}, |
|||
lineStyle: { |
|||
opacity: 0 |
|||
} |
|||
}, |
|||
backgroundColor: new echarts.graphic.LinearGradient( |
|||
0, 0, 1, 0, |
|||
[{ |
|||
offset: 0, |
|||
color: 'rgba(71, 180, 124, 0.70)' |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: 'rgba(71, 180, 124, 0)' |
|||
} |
|||
], |
|||
false |
|||
), |
|||
// shadowColor: 'rgba(255, 214, 62, 0.10)',
|
|||
// shadowBlur: 10
|
|||
|
|||
fillerColor: 'transparent', |
|||
borderColor: 'transparent', |
|||
textStyle: { |
|||
color: 'transparent' |
|||
}, |
|||
dataBackground: { |
|||
areaStyle: { |
|||
opacity: 0 |
|||
}, |
|||
lineStyle: { |
|||
opacity: 0 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
legend: { |
|||
show: true, |
|||
icon: "rect", |
|||
orient: "horizontal", |
|||
left: "right", |
|||
itemWidth: 12, |
|||
itemHeight: 12, |
|||
formatter: ["{a|{name}}"].join("\n"), |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#6A93B9", |
|||
height: 8, |
|||
rich: { |
|||
a: { |
|||
verticalAlign: "bottom", |
|||
}, |
|||
}, |
|||
dataZoom: [ |
|||
{ |
|||
type: "slider", |
|||
xAxisIndex: 0, |
|||
startValue: 0, |
|||
endValue: 7, |
|||
filterMode: "filter", |
|||
height: 14, |
|||
bottom: 5, |
|||
handleSize: "200%", |
|||
handleIcon: |
|||
"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z", |
|||
// 'image://data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTg2NDg1MzkzMjI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3MzUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTEyIDBDMjI2Ljc0Mjg1NyAwIDAgMjI2Ljc0Mjg1NyAwIDUxMnMyMjYuNzQyODU3IDUxMiA1MTIgNTEyIDUxMi0yMjYuNzQyODU3IDUxMi01MTItMjI2Ljc0Mjg1Ny01MTItNTEyLTUxMnogbTAgODc3LjcxNDI4NmMtMjA0LjggMC0zNjUuNzE0Mjg2LTE2MC45MTQyODYtMzY1LjcxNDI4Ni0zNjUuNzE0Mjg2czE2MC45MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2LTM2NS43MTQyODYgMzY1LjcxNDI4NiAxNjAuOTE0Mjg2IDM2NS43MTQyODYgMzY1LjcxNDI4Ni0xNjAuOTE0Mjg2IDM2NS43MTQyODYtMzY1LjcxNDI4NiAzNjUuNzE0Mjg2eiIgZmlsbD0iIzRBQkRDRiIgcC1pZD0iNDczNiI+PC9wYXRoPjxwYXRoIGQ9Ik01MTIgNTEybS0zNjUuNzE0Mjg2IDBhMzY1LjcxNDI4NiAzNjUuNzE0Mjg2IDAgMSAwIDczMS40Mjg1NzIgMCAzNjUuNzE0Mjg2IDM2NS43MTQyODYgMCAxIDAtNzMxLjQyODU3MiAwWiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDczNyI+PC9wYXRoPjwvc3ZnPg==',
|
|||
handleStyle: { |
|||
color: "#0BDADA", |
|||
borderWidth: 0, |
|||
}, |
|||
data: ["魅力值"], |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
moveHandleStyle: { |
|||
color: "transparent", |
|||
borderWidth: 0, |
|||
opacity: 0, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
selectedDataBackground: { |
|||
color: "transparent", |
|||
areaStyle: { |
|||
opacity: 0, |
|||
}, |
|||
lineStyle: { |
|||
opacity: 0, |
|||
}, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
backgroundColor: new echarts.graphic.LinearGradient( |
|||
0, |
|||
0, |
|||
1, |
|||
0, |
|||
[ |
|||
{ |
|||
offset: 0, |
|||
color: "rgba(71, 180, 124, 0.70)", |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: "rgba(71, 180, 124, 0)", |
|||
}, |
|||
], |
|||
false |
|||
), |
|||
// shadowColor: 'rgba(255, 214, 62, 0.10)',
|
|||
// shadowBlur: 10
|
|||
|
|||
fillerColor: "transparent", |
|||
borderColor: "transparent", |
|||
textStyle: { |
|||
color: "transparent", |
|||
}, |
|||
data: [ |
|||
"0点至1点", |
|||
"1点至2点", |
|||
"2点至3点", |
|||
"3点至4点", |
|||
"4点至5点", |
|||
"5点至6点", |
|||
"6点至7点", |
|||
"7点至8点", |
|||
"8点至9点", |
|||
"9点至10点", |
|||
"10点至11点", |
|||
"11点至12点", |
|||
"12点至13点", |
|||
"13点至14点", |
|||
"14点至15点", |
|||
"15点至16点", |
|||
"16点至17点", |
|||
"17点至18点", |
|||
"18点至19点", |
|||
"19点至20点", |
|||
"20点至21点", |
|||
"21点至22点", |
|||
"22点至23点", |
|||
"23点至24点", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
minInterval: 1, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
dataBackground: { |
|||
areaStyle: { |
|||
opacity: 0, |
|||
}, |
|||
lineStyle: { |
|||
opacity: 0, |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
}, |
|||
], |
|||
legend: { |
|||
show: true, |
|||
icon: "rect", |
|||
orient: "horizontal", |
|||
left: "right", |
|||
itemWidth: 12, |
|||
itemHeight: 12, |
|||
formatter: ["{a|{name}}"].join("\n"), |
|||
textStyle: { |
|||
fontSize: 12, |
|||
color: "#6A93B9", |
|||
height: 8, |
|||
rich: { |
|||
a: { |
|||
verticalAlign: "bottom", |
|||
}, |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
data: ["魅力值"], |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
// interval:0,
|
|||
color: "#BDD8FB", |
|||
fontSize: 12, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
data: [ |
|||
"0点至1点", |
|||
"1点至2点", |
|||
"2点至3点", |
|||
"3点至4点", |
|||
"4点至5点", |
|||
"5点至6点", |
|||
"6点至7点", |
|||
"7点至8点", |
|||
"8点至9点", |
|||
"9点至10点", |
|||
"10点至11点", |
|||
"11点至12点", |
|||
"12点至13点", |
|||
"13点至14点", |
|||
"14点至15点", |
|||
"15点至16点", |
|||
"16点至17点", |
|||
"17点至18点", |
|||
"18点至19点", |
|||
"19点至20点", |
|||
"20点至21点", |
|||
"21点至22点", |
|||
"22点至23点", |
|||
"23点至24点", |
|||
], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
min: 0, |
|||
minInterval: 1, |
|||
nameTextStyle: { |
|||
fontSize: 12, |
|||
color: "#BDD8FB", |
|||
align: "center", |
|||
}, |
|||
splitLine: { |
|||
lineStyle: { |
|||
color: "rgba(255, 255, 255, 0.15)", |
|||
// type: 'dashed', // dotted 虚线
|
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
splitArea: { show: false }, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
axisLabel: { |
|||
fontSize: 12, |
|||
fontFamily: "Bebas", |
|||
color: "#BDD8FB", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "", // 图例对应类别
|
|||
data: [ |
|||
400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, |
|||
400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, |
|||
], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#39B1FF", |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "line", |
|||
// symbol: "none",
|
|||
showSymbol: false, |
|||
smooth: true, // 是否曲线
|
|||
name: "", // 图例对应类别
|
|||
data: [400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900, 400, 600, 700, 200, 500, 700, 900], // 纵坐标数据
|
|||
lineStyle: { |
|||
color: "#39B1FF" |
|||
}, |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: 'linear', |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: '#39B1FF' // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity: 0.01, |
|||
color: '#39b1ff01' // 100% 处的颜色
|
|||
} |
|||
] |
|||
areaStyle: { |
|||
// 区域颜色
|
|||
// color: new graphic.LinearGradient(0, 0, 0, 1, [
|
|||
// {
|
|||
// offset: 0,
|
|||
// color: "#5090FF",
|
|||
// },
|
|||
// {
|
|||
// offset: 1,
|
|||
// color: "#1057E5",
|
|||
// },
|
|||
// ]),
|
|||
color: { |
|||
type: "linear", |
|||
x: 0, //右
|
|||
y: 0, //下
|
|||
x2: 0, //左
|
|||
y2: 1, //上
|
|||
colorStops: [ |
|||
{ |
|||
offset: 0.1, |
|||
color: "#39B1FF", // 0% 处的颜色
|
|||
}, |
|||
{ |
|||
offset: 1, |
|||
opacity: 0.01, |
|||
color: "#39b1ff01", // 100% 处的颜色
|
|||
}, |
|||
}, |
|||
], |
|||
}, |
|||
}, |
|||
|
|||
], |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
export default options; |
|||
export default options; |
|||
|
|||
Loading…
Reference in new issue