在echarts柱狀圖兩側中新增亮燈圓點圖示

• 需求背景 本需求是專案實際開發需求，亮燈圓點作為預警風險情況，分佈在柱狀圖的兩側，

  如下圖所示：

• 從無到有的開發思路 （1）首先，本主之前未做過類似的開發需求，但是既然客戶提出這樣的需求，我們就儘量滿足。我在echarts官方案例中，找到一個具有相似特點的例子，不知道大家看過之後會對我的需求有什麼聯絡，

  如下圖所示：

（3）修改markPoint的配置，達到我專案上所需要的圓點

如下圖所示：

• 實際專案圓點圖示，直接上程式碼與效果圖 （1）實際專案中是甘特圖 （2）上述案例是縱向柱狀圖，實際專案是橫向柱狀圖組成的甘特圖 （3）實際專案圓點圖示分佈在y軸左右兩側 （4）實際效果圖（因為要適配各個解析度，所以與UI效果圖有點不同）： （5）圓點圖示程式碼格式：
  • 左邊圓點圖示：this.echartsData.leftMarkPointData
  • 右邊圓點圖示：this.echartsData.leftMarkPointData （6）echarts的option程式碼：

實際效果圖：

左右邊圓點圖示格式：

"leftMarkPointData": [
    {
        "yAxis": 0,
        "xAxis": -12,
        "symbolSize": 18,
        "symbol": "circle",
        "itemStyle": {
            "normal": {
                "color": "#87b754"
            }
        },
        "label"
 
: {
            "normal": {
                "formatter": ""
            }
        }
    },
],
"rightMarkPointData": [
    {
        "yAxis": 0,
        "xAxis": 131,
        "symbolSize": 18,
        "symbol": "circle",
        "itemStyle": {
            "normal": {
                "color": "#87b754"
 

            }
        },
        "label": {
            "normal": {
                "formatter": ""
            }
        }
    },
]

echarts的option程式碼：

let ganttEchartDom = document.getElementById('ganttEchart');
if (ganttEchartDom) {
this.echartsOption = echarts.init(ganttEchartDom); /* eslint-disable-line */
let option = {
    backgroundColor: '#fff',
    color: ['#3ba2f1', '#87b754'],
    title: {
        textStyle: {
            fontWeight: 'bold',
            fontSize: 18,
            color: '#787676'
        },
        top: '17%',
        right: 0,
        text: this.echartsData.titleText,
        subtext: ''
    },
    tooltip: {
        show: false,
        confine: true,
        trigger: 'axis',
        formatter: '計劃開始時間 : {c0}<br/>計劃結束時間 : {c1}<br/>完成開始時間 : {c2}<br/>完成結束時間 : {c3}'
    },
    legend: {
        type: 'scroll',
        orient: 'vertical',
        left: '8%',
        top: '5%',
        bottom: 20,
        textStyle: {
            borderRadius: 0,
        },
        itemWidth: 13,
        itemHeight: 13,
        itemGap: 12,
        data: this.echartsData.legendData,
    },
    grid: {
        top: '26%',
        left: '0',
        right: '10',
        bottom: '0',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        show: false,
        min: -15,
        max: 134
    },
    yAxis: {
        type: 'category',
        boundaryGap: true,
        axisLine: {
            lineStyle: {
                color: '#dadde4'
            },
        },
        axisTick: false,
        axisLabel: {
            color: '#000'
        },
        data: this.echartsData.yData,
    },
    dataZoom: [
        {
            type: 'inside',
            show: false,
            zoomLock: true,
            yAxisIndex: [0],
            right: 0,
            start: this.dataZoomStart,
            end: this.dataZoomEnd,
        },
    ],
    series: [
        {
            name: this.echartsData.legendData[0],
            type: 'bar',
            barGap: '-100%', // 計劃和進度重疊
            stack: '計劃',  // 佔位條和著色條合併
            itemStyle: {
                normal: {
                    opacity: 0 // 不繪製，僅作為佔位條
                },
                emphasis: {
                    opacity: 0
                }
            },
            barWidth: '40%',
            barMaxWidth: '30',
            label: {
                normal: {
                    show: true,
                    color: '#000',
                    position: 'right',
                    distance: 12,
                    formatter: '{c}%'
                }
            },
            data: this.echartsData.seriesData.planStartData,
            markPoint: {
                data: this.echartsData.rightMarkPointData,
            },
        },
        {
            name: '計劃時間',
            type: 'bar',
            stack: '計劃時間',
            itemStyle: {
                normal: {
                    color: '#87b754'
                }
            },
            barWidth: '40%',
            barMaxWidth: '30',
            label: {
                normal: {
                    color: '#000',
                    position: 'right',
                    distance: 12,
                    show: true,
                    formatter: '{c}%'
                }
            },
            data: this.echartsData.seriesData.planEndData,
            markPoint: {
                data: this.echartsData.rightMarkPointData,
            },
        },
        {
            name: this.echartsData.legendData[1],
            type: 'bar',
            stack: '完成',
            itemStyle: {
                normal: {
                    opacity: 0
                },
                emphasis: {
                    opacity: 0
                }
            },
            barWidth: '40%',
            barMaxWidth: '30',
            label: {
                normal: {
                    show: true,
                    formatter: '{c}%'
                }
            },
            data: this.echartsData.seriesData.startData,
            markPoint: {
                data: this.echartsData.leftMarkPointData,
            },
        },
        {
            name: '完成',
            type: 'bar',
            stack: '完成',
            itemStyle: {
                normal: {
                    color: '#3ba2f1'
                }
            },
            barWidth: '40%',
            barMaxWidth: '30',
            label: {
                normal: {
                    show: true,
                    formatter: '{c}%'
                }
            },
            data: this.echartsData.seriesData.endData,
            markPoint: {
                data: this.echartsData.leftMarkPointData,
            },
        },
    ]
};
this.echartsOption.clear();
this.echartsOption.setOption(option);

• - - - - - - 後語 - - - - - - 歡迎大家評論，相互學習， 不足之處，請指教哈！