玩转ECharts制作图表之柱状图

Echarts快速上手

1. 引入echarts.js文件

<script src="js/echarts.min.js"></script>

2. 准备一个呈现图表的"盒子"

 <div id="main" style="width: 600px;height:400px;"></div>

3. 初始化echarts实例化对象

var myChart = echarts.init(document.getElementById('main'))

4. 准备配置项

var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王']
},
yAxis: {
type: 'value'
},
series: [
{
name: '成绩',
type: 'bar',
data: [70, 92, 87],
}
]
}

5. 将配置项设置给echarts实例对象

myChart.setOption(option)

运行即可制的图表如下图：

柱状图(bar)

适用场合是二维数据集（每个数据点包括两个值x和y），但只有一个维度需要比较。

对于引入echarts.js文件，创建呈现图表的div盒子以及初始化echarts实例和将配置项设置给echarts实例对象这些步骤在创建图表时都类似，所以看一下配置项中的内容。

• 图表以柱状图的形状进行显示则是在series中type的值为’bar’。
• markPoint

markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                } //最大值以及最小值的显示

• markLine

 markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                } //平均值的显示

• label

label: { //数值显示
                    show: true, //显示柱状图上每一列的数值
                    rotate: 60, //让显示的数值进行旋转
                    position: 'inside' //标签的位置
                }

• barWidth

barWidth: '30%' //柱宽度

如图：

代码：

var xDataArr = ['小明', '小李', '小飞', '小王', '小丽']
        var yDataArr = [89, 78, 97, 98, 87]
        var option = {
            //横向柱状图的话需要将xAxis和yAxis中的数据进行对换
            xAxis: {
                type: 'category', //类目轴
                data: xDataArr
            },
            yAxis: {},
            series: [{
                name: 'bar',
                type: 'bar', //图表类型
                markPoint: {
                    data: [{
                        type: 'max',
                        name: '最大值'
                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                }, //最大值以及最小值的显示
                markLine: {
                    data: [{
                        type: 'average',
                        name: '平均值'
                    }]
                }, //平均值的显示
                label: { //数值显示
                    show: true, //显示柱状图上每一列的数值
                    rotate: 60, //让显示的数值进行旋转
                    position: 'inside' //标签的位置
                },
                barWidth: '30%', //柱宽度
                data: yDataArr
            }]
        }

更多的echarts配置项学习可以在echarts官网查看 echarts官网配置项