v-charts使用图表

v-charts 官网地址 https://v-charts.js.org/#/start

1 开始使用

(1) npm 安装 v-charts 图表

npm i v-charts echarts -S

(2) 全部引入 v-charts 图表

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

new Vue({
  el: '#app',
  render: h => h(App)
})

(3) 安装使用 axios

npm install axios

2 创建图表

2.1 前端代码

<template>
  <div>
    <button @click="getData">get Data</button>
    <ve-line
      :data="chartData"
      :loading="loading"
      :data-empty="dataEmpty"
      :settings="chartSettings">
    </ve-line>
  </div>
</template>
<script>
import axios from 'axios';
  const DATA_FROM_BACKEND = {
    columns: ["belongTime", "stepNum"],
    rows: [
        {'belongTime':'2018-09-24','stepNum':'100'},
        {'belongTime':'2018-09-25','stepNum':'134'}
    ]
  }
  const EMPTY_DATA = {
    columns: [],
    rows: [
    ]
  }
  export default {
    data () {
      this.chartSettings = {
        yAxisType: ['0,0a']
      }
      return {
        chartData: {
          columns: [],
          rows: []
        },
        loading: false,
        dataEmpty: false
      }
    },
    methods: {
      getData () {
        var data;
        axios.get('http://127.0.0.1:8080/step/get',{
                params:{
                    deviceCode:1010100101
                }
            })
            .then(response =>{
                data = response.data;
                this.chartData = data;
            })
            .catch(function(err){
                console.log(err);
            });
      }
    },
    created () {
      this.getData()
    }
  }
</script>

2.2 后端代码

@RestController
@RequestMapping("/step")
@Slf4j
public class StepController {

    @Autowired
    private StepService stepService;

    @RequestMapping("/get")
    public Map<String,Object> getStepByDeviceId(QueryStepRequest req){
        HashMap<String, Object> map = new HashMap<>();
        log.info(JSON.toJSONString(req));
        QueryStepRequest request = new QueryStepRequest();
        request.setDeviceCode(req.getDeviceCode());
        FireTsingResponse<List<ChickenStep>>  response= stepService.queryByDeviceCode(request);
        log.info(JSON.toJSONString(response));
        ArrayList<String> cols = new ArrayList<>();
        cols.add("belongTime");
        cols.add("stepNum");
        map.put("columns",cols);
        List<ChickenStep> result = response.getResult();
        Collections.reverse(result);
        map.put("rows",result);
        return map;
    }
}

StepService 用于查出符合条件的数据集合
2.3 特别注意
如果不使用 lambda 的方式,会提示 this.chartData 这个方法没有定义,导致图表无法显示

image.png