echarts 多个折线样式_echarts itemStyle symbol 折线图特定点样式调整

买点

卖点

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);

},

}

}