原设置参数
const getXAxis = (dataList) => {return dataList.map((item) =>window.echarts.format.formatTime('MM-dd hh:mm', item, false));};const dealTooltip = (params, name) => {let price = null;let BinanceRate = null;let OKXRate = null;let BitgetRate = null;params.forEach((item) => {if (item.seriesType === 'line') {price = item.data[1];} else if (item.seriesName === 'Binance') {BinanceRate = item.data[1];} else if (item.seriesName === 'OKX') {OKXRate = item.data[1];} else if (item.seriesName === 'Bitget') {BitgetRate = item.data[1];}});let tip = `${params[0].axisValueLabel}${name}价格$${price}Binance${toPrecision(BinanceRate * 100, 4)}%OKX${toPrecision(OKXRate * 100, 4)}%Bitget${toPrecision(BitgetRate * 100, 4)}%`;return tip;};export function getOption(diskData, name, period) {if (!diskData) {diskData = mockData;}return {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}},formatter: (params) => dealTooltip(params, name), // 处理弹框内容样式backgroundColor: 'rgba(24,25,30,1)',padding: 0,borderWidth: 0,textStyle: {color: '#fff'}},grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},// dataZoom: [// {// type: 'inside',// start: 50, // 数据窗口范围的起始百分比，表示50%// end: 100// },// {// type: 'slider',// borderColor: 'rgba(0,0,0,0)'// }// ],legend: {data: [`价格`, '空单', '多单'],inactiveColor: '#ccc',textStyle: {color: '#fff'}},xAxis: [{type: 'time',axisPointer: {snap: true,label: {show: true,formatter: function (params) {return echarts.format.formatTime('yyyy-MM-dd hh:mm',params.value);}},handle: {show: false}},axisLabel: {show: true,// formatter: '{yyyy}-{MM}-{dd} {hh}:{mm}' // 设置x轴标签formatter: () => {// 设置x轴标签if (period === '1m') {return '{hh}:{mm}';} else if (period === '5m') {return '{MM}-{dd} {hh}:{mm}';} else {return '{MM}-{dd}';}}},axisLine: {show: false}}// {// type: 'category',// data: getXAxis(diskData.categoryData), // 处理时间戳// axisPointer: {// type: 'line'// }// }],yAxis: [{type: 'value',axisLabel: {show: true,fontSize: 12,color: '#868E9B',formatter(value, index) {// y轴坐标百分比表示，最多保留4位小数return toPrecision(value * 100, 4) + '%';}},// 背景横向样式修改splitLine: {show: true,lineStyle: {color: 'rgba(109, 180, 202, 0.3)',type: 'dashed'}}},{type: 'value',axisLabel: {formatter: '${value}'},// 去掉背景横线splitLine: {show: false}}],series: [{name: `价格`,type: 'line',smooth: true,showSymbol: false, // 只有在 tooltip hover 的时候显示圆点yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return `$${value}`;}},data: diskData.valueDataPrice,itemStyle: {color: '#FFC107'}},{name: '空单',type: 'bar',barGap: '-100%', // 使柱体重叠tooltip: {valueFormatter: function (value) {return toPrecision(value * 100, 4) + '%';}},data: diskData.valueDataBN,itemStyle: {// 通过值的正负给颜色color: (params) => {return params.value[1] > 0 ? '#11C384' : '#D93D57';}}},{name: '多单',type: 'bar',barGap: '-100%', // 使柱体重叠tooltip: {valueFormatter: function (value) {return toPrecision(value * 100, 4) + '%';}},data: diskData.valueDataOK,itemStyle: {// 通过值的正负给颜色color: (params) => {return params.value[1] > 0 ? '#11C384' : '#D93D57';}}}]};}
参数
legend: {// 统一设置// data: [`价格`, '空单', '多单'],// inactiveColor: '#ccc',// textStyle: {// color: '#fff'// }// 单独设置data: [{name: '价格',//小方块icon: 'circle', // 设置小方块的图标为圆形//设置图例的小方块样式itemStyle: {color: '#FF0000'//color: '#FF0000', // 设置小方块的颜色为红色//borderColor: '#000000', // 设置小方块的边框颜色为黑色//borderWidth: 2, // 设置小方块的边框宽度为2像素//borderType: 'solid', // 设置小方块的边框类型为实线//borderRadius: 2, // 设置小方块的边框圆角半径为2像素//width: 20, // 设置小方块的宽度为20像素//height: 10 // 设置小方块的高度为10像素}},{name: '空单',icon: 'rect', // 设置小方块的图标为矩形 squareitemStyle: {color: '#00FF00'}},{name: '多单',icon: 'triangle', // 设置小方块的图标为三角形itemStyle: {color: '#0000FF'}}],inactiveColor: '#ccc',textStyle: {color: '#fff'}},