前端vue集成echarts图形报表样例

文章目录

🐒个人主页

🏅Vue项目常用组件模板仓库

📖前言：

本篇博客主要介绍前端vue项目中如何去集成echarts图形报表，需要的朋友请自取

🐕1.在项目终端下载echarts依赖包

npm install echarts

🏨2.在main.js中导入echarts资源包并使用

import*as echarts from'echarts';Vue.prototype.$echarts = echarts;

🎀3.在.vue文件中直接使用echarts，下面是一个样例，

不懂的去官网：echarts官网传送门

<template><div><h1>图形统计表</h1><!-- 【🎀1.先给统计表划定多大的空间】 --><divid="chart"style="width: 600px;height: 400px;"></div></div></template><script>import echarts from'echarts';/* 【🎀2.导入echarts】 */exportdefault{data(){return{/* 【🎀3.这里是x轴，y轴的参数】 */
                xAxis:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'],
                yAxisValue:[5,20,36,10,10,20]}},
        methods:{initChart(){this.$http.get("admin/AdminCtl/getChart").then((resp)=>{if(resp.data.code==200){this.xAxis=resp.data.data.xAxis;this.yAxisValue=resp.data.data.yAxis;//初始化echartsvar chart =this.$echarts.init(document.getElementById('chart'));//定义图标数据及格式var option ={
                            title:{
                                text:'文章类型统计报表'},
                            tooltip:{
                                trigger:'axis'},
                            legend:{
                                data:['销量']},
                            xAxis:{
                                type:'category',
                                data:this.xAxis
                            },
                            yAxis:{
                                type:'value'},
                            series:[{
                                name:'销量',
                                type:'bar',
                                data:this.yAxisValue
                            }]}//设置格式
                        chart.setOption(option);}})}},mounted(){this.initChart()}}</script>