买点
卖点
exportdefault{
name:‘tradeView‘,
data(){return{
xDate: ["10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00"],
zsData: [
{"value":1000,"type":‘1‘},
{"value":3000,
},
{"value":2500,"type":‘1‘},
{"value":4000,"type":‘1‘},
{"value":5000,"type":‘2‘},
{"value":3000,"type":‘2‘},
{"value":2500,
},
],
options: {
legend: {
data: [‘买点‘, ‘卖点‘],
bottom:20},
title:{
text:‘成交可视图(BTC/USDT)‘,
textStyle: {
color:‘#1D2035‘,
fontSize:16},
},
xAxis: [//xAxis(直角坐标系 X 轴)、yAxis(直角坐标系 Y 轴)
{
type:"category",
boundaryGap:false,
data: [],
},
],
yAxis: [
{
position:‘right‘,
type:"value",
},
],
series: [
{
name:"成交可视图(BTC/USDT)",
type:"line",
stack:"总量",
areaStyle: {},
data: [],
smooth:true, //是否用曲线显示
symbol: ‘none‘,
lineStyle: {
color:"#FFA002", //线条颜色
},
areaStyle: {
normal: {//填充色渐变
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset:0, color: "#FFA002"},
{ offset:1, color: "#FFF"},
])
}
},
},
],
},
}
},
mounted() {this.draw();
},
methods:{
draw() {//初始化echarts实例
this.myChart = echarts.init(this.$refs.chart);this.options.xAxis[0].data = JSON.parse(JSON.stringify(this.xDate));for(var k=0;k
let obj ={};if(this.zsData[k].type == ‘1‘){//判断是买点
obj={
value:this.zsData[k].value,
symbolSize:10,//拐点大小
symbol: ‘circle‘,//拐点样式itemStyle : {
normal: {
color:"#35B65A", //拐点颜色
borderColor:‘#eee‘,
borderWidth:2},
}
},this.options.series[0].data.push(obj)
}else if(this.zsData[k].type == ‘2‘){
obj={
value:this.zsData[k].value,
symbolSize:10,//拐点大小
symbol: ‘circle‘,
itemStyle : {
normal: {
color:"#FF494A", //拐点颜色
borderColor:‘#eee‘,
borderWidth:2},
}
},this.options.series[0].data.push(obj)
}else{this.options.series[0].data.push(this.zsData[k].value)
}
}
setTimeout(()=>{this.myChart.setOption(this.options); //设置option
this.myChart.resize(); //防止越界，重绘canvas
}, 300);
},
}
}