1、引入echarts.js檔案

<!-- 引入echarts 圖形化展示 -->
<script type="text/javascript" src="${ctxStatic}/common/yuzhong/js/echarts/echarts.js"></script>

2、HTML程式碼

<div class="t2_box_con" style="padding:0px 10px 0px;">
    <!-- 此處載入影象 -->
    <div id="xzbjl" style="width: 100%; height: 242px;"></div>
</div>
 

3、配置資料和載入影象

<script type="text/javascript">
    var XData = "['週一', '週二', '週三', '週四', '週五']";
    var YData1 = "[10, 25, 21, 25, 36]";
    var YData2 = "[40, 28, 45, 36, 12]";
    var YData3 = "[15, 56, 34, 21, 8]";
    var xzbjl = echarts.init(document.getElementById("xzbjl"));
    option = {
        /* 柱狀圖顏色 */
        color:['#06a45f', '#078ed6', '#e3982f'],
        /* 四周邊距(單位預設px，可以使用百分比) */
        grid:{
            left:40,
            top:30,
            right:50,
            bottom:30
        },
        /* 滑鼠懸浮顯示資料 */
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'shadow'        // 預設為直線，可選為：'line' | 'shadow'
             }
        },
        /* 圖例說明 */
        legend: {
            // 圖例排項 vertical-"豎向"; horizontal-"橫向"
            orient: 'horizontal',
            // 圖例元件離容器左側的距離
            right : 40,
            top: 0,
            // 圖例文字的樣式
            textStyle:{
                color:'#6ab2ec',
            },
            // 與series中每個name對應 
            data:['資料一','資料二', '資料三']
        },
        toolbox: {
            show : true
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                //設定軸線的屬性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 },
                data : xData,
            }
        ],
        yAxis : [
            {
                type : 'value',
                 // 控制網格線是否顯示
                 splitLine: {
                    show: true, 
                    //  改變軸線顏色
                    lineStyle: {
                        // 使用深淺的間隔色
                        color: ['#132a6e']
                     }                            
                 },
                  //設定軸線的屬性
                 axisLine:{
                     lineStyle:{
                         color:'#6ab2ec',
                     }
                 } 
            }
        ],
        series : [
            {
                name:'資料一',
                type:'bar',
                /* 柱子的顯示寬度 */
                barWidth: '20%',
                data: yData1,
                /* 顯示平均線 */
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                },
                /* 顯示柱子資料 */
                label: {
                    normal: {
                        show: true,
                        // 資料在柱子頭部顯示
                        position: 'top',
                        textStyle: {
                          color: '#5475c7',
                          fontSize:16,
                        }
                    }
                },
            },
            {
                name:'資料二',
                type:'bar',
                barWidth: '20%',
                data: yData2,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                },
            },
            {
                name:'資料三',
                type:'bar',
                barWidth: '20%',
                data: yData3,
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };

    xzbjl.setOption(option);

 

4、效果圖

6、線上除錯（ECharts官網）