echarts 柱子背景圖象形柱圖PictorialBar實現

需求：

                     

 

 

 如圖所示。不同顏色代表不同水位數據。當前水位達到多少紅色框覆蓋到哪里。

邏輯就是利用echarts的PictorialBar，在每一個柱狀圖內添加圖片作為背景，然后設置柱狀圖柱子顏色和透明度。

這個比官網教程詳細例子更多：https://www.w3cschool.cn/echarts_tutorial/echarts_tutorial-nmzo2hin.html

這是我做這個功能時參考例子：

https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/pictorialBar-symbolSize

最后貼上我自己的代碼

const rocket = '/testimg/yanse.png'//這個就是背景圖片地址。
option={

color:["rgba(0,0,0,0)"],

    title:{
        show:true,//顯示策略，默認值true,可選為：true（顯示） | false（隱藏）
        text: '風暴潮',//主標題文本，'\n'指定換行
        x:'center',//水平安放位置，默認為'left'，可選為：'center' | 'left' | 'right' | {number}（x坐標，單位px）
        y:'top',

        textStyle: {//主標題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color:'#ffffff',
            fontSize: 12,
            fontStyle: 'normal',
            fontWeight: 'normal',
        }},
grid:{ right:0,left:0,bottom:0,top:'30%'},
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
                type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
            },
            formatter: '{b1}: {c1}'

        },


        yAxis: {
            type: 'value',
            show:false
        },
        xAxis: {
            type: 'category',
            show:false,
            data: ['實時','預報'],
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#ffffff',  //更改坐標軸文字顏色
                    fontSize : 10     //更改坐標軸文字大小
                }
            },
            axisLine:{
                lineStyle:{
                    color:'#ffffff' //更改坐標軸顏色
                }
            },
        },
        series: [
            {
                type: 'pictorialBar',//在象形柱圖中 type 屬性值為 'pictorialBar'。
                name: '',
                symbol:'image://'+rocket,//寫在data外默認所有柱狀圖背景圖片。若想單獨設置某個在data數組內單個設置symbol

//圖片地址圖片支持svg等不同格式寫法稍有不同。本例是項目中png格式圖片地址。

//有條件最好使用svg圖。免得圖片不清楚
                z: 1,//有點類似css中的z-index圖片層堆疊順序越大圖片越在外層我設置為1做為背景圖在下面
            data:[
                {
                value: 5,
                symbolSize: [
                    '80%', //  圖片在柱子內寬度.
                    '100%' //圖片在柱子內高度.

                ]
               },
                {
                    value: 5,
                    symbolSize: [
                        '80%', // 50% of the width of reference bar.
                        '100%' // 100% of the height of reference bar.
                    ]
                }

            ]
            },

            {
                type: 'bar',
                name: 'reference bar',
                barGap: '-100%',
                color:'rgba(255,192,0,0.8)',
                data: [2.83,2.56]
            }





        ]

}
代碼效果圖：

 

 

z:10效果：背景圖在柱狀圖上

 

 

 

 

由此可以發散思維：在做立體柱狀圖效果的時候可以找一個立體柱當做背景將寬高都設置為完成100%即可。

立體柱狀圖鏈接：https://www.cnblogs.com/cbb-web/p/12574243.html