fpi-componentAppearance
样例
上下联动控制折线，柱形图
const option = {
dataZoom: [
{
backgroundColor: '#021e2d',
borderColor: '#021e2d',
dataBackground: {
areaStyle: {
opacity: 0,
},
lineStyle: {
color: '#03d5fb',
},
},
end: 100,
fillerColor: 'rgba(255, 255, 255, 0.1)',
height: 24,
moveHandleStyle: { opacity: 0 },
realtime: true,
selectedDataBackground: {
areaStyle: { opacity: 0 },
lineStyle: { color: '#03d5fb' },
},
show: true,
start: 70,
textStyle: {
color: 'rgba(255,255,255,0.5)',
fontFamily: 'Bebas Neue',
},
top: '92%',
type: 'slider',
xAxisIndex: [0, 1], // 同时控制两个图表
},
],
tooltip: {
link: { xAxisIndex: 'all' },
trigger: 'axis',
},
grid: [
{ top: 50, left: 60, right: 32, height: 140 },
{ left: 60, right: 32, top: '56%', height: 140 },
],
xAxis: [
{
axisLabel: { show: false },
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.2)',
},
},
axisTick: { show: false },
data: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09', '2015-10', '2015-11', '2015-12', '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06', '2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017-01', '2017-02', '2017-03', '2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12', '2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10', '2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01'],
gridIndex: 0,
type: 'category',
},
{
axisLabel: {
color: 'rgba(255,255,255,0.6)',
fontFamily: 'Bebas Neue',
fontSize: 12
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.2)'
}
},
axisTick: { show: false },
data: [
'2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06', '2015-07', '2015-08', '2015-09',
'2015-10', '2015-11', '2015-12', '2016-01', '2016-02', '2016-03', '2016-04', '2016-05', '2016-06',
'2016-07', '2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017-01', '2017-02', '2017-03',
'2017-04', '2017-05', '2017-06', '2017-07', '2017-08', '2017-09', '2017-10', '2017-11', '2017-12',
'2018-01', '2018-02', '2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09',
'2018-10', '2018-11', '2018-12', '2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06',
'2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03',
'2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12',
'2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01'],
gridIndex: 1,
type: 'category',
},
],
yAxis: [
{
axisLabel: {
color: 'rgba(255,255,255,0.6)',
fontFamily: 'Bebas Neue',
fontSize: 12
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.5)'
}
},
axisTick: { show: false },
gridIndex: 0,
splitArea: { show: true, areaStyle: { color: ['rgba(3, 139, 143, 0.1)', 'rgba(0, 0, 0, 0)'] } },
splitLine: { show: false },
type: 'value',
},
{
axisLabel: { color: 'rgba(255,255,255,0.6)', fontFamily: 'Bebas Neue', fontSize: 12 },
axisLine: { show: false, lineStyle: { color: 'rgba(255,255,255,0.5)' } },
axisTick: { show: false },
gridIndex: 1,
splitLine: { show: false },
type: 'value',
}
],
series: [
{
data: [182.43, 331.93, 280.81, 306.58, 175.65, 255.62, 296.47, 200.29, 328.7, 362.27, 262.62, 207.44, 293.15, 228.11, 255.78, 201.57, 343.41, 501.33, 498.48, 245.99, 286.61, 376.92, 326.08, 247.09, 482.85, 423.43, 505.87, 266.3, 403.53, 309.25, 424.08, 261.61, 272.59, 371.21, 398.12, 396.44, 247.97, 422.56, 386.74, 301.53, 619.63, 327.24, 437.38, 396.34, 437.26, 509.46, 480.18, 364.14, 295.89, 454.31, 446.57, 430.51, 409.9, 307.79, 637.78, 550.48, 525.59, 741.72, 743.59, 1373.45, 705.16, 564.36, 313.02, 520.78, 321.25, 414.22, 968.89, 988.12, 591.68, 924.52, 298.81, 975.16, 442.93, 378.51, 450.52, 439.35, 466.52, 431.31, 568.86, 495.26, 453.81, 320.52, 373.43, 294.15, 488.52],
itemStyle: {
normal: {
borderColor: '#03d5fb',
color: '#fff',
lineStyle: { color: '#03d5fb' },
},
},
name: '交易指数',
symbol: 'circle',
symbolSize: 6,
type: 'line',
xAxisIndex: 0,
yAxisIndex: 0,
},
{
color: '#03d5fb',
data: [917.69, 1432.33, 368.8, 847.28, 914.93, 1401.59, 890.24, 730.58, 1410.65, 2455.78, 624.47, 4255.95, 380.35, 505.21, 707.07, 1187.47, 704.68, 982.8, 879.25, 928.67, 527.28, 745.01, 626.85, 1057.78, 712.86, 454.54, 870.92, 697.28, 827.7, 2878.98, 722.32, 1901.37, 2012.69, 1281.26, 1551.8, 864.89, 2508.12, 399.67, 558.1, 1413.86, 1213.51, 3185.93, 798.56, 1528.6, 1181.06, 613.97, 2359.39, 2108.55, 1390.34, 244.09, 819.07, 900.86, 727.02, 8795.05, 797.41, 730.47, 1274.81, 299.2, 972.85, 3068.04, 1726.9, 217.88, 1460.76, 1020.14, 966.39, 881.36, 1062.06, 963.89, 644.61, 535.22, 945.37, 1764.53, 926.24, 689.99, 1518.73, 1044.09, 1239.62, 2594.6, 1376.45, 2825.65, 4709.81, 1065.98, 559.45, 1189.44, 1459.03],
name: '成交量',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
},
],
}
显示代码
Boxplot和折线混合图
const option = {
tooltip: {
trigger: 'axis',
formatter: (param: any) => {
return [`${param[0].axisValueLabel}-${param[0].seriesName}:`, `平均值: ${param[0].value[3]
? param[0].value[3]
: '--'}`, `最大值: ${
param[0].value[5]
? param[0].value[5]
: '--'}`, `最小值: ${param[0].value[1]
? param[0].value[1]
: '--'}`].join('<br/>')
}
},
title: {
text: '站点趋势变化图',
left: 'center',
textStyle: {
fontFamily: 'PingFangSC',
fontSize: '14',
color: '#303133',
fontWeight: 'normal'
}
},
grid: {
left: 15,
right: '0',
top: 60,
bottom: 45,
containLabel: true
},
xAxis: {
type: 'category',
splitArea: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(220, 223, 230, 1)'
}
},
axisLabel: {
fontFamily: 'PingFangSC',
fontSize: '12',
color: (val: string) => {
if (val === '浦沿东冠站') return 'rgba(64, 158, 255, 1)'
return '#303133'
},
fontWeight: 'normal',
interval: 0
},
data: ['上塘河（保障桥）', '和睦港',
'六塘文洋桥', '浦沿东冠站', '上城藻类应急', '拱墅藻类应急',
'西湖藻类应急', '余杭藻类应急']
},
yAxis: {
min: 0,
type: 'value',
name: 'mg/L',
nameTextStyle: {
color: 'rgba(96, 98, 102, 1)'
},
splitArea: {
show: true,
color: ['rgba(242, 246, 252, 1)', 'transparent']
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(220, 223, 230, 1)'
}
},
axisLabel: {
fontFamily: 'Oswald',
fontSize: '12',
color: '#303133',
fontWeight: 'normal'
}
},
series: [
{
name: '水质类别',
type: 'boxplot',
data: [
[3, 4, 4, 4, 5, 4, 2, '氨氮(NH3-N)、总磷(以 P 计）'],
[null, null, null, null, null, null, 3, '', []],
[2, 4, 4, 4, 5, 4, 3, '氨氮(NH3-N)'],
[null, null, null, null, null, null, 2, '', []],
[3, 3, 3, 3, 5, 3, 3, ''],
[null, null, null, null, null, null, 3, '', []],
[3, 3, 3, 3, 5, 3, 3, ''],
[null, null, null, null, null, null, 3, '', []],
[3, 3, 3, 3, 5, 3, 3, ''],
[3, 5, 5, 5, 5, 5, 3, '总磷(以 P 计）、氨氮(NH3-N)'],
[3, 4, 4, 4, 5, 4, 3, '氨氮(NH3-N)'],
[4, 5, 5, 5, 5, 5, 2, '总磷(以 P 计）、氨氮(NH3-N)、溶解氧'],
[null, null, null, null, null, null, 3, '', []],
[null, null, null, null, null, null, 3, '', []],
[3, 3, 3, 3, 5, 3, 3, ''],
[3, 4, 4, 4, 5, 4, 3, '氨氮(NH3-N)'],
[null, null, null, null, null, null, 3, '', []],
[null, null, null, null, null, null, 3, '', []],
[null, null, null, null, null, null, 3, '', []],
[null, null, null, null, null, null, 3, '', []],
],
itemStyle: {
color: 'rgba(255, 153, 2, 1)',
borderColor: 'rgba(255, 153, 2, 1)'
}
},
{
name: '水质类别',
type: 'line',
lineStyle: {
color: 'rgba(64, 158, 255, 1)'
},
data: [4, null, 4, 3, 3, 3, 5, 4, 5, null, null, 3, 4, null, null, null, null, null, null],
smooth: true,
tooltip: {
show: false
},
connectNulls: true // 无数的点连接在一起
}
]
}
显示代码