Echarts 实现折线图自定义折点样式

<script> .... export default { name: "LineChart", ... data:function () { return{ series:[] } }, mounted() { ...以下省略部分逻辑... let obj = { color:'...', type: 'line', showAllSymbol: true, data: [], showBackground: true, coordinateSystem: 'cartesian2d', backgroundStyle: { ... }, symbol:'none', symbolSize: 10, areaStyle: { .... }, itemStyle: { normal: { ... } } } //循环折线每两个拐点之间的数据 //...通过数据不同的flag设置其不同的折点样式，并将其插入echarts的sertis的数据的每一项中 ... for(let j=0;j<item.length;j++){ let node= item[j] if(node.flag==' ...此处省略...'){ let mObj = { value:node.num, symbolSize:10,//拐点大小 symbol: '',//拐点样式 flag:node.flag } obj.data.push(mObj) }else if(node.flag==='...此处省略...'){ let mObj = { value:node.num, symbolSize:10,//拐点大小 symbol: 'circle',//拐点样式 flag: node.flag } obj.data.push(mObj) }else{ let mObj = { value:node.num, symbolSize:10,//拐点大小 symbol: 'none',//拐点样式 flag: node.flag } obj.data.push(mObj) } } this.series.push(obj) }, methods: { //图表初始化 initEcharts() { const vm = this var myChart = echarts.init(this.$refs.chart) // myChart.clear() myChart.setOption({ animation: false, grid: { ... }, xAxis: { type: 'category', show: true, boundaryGap: true, maxInterval: 0.01, axisLabel: { interval: 0, textStyle: { color: 'rgb(102,102,102)', // fontSize: 28 }, formatter: function(val){ val =val+'' if(val!==''){ ... }else{ return '' } } }, axisTick:{ interval :'auto', show:false //去掉坐标轴刻线 }, axisLine: { lineStyle:{ color: 'rgb(238,238,238)' } }, data: // 此处传入x轴坐标的数据 }, yAxis: { type: 'value', axisLabel : { formatter: function(){ return ""; } }, axisTick:{ show:false //去掉坐标轴刻线 }, axisLine: { show: false //y轴线消失 }, splitLine:{ show:true, lineStyle:{ color:'rgb(238,238,238)', width:1, type:'solid' } } }, dataZoom:[ ... ], series: this.series },true) }, } } </script> <style scoped lang="less"> /* 折线图区域 */ .line_chart_area{ width: 750px; margin: auto; margin-top: 37px; height: 320px; } </style>