v-charts 使用markline標線

在  v-charts 第一次親密接觸 中記錄了很多v-charts的用法。

近期老板給了個需求，在圖表中列出 S、A、B、C三個績效層級的閾值。經過調研，markline可以實現。v-charts中markline的具體用法如下：

1.圖表組件，直接綁定

<VeHistogram :data="product_trend_data" :settings="product_trend_data.settings" :extend="product_trend_data.extend" :mark-line="markLine"></VeHistogram>

2.數據、樣式設置

                markLine:{
                    symbol: 'none',
                    data: [
                        {
                            yAxis: 15,
                            label:{
                                show: 'true',
                                position: 'middle',
                                formatter: 'S線',
                                color: 'green',
                                fontSize: 20
                            },
                            lineStyle:{
                                color: 'green',
                                width: 5
                            }
                        },
                        {
                            yAxis: 65,
                            label:{
                                show: 'true',
                                position: 'middle',
                                formatter: '及格線',
                                color: 'red',
                                fontSize: 20
                            },
                            lineStyle:{
                                color: 'red',
                                width: 5
                            }
                        }
                    ]
                }

3.效果圖

 

 

echats markline文檔：https://echarts.apache.org/zh/option.html#series-line.markLine