echarts绘柱状图

步骤

1.下载echarts

2.main.js里引入

import echarts from "echarts"
Vue.prototype.$echarts = echarts

绘制柱状图

<template>
    <div>
        <header>
            <div id="barLine" style="width:600px;height:300px"></div>
        </header>
    </div>
</template>

<script>
export default {
    name:"he",
    data () {
        return{
            grade:[]
        }
    },
    mounted(){
        this.barLine();
    },
    methods:{
    	barLine(){
            let myBar =   this.$echarts.init(document.getElementById("barLine"));
            myBar.setOption({
                 xAxis:{  //x轴
                    name:"单位：time",
                    data:["年初","上月末","当前"],
                    // type:"category",
                    splitLine:{  //隐藏竖线
                        show:false
                    },
                    axisLine:{  //x轴线
                        show:true,
                        lineStyle:{
                            color:"rgba(219,225,255,1)",
                            width:1,
                            type:"solid"
                        }
                    }
                    
                },
                yAxis:{  //y轴
                    name:"单位:万",
                    splitLine:{  //隐藏横线
                        show:false
                    },
                    axisLine:{  //y轴线
                        show:true,
                        lineStyle:{
                            color:"rgba(219,225,255,1)",
                            width:2,
                            type:"solid"
                        }
                    }
                },
                grid:{  //设置左右上下距离
                    right:100,
                    letft:100,
                    height:200,
                    bottom:50
                },
                backgroundColor:"gray",
                textStyle:{   //文字颜色
                    color:"rgba(255,255,250,0.6)"
                },
                tooltip:{}, //鼠标移入显示详情
                legend:{
                    data:['贷款余额','存款余额'],
                    orient:"horizontal",
                    x:"center",
                    y:"bottom",
                    padding:[10,0,10,0]
                },
                series:[
                    {
                        name:"贷款余额",
                        type:"bar",
                        barWidth:30,  //柱子宽度
                        barGap:.5,    //柱子之间间距
                        data:[100,90,85],
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    position:'top',
                                    textStyle:{
                                        color:'red',
                                        fontSize:16
                                    }
                                }
                            }
                        }
                    },
                    {
                        name:"存款余额",
                        type:"bar",
                        barWidth:30,
                        data:[45,56,85],
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    position:'top',
                                    textStyle:{
                                        color:'black',
                                        fontSize:16
                                    }
                                }
                            }
                        }
                    }

                ]
            })
        }
    }
}