如何使用帮助文档echarts

1.首先一张图表由主要由5部分组成

tooltip(提示)，legend图例，xAxis(X轴)，yAxis(Y轴),series(图表系列)

 2.原始效果图

 

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

3.我们现在有个需求，需求是给上面的每个柱状图添加背景色

分析：1.柱状图是属于series(图表系列)这类，2.我们可以看到上述代码 type:'bar'

我们根据以上分析去查看文档https://echarts.apache.org/zh/option.html#series-line

 

 4.完成需求

效果图：

 

option = {
    title: {
        text: '',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['雾开河', '伊通河', '拉林河', '双阳河', '沐石河', '松花江']
    },
    series: [
        {
            showBackground: true, // 显示背景
            backgroundStyle:{ // 设置背景
                color: '#092747',
                borderRadius: 25, // 统一设置四个角的圆角大小
            },
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230],
            barWidth : 16,//柱图宽度
            //定制当前item的样式
            itemStyle : {
                normal: {
                    color:'#0bb8fa', //当前item的颜色
                    barBorderRadius: 50, //当前item的圆角
                },
            }
        },
    ]
};