实现如下:
<template> <div class="tradeView"> <div class="viewchart" ref="chart"></div> <div class="groupBtn"> <div class="btn gbtn"> <div class="sbtn gsbtn"><span></span></div> <span class="font">买点</span> </div> <div class="btn rbtn"> <div class="sbtn rsbtn"><span></span></div> <span class="font">卖点</span> </div> </div> </div> </template> <script> import echarts from "echarts"; export default{ 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<this.zsData.length;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); }, } } </script>