前后端分离（VUE+SPRINGBOOT）十八 echarts报表开发

昨天刚好有个人问报表开发问题，

今天就把这个补齐，

所以说VUE好用，基本上用的多的组件都能找到，

图形报表这个也一样，话不多说，

源码地址：https://github.com/ecomfe/vue-echarts

1，安装  npm install vue-echarts -S

2，引入 main.jsp  

import VCharts from 'v-charts'

Vue.use(VCharts)

3，页面使用代码

柱状图

<ve-histogram :data="chartData" :settings="chartSettings"></ve-histogram>

data () {
  this.chartSettings = {
    axisSite: { right: ['下单率'] },
    yAxisType: ['KMB', 'percent'],
    yAxisName: ['数值', '比率']
  }
  return {
    chartData: {
      columns: ['日期', '访问用户', '下单用户', '下单率'],
      rows: [
        { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      ]
    }
  }
}

饼状图

<ve-pie :data="chartData" :events="chartEvents"></ve-pie>

data () {
  var self = this
  this.chartEvents = {
    click: function (e) {
      self.name = e.name
      alert(e.name);
      console.log(e)
    }
  }

    return {
    chartData: {
      columns: ['日期', '访问用户'],
      rows: [
        { '日期': '1/1', '访问用户': 1393 },
        { '日期': '1/2', '访问用户': 3530 },
        { '日期': '1/3', '访问用户': 2923 },
        { '日期': '1/4', '访问用户': 1723 },
        { '日期': '1/5', '访问用户': 3792 },
        { '日期': '1/6', '访问用户': 4593 }
      ]

    }
  }
}

K线图

<ve-line :data="chartData"></ve-line>

data () {
  return {
    chartData: {
      columns: ['日期', '销售量'],
      rows: [
        { '日期': '1月1日', '销售量': 123 },
        { '日期': '1月2日', '销售量': 1223 },
        { '日期': '1月3日', '销售量': 2123 },
        { '日期': '1月4日', '销售量': 4123 },
        { '日期': '1月5日', '销售量': 3123 },
        { '日期': '1月6日', '销售量': 7123 }
      ]
    }
  }
}

很简单，是不是