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 前端代码

2.2 后端代码

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

    @Autowired
    private StepService stepService;

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

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

image.png