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]
                    },
                ]
            })
        }
    }
上一篇:Centos6一键搭建L2TP VPN服务器


下一篇:CSharp设计模式读书笔记(15):命令模式(学习难度:★★★☆☆,使用频率:★★★★☆)