echarts itemStyle symbol 折線圖特定點樣式調整

 

實現如下：

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