使用echarts插件做圖表常見的幾個問題(四)—— 柱狀圖中以虛線展示重合的柱子


場景:柱狀圖實現重合並且以虛線展示

措施:代碼如下

barGap表示不同系列的柱間距離,默認為30%表示柱子寬度的 30%

option = {
    xAxis: {
        data: ['a', 'b', 'c', 'd'],
        axisTick: {show: false}
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        type: 'bar',
           itemStyle: { normal: { color: 'transparent',
                    barBorderColor: 'tomato',
                    barBorderWidth:2,
                    barBorderRadius:0,
                    borderType:"dotted" } },
        silent: true,
        barWidth: 40,
        barGap: '-100%', // 柱子重疊
        data: [60, 60, 60, 60]
    }, {
        type: 'bar',
        barWidth: 40,
        z: 10,
        data: [45, 60, 13, 25]
    }]
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM