vue-cli+echarts接入接口

最新推荐文章于 2024-08-23 15:37:09 发布

星星误

最新推荐文章于 2024-08-23 15:37:09 发布

阅读量801

点赞数

分类专栏： vue的效果 echarts 接口接入文章标签： vue.js

本文链接：https://blog.csdn.net/qq_40693615/article/details/103702067

版权

本文介绍如何在Vue CLI项目中使用Echarts，并结合src/api/index.js接口获取数据，展示柱状图。通过示例代码展示数据对接过程。

摘要由CSDN通过智能技术生成

在这里插入图片描述

接口路径
src/api/index.js

export function cockpit_pitsystem() {
  return axios({method: 'get', url: 'XXXX/XXXXXXXX/XXXXXXXXX/'})
}

echarts代码部分

 <div id="myddst" style="width:397px;height: 430px;"></div>

接入接口script：

  //接口接入
  import {cockpit_pitsystem}from  "@/apis/cockpit"
  // 引入基本模板
  let echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')

data数据我需要拿到柱状图的值：

 data() {
      return {
        charts:'',
        bardata:[0,0,0],
        bardata1:[0,0,0],
    }
    },

 mounted(){
      this.drawLine();
      let _this=this;
      cockpit_pitsystem().then((res)=>{
        console.log("**用变量的形式打印出来");
        let value =res.data;
        console.log(value);
        console.log('***在通过变量切出自己先要的值***$');
        console.log(value[0].COUNT);
        console.log(value[1].COUNT);
        //我需要一个数组bardata  bardata1来存放获取数据的时候纯粹的passCOUNT值
        _this.bardata.unshift(value[0