<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 = thisvar 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>
