【记录46】【案例】echarts 柱状图

echarts环境4.1.0

<template>
    <div id="threefour"></div>
</template>
<script>
import * as echarts from "echarts"
export default {
    name:"",
    components:{},
    data(){
        return {

        }
    },
    methods:{
        getdata(){
            var myCharts = echarts.init(document.getElementById('threefour'))
            var districtList = ['一年级1班', '一年级2班', '一年级3班', '一年级4班', '一年级5班', '一年级6班', '一年级7班', '一年级8班', '一年级9班']
            var lN = [43, 40, 38, 41, 40, 42, 42, 43, 39, ]   //应到人数
            var bN = [40, 40, 37, 40, 40, 40, 39, 41, 38, ]    //实到人数
            var cN = [2, 0, 1, 1, 0, 2, 1, 1, 1, ]     //请假人数
            var dN = [5, 3, 6, 4, 2, 1, 4, 4, 0,]      //迟到人数
            var tN = [1, 0, 0, 0, 0, 0, 2, 1, 0,]     //其它

            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        lineStyle: {
                            color: 'rgba(0, 255, 233,0)',
                        },
                    },
                },
                
                legend: {
                    x: '85%', //用百分比 处理块与文字位置
                    y: 'center',
                    orient: 'vertical',
                    textStyle: {
                        fontSize: 12,
                        lineHeight: 45,
                        color: '#666',
                    },
                    //selectedMode: false,    //选中哪个图例 false后图例不可点击
                    data: ['x数', 'y数']
                },
                
                xAxis: {
                    type: 'category',
                    data: districtList,
                    axisLine: {
                        lineStyle: {
                            color: '#E6E6FA'
                        }
                    },
                    axisLabel: {
                        interval:0,rotate:22,
                    }
                },
                yAxis: {
                    type: 'value',
                    // minInterval: 500,
                    axisLine: {
                        lineStyle: {
                            color: '#F0F8FF'
                        }
                    },
                },
                grid: { //用于处理图标放入过多空白问题
                    top: '3%', //距上边距

                    left: '10%', //距离左边距

                    right: '5%', //距离右边距

                    bottom: '22%', //距离下边距
                },
                dataZoom: [{ // 缩放条
                    type: 'inside',
                    start: 30,
                    end: 80
                    }, {
                    start: 30,
                    end: 80
                }],
                series: [{
                    name: '应到人数',
                    data: lN,
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FB8C8C'
                    }, {
                        offset: 1,
                        color: '#F70909'
                    }]),
                    showBackground: false,

                }, {
                    name: '实到人数',
                    data: bN,
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FAA46B'
                    }, {
                        offset: 1,
                        color: '#F87219'
                    }]),
                    showBackground: false,

                },
                {
                    name: '请假人数',
                    data: cN,
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#FBFB7C'
                    }, {
                        offset: 1,
                        color: '#F9F93A'
                    }]),
                    showBackground: false,

                },
                {
                    name: '迟到人数',
                    data: dN,
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#7792FF'
                    }, {
                        offset: 1,
                        color: '#0033FF'
                    }]),
                    showBackground: false,
                },
                {
                    name: '其它',
                    data: tN,
                    type: 'bar',
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#80F6F6'
                    }, {
                        offset: 1,
                        color: '#21EFEF'
                    }]),
                    showBackground: false,
                },
                ]
            };
            myCharts.setOption(option)
        }
    },
    mounted(){
        this.getdata()
    }
}
</script>
<style>
    #threefour { width: 100%; height: 27vh; }
</style>