文章目录

  • 个人主页
  • Vue项目常用组件模板仓库
    • 前言：
    • 1.在项目终端下载echarts依赖包
    • 2.在main.js中导入echarts资源包并使用
    • 3.在.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><div id="chart" style="width: 600px;height: 400px;"></div></div></template><script>import echarts from 'echarts';/* 【2.导入echarts】 */export default {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>