Vue+Echarts做图表展示

1.Echarts安装

终端运行安装命令：

npm install echarts -s

在main.js做全局引用：

//引入echarts
import * as echarts from 'echarts'
//vue全局注入echarts
Vue.prototype.$echarts = echarts;

 2.页面使用Echarts画柱状图和饼图

效果：

代码展示：

        <!-- 统计信息展示 -->
        <div style="display: flex; justify-content: space-around;margin-top: 36px;">
            <!-- 工作量统计 -->
             <div class="echart-work" ref="echartWork"></div>
            <!-- 库存统计 -->
            <div class="echart-work" ref="echartRepertory"></div>
        </div>
    mounted() {
        // 挂载完成dom后进行初始化
        this.showEcarts();
    },
    methods: {

        showEcarts() {
            //工作量统计
            const echartWork = this.$refs.echartWork
            const mycartEchartWork = this.$echarts.init(echartWork)
            //库存统计
            const echartRepertory = this.$refs.echartRepertory
            const mycartEchartRepertory = this.$echarts.init(echartRepertory)
            //绘制工作量统计图表
                  const optionEchartWork = {
                        title : {
                            text: '工作量统计',
                            subtext: '总计',
                            left: '2%',
                            top: '2%',
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        grid: [
                                    {
                                        top: 60,
                                        width: '90%',
                                        bottom: '10%',
                                        left: 10,
                                        containLabel: true
                                    },
                                ],
                        xAxis : [
                            {
                                type : 'value',
                                boundaryGap : [0, 0.01]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'category',
                                data : ['管理员','若依','Njcdv','曹日新','了不起的菜包','测试']
                            }
                        ],
                        series : [
                            {
                                name:'工作量',
                                type:'bar',
                                itemStyle: {
                                    color: 'rgb(30,144,255)'
                                },
                                data:[85, 0, 0, 143, 0, 20]
                            },
                        ]
                    };
                    //绘制库存统计图表
                    const optionEchartRepertory = {
                        title : {
                            text: '库存统计',
                            subtext: '总计114',
                            x:'center',
                            top: '2%',
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            data:['打点下载','素材','专题','其他','文档','音频']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true, 
                                    type: ['pie', 'funnel',],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                // restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        // calculable : true,
                        series : [
                            {
                                name:'库存统计',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                itemStyle: {
                                            normal: {
                                                color: function (colors) {
                                                    var colorList = ['#fc8251', '#5470c6', '#91cd77', '#ef6567', '#f9c956', '#75bedc'];
                                                    return colorList[colors.dataIndex];
                                                    }
                                                }
                                            },
                                data:[
                                    {value:335, name:'打点下载'},
                                    {value:310, name:'素材'},
                                    {value:234, name:'专题'},
                                    {value:1548, name:'其他'},
                                    {value:135, name:'文档'},
                                    {value:548, name:'音频'},
                                
                                ]
                            }
                        ]
                    };
                    // 渲染图表
                    mycartEchartWork.setOption(optionEchartWork)
                    mycartEchartRepertory.setOption(optionEchartRepertory)
    }