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>