function setBtcLineK(dataValue) {
$('.KchartBox').addClass('onloading')
dataValue.forEach(item => {
item['value'] = item.closePrice
})
let avg = dataValue.length!=0?Number(dataValue[0].closePrice):0
// 渲染
if(echartsBtcK==null){
echartsBtcK = echarts.init($('.echartsBtcK')[0], null, {
renderer: 'canvas',
useDirtyRect: false
});
}
let optionBtcK = {
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
},
formatter: function (params) {
let time = '<h3 style="margin-bottom:14px">' + formateDate(Number(params[0].data.openTime),true)+ '</h3>'
let liArr = ''
params.forEach(i => {
// console.log('111',i.marker);
liArr += `<div style="margin-bottom:5px;display:flex;width:200px;align-items:center;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#16C784;"></span>${i.seriesName} : <span style="font-weight:600;flex:1;text-align:right;">$${(i.value)}</span></div>
<div style="margin-bottom:5px;display:flex;width:200px;align-items:center;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#FFB328;"></span>成交量 : <span style="font-weight:600;flex:1;text-align:right;">${i.data.volume}</span></div>
`
})
return time + liArr
},
textStyle: {
color: '#0D1421',
fontSize: 14,
lineHeight: 15,
}
},
color: ['#16C784'],
legend: {
show: false,
itemWidth: 12,
itemHeight: 12,
data: [
{ icon: 'roundRect', name: '价格', },
]
},
grid: [
{
bottom: '30%',
show: false,
left: '3%',
right: '3%',
height: '60%',
// containLabel: true
},
{
left: '3%',
right: '3%',
top: '80%',
height: '16%',
},
],
xAxis: [
{
type: 'category',
scale: true,
data: dataValue.map(function (str) {
return changeTimeNewShow(Number(str.openTime), true);
}),
axisLabel: {
margin: 17,
interval: 'auto',
color: '#0D1421',
// fontSize:12
},
axisLine: {
lineStyle: {
color: '#cbcccf',
}
},
z:1
},
{
type: 'category',
data: dataValue.map(function (str) {
return formateDate(Number(str.openTime), true);
}),
gridIndex: 1,
axisLine: {
onZero: false,
lineStyle: {
color: '#cbcccf',
}
},
boundaryGap: false,
axisTick: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
},
],
yAxis: [
{
type: 'value',
scale: true,
position: 'left',
splitLine: {
lineStyle: {
type: "dashed"
}
},
axisLabel: {
color: '#0D1421',
inside: true,
verticalAlign :'bottom',
formatter: function (value) {
// // 使用 toLocaleString 方法格式化数字
return numFormat(Number(value));
}
},
},
{
scale: true,
gridIndex: 1,
splitNumber: 2,
axisLabel: { show: false },
axisLine: { show: false },
axisTick: { show: false },
splitLine: { show: false }
}
],
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 0,
end: 100,
preventDefaultMouseMove: false,
},
],
visualMap: [
{
pieces: [
{
gt: 0,
lte: avg,
},
{
gt: avg,
},
],
inRange: {
color:['#EA3943','#16c784'],
colorAlpha: 0.8
},
seriesIndex: 0,
show: false,
},
],
series: [
{
name: '价格',
type: 'line',
smooth: true,
showSymbol: false,
data: dataValue,
markLine: {
data: [
{yAxis: avg, lineStyle: {type: 'dashed', color: '#cbcccf'}}
],
label: {
show: false
},
symbol: ['none', 'none']
},
areaStyle: {
opacity: .4,
origin: avg,
// color: 'yellow',
}
},
{
name: '价格',
type: 'bar',
xAxisIndex: 1,
yAxisIndex: 1,
data: dataValue,
itemStyle: {
color: '#EFF1F3'
}
},
]
}
if (optionBtcK && typeof optionBtcK === 'object') {
echartsBtcK.setOption(optionBtcK, true)
}
window.addEventListener('resize', echartsBtcK.resize,true);
echartsBtcK.resize()
$('.KchartBox').removeClass('onloading')
}帮我改写为veu3写法封装成组件
最新发布