柱状图多维条形图vue_Vue组件（1）使用Echarts绘制图表-柱状图/折线图

前言

​ 最近工作中需要做一个自动配置报表的功能，需求目的是可以通过配置来适应产品对于报表需求的变更，不用重复更改代码。

配置实现流程如下：配置报表所需的数据源

选择筛选报表数据的参数

生成报表页面

生成展示页面(生成的报表通过选择放入展示页面)

项目是通过前后端分离实现的，前端框架是Vue,配合Echart绘制相关图表，因为我也是第一次尝试写前端组件，所以这里写下文章记录下。

特别提示：这里的组件不是通过webpack打包生成的插件，而是放在src/components文件夹下的组件

生成vue项目

这里通过vue-cli工具初始化一个项目，开始这里，默认你都已经安装好vue相关环境以及工具，如果没有，请自行百度vue环境搭建教程

初始化项目

新建一个存放新项目的文件夹，例如我这里在d盘下建了一个名为VueAndEcharts的文件夹

在上图中的地址框中直接输入cmd，则在当前路径下打开cmd.exe

在上图中输入初始化项目的命令：vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)，具体操作如下图：

上面依次的步骤会让你输入:项目名称：我这里输入echartsdemo

项目描述：this is a vue/echart demo

项目作者：martin

安装vue-route：选yes即可

安装eslint到你的代码，这个是检查代码格式的，选yes即可

后面的几个我暂时没管他，都选了no,不停回车，项目就创建成功了

生成成功后项目结构如下：

切换到项目根目录下，我这里是cd vueEchartsForReport 然后在在命令提示符中输入：npm i 此步骤安装vue项目需要的相关依赖包，(这一步也可以省略，直接输入npm run dev，也会安装相关依赖包)这部分依赖包在项目根目录下的package.json中可以看到，

再输入：npm run dev，就可以启动项目了，

上图代表已经启动项目成功，在浏览器输入http://localhost:8080就可以看到项目helloworld页面了

组件开发

在项目src/components文件夹下新建一个vue文件，

因为是一个demo,所以我这里命名为bardemo.vue，

1.模板文件代码

以上代码是为绘制图表准备一个具备高宽的 DOM 容器，具体明细可参考echarts官方文档，传送门：echarts官方文档

2.安装echarts插件

在项目根目录下，输入命令：npm install echarts --save，安装成功后，在bardemo.vue文件中引入

let echarts = require('echarts')

import _ from 'lodash'

我这里因为要使用lodash工具库的方法，所以这里也安装了lodash工具库，输入命令： npm install lodash --save即可安装，导入loadsh如上图：import _ from 'lodash'

export default {

name: 'bar-report',

props: {

data: {

required: true, // 若是横轴，则此部分为x轴"数值"数据，若为纵轴，则此部分为y轴"数值"数据,此部分数据必传 type: Object

},

title: {

type: Object | String // 标题，可以只传入标题，其他属性使用默认值，也可自定义title属性，默认无标题 },

theme: {

type: String // dom参数属性，传入theme字符串，theme暂时支持dark和light两种，默认light },

width: String, // dom的宽度，默认600 height: String, // dom的高度，默认400 barType: {

type: String // 柱状图类型/值为xAxis则显示横轴柱状图，值为yAxis则为纵轴柱状图，默认是yAxis },

category: {

required: true, // 图表分类，如是纵轴，则是x轴的值 type: Object

},

legend: {

required: true, // 必传，图表上方标识每个颜色柱/线代表什么意思 type: Array

},

dataView: {

type: Boolean // 是否显示数据视图功能，默认不开启 },

magicType: {

type: Array | String // 是否显示图表之间切换显示功能，默认不开启 },

restore: {

type: Boolean // 是否显示图表还原功能，默认不开启 },

saveAsImage: {

type: Boolean // 是否显示图表图表保存为图片功能，默认不开启 },

stack: {

type: String // 柱状图是