百度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//柱图宽度
}]