百度echarts圖表插件常見問題

初始化圖表方法寫在最下面，否則會由於找不到元素導致init初始化失敗，一般在頁面里定義一個div給出高度和id。在函數里將此div初始化成echarts圖標形式對象。

定義option，可以從百度echarts官網搜出需要使用的樣式，進行修改。

legend是對多行分類進行控制的屬性。data中給出的分類數據，和下面series的個數和name相同。

xAxis是對X軸進行控制的屬性。

tooltip屬性鼠標移上去顯示數據。

傳入的數據必須都是數組類型。

如實際傳入參數xAxis:

 

series1:

 

series2:

series3:

 

//初始化函數實例，Option中設置到Echarts官網根據實例查找需要的樣式拷貝后根據業務修改

        function initEcharts(xAxis, series1, series2, series3) {
            var myEchart = echarts.init(document.getElementById("moneyEchartsAnalysis"));
            var colors = ['#d14a61', '#5793f3', '#675bba'];
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '20%'
                },
                legend: {
                    data: ['支出', '收入', '凈支出']
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: xAxis
                }],
                yAxis: [{
                    type: 'value',
                    name: '金額',
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                }],
                series: [{
                    name: '支出',
                    type: 'bar',
                    data: series1
                }, {
                    name: '收入',
                    type: 'bar',
                    data: series2
                }, {
                    name: '凈支出',
                    type: 'line',
                    data: series3
                }]
            };
            myEchart.setOption(option);
        }

 

調整上下左右邊距

grid: { 
    top:'-5%',
    left: '-3%', 
    right: '3%', 
    bottom: '1%'
}

 

修改柱狀圖柱子的寬度

series: [{ 
    data: [60, 73, 80, 79, 90, 103, 95,101,108,110,116,130],
    type: 'bar',
    barWidth : 30//柱圖寬度
}]