vue 引入 echarts 图表 并且展示柱状图

npm i echarts -S 下载 echarts 图表

mian.js 文件 引入图表并且全局挂载

//echarts 图表

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

 

在用到的vue文件里

<div class="bottom" id="bottom" style="width:90%;height: 400px;margin-top:50px;"></div>

 

注意： ID 是必须的，下面的方法必须获取到这个ID

 

JS： 复制粘贴即可用，基本上的备注都用，需要可自取

mounted(){

        // 在通过mounted调用即可

        this.echartsInit()

    },

methods:{

        //初始化echarts

        echartsInit() {

            //柱形图

            //因为初始化echarts 的时候，需要指定的容器 id='main'

            this.$echarts.init(document.getElementById('bottom')).setOption({

                tooltip: {

                    trigger: 'axis',

                    axisPointer: {

                        type: 'shadow'

                    }

                },

                //顶部数据解析

                legend: {

                    data: ['未完成', '已完成', '完成率（%）']

                },

                //配置切换数据

                // toolbox: {

                //     show: true,

                //     orient: 'vertical',

                //     left: 'right',

                //     top: 'center',

                //     feature: {

                //         mark: {show: true},

                //         dataView: {show: true, readOnly: false},

                //         magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},

                //         restore: {show: true},

                //         saveAsImage: {show: true}

                //     }

                // },

                //配置颜色数据

                color: ['rgba(246, 144, 165, 1)','rgba(148, 114, 242, 1)', 'rgba(14, 187, 194, 1)'],

                //配置 x轴的数据

                xAxis: [

                    {

                        type: 'category',

                        axisTick: {show: false},

                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

                    }

                ],

                //配置 y轴的数据

                yAxis: [

                    {

                        type: 'value',

                        axisLabel: {

                            show: true,

                            interval: 'auto',

                            formatter: '{value} %'//纵坐标百分比

                        }

                    }

                ],

                //数据展示

                series: [

                    {

                        name: '未完成',

                        type: 'bar',

                        barGap: 0,

                        // label: labelOption,

                        emphasis: {

                            focus: 'series'

                        },

                        data: [10, 20, 30, 40, 50]

                    },

                    {

                        name: '已完成',

                        type: 'bar',

                        // label: labelOption,

                        emphasis: {

                            focus: 'series'

                        },

                        data: [12, 52, 46, 78, 99]

                    },

                    {

                        name: '完成率（%）',

                        type: 'bar',

                        // label: labelOption,

                        emphasis: {

                            focus: 'series'

                        },

                        data: [100, 22, 33, 45, 66]

                    },

                ]

            })

        }

    }