首页 > Web开发 > 详细

vue 获取json数据

时间:2019-12-15 14:43:26      阅读:421      评论:0      收藏:0      [点我收藏+]

 1. 创建json文件,路径为 ..\public\data.json

{

    "categories": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],

    "data": [5, 20, 36, 10, 10, 20]

}
 2. webpack.dev.conf.js 中增加如下代码

const express = require(‘express‘)

const app = express()

var appData = require(‘../src/public/data.json‘)

var apiRoutes = express.Router()

app.use(‘/api‘, apiRoutes)

devServer下增加如下代码

    before(app) {

      app.get(‘/api/data‘, (req, res) => {

        res.json({

          errno: 0,

          data: appData

        })

      })

    }
可以通过http://localhost:8080/api/data 获取数据
技术分享图片

 

 


然后在index.vue中增加代码如下:

<template>

  <div>

    <div id=‘mainpie‘ style=‘width: 600px;height:400px;‘></div>

  </div>

</template>

<script>

export default {

  name: ‘index‘,

  data() {

    return {};

  },

  methods: {

    drawpie() {

      var myChart = this.$echarts.init(document.getElementById(‘mainpie‘));

      myChart.setOption({

        title: {

          text: ‘异步数据加载示例‘

        },

        tooltip: {},

        legend: {

          data: [‘销量‘]

        },

        xAxis: {

          data: []

        },

        yAxis: {},

        series: [

          {

            name: ‘销量‘,

            type: ‘bar‘,

            data: []

          }

        ]

      });

 

      $.ajax({

        type: ‘GET‘,

        url: ‘/api/data‘,

        dataType: ‘json‘,

        success: function(data) {

          debugger;

          myChart.setOption({

            xAxis: {

              data: data.data.categories

            },

            series: [

              {

                name: ‘销量‘,

                data: data.data.data

              }

            ]

          });

        }

      });

    }

  },

  mounted() {

    this.drawpie();

  }

};

</script>

 


实现效果如下:
技术分享图片

 

 


 

vue 获取json数据

原文:https://www.cnblogs.com/hztyzq/p/12043971.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!