经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue+echart 展示后端获取的数据
来源:cnblogs  作者:JaydenChang  时间:2023/1/18 8:42:58  对本文有异议

最近在合作做一个前后端分离项目时,为了测试我写的后端部分获取数据的效果,自己也学了一下 vue 的知识,在获取 json 信息这里也踩了很多坑。

这里列举下我返回的 json 部分信息:

  1. {
  2. "house_basic": [
  3. {
  4. "HOUSE_ID": "00001",
  5. "HOUSE_NAME": "盈翠华庭122A户型",
  6. "HOUSE_AREA": "122",
  7. "HOUSE_STATE": 0,
  8. "HOUSE_SPECIAL": "采光好,南北通透"
  9. },
  10. {
  11. "HOUSE_ID": "00002",
  12. "HOUSE_NAME": "北海中心中间户",
  13. "HOUSE_AREA": "92",
  14. "HOUSE_STATE": 0,
  15. "HOUSE_SPECIAL": "采光好,客厅朝南"
  16. }
  17. ]
  18. }

vue 的 script 部分:

  1. <script>
  2. // 基本的script部分框架
  3. import axios from 'axios';
  4. export default {
  5. created() {
  6. axios.get('http://<ip>:9999/vote/api')
  7. .then((res) = > {
  8. console.log(res);
  9. })
  10. }
  11. }
  12. </script>

我们打印一下 res.data,得到的是:

  1. {
  2. {
  3. "score": [
  4. {
  5. "HOUSE_ID": "00001",
  6. "HOUSE_VOTE": 5,
  7. "HOUSE_NAME": "盈翠华庭122A户型"
  8. },
  9. {
  10. "HOUSE_ID": "00002",
  11. "HOUSE_VOTE": 22,
  12. "HOUSE_NAME": "北海中心中间户"
  13. }
  14. ]},
  15. // 略过不重要信息
  16. }

我们再打印 res.data.score,这才得到了我们想要的数组:

  1. [
  2. {
  3. "HOUSE_ID": "00001",
  4. "HOUSE_VOTE": 5,
  5. "HOUSE_NAME": "盈翠华庭122A户型"
  6. },
  7. {
  8. "HOUSE_ID": "00002",
  9. "HOUSE_VOTE": 22,
  10. "HOUSE_NAME": "北海中心中间户"
  11. }
  12. ]

输出其中一条的子条目看看 res.data.score[0].HOUSE_ID00001

在搞清楚返回的 data 后,就可以来写 script 部分获取,保存数据了。

  1. <template>
  2. <div id='main'></div>
  3. </template>
  4. <script>
  5. // BarChart.vue
  6. import axios from 'axios';
  7. export default {
  8. name: 'barChart',
  9. methods :{
  10. initChart() {
  11. var echarts = require('echarts');
  12. let myChart = echarts.init(document.getElementBuId('main'));
  13. // 这里需要一个id为main的空div标签,注意,必须是空标签
  14. var option = {
  15. tooltip: {
  16. trigger: 'axis',
  17. axisPointer: {
  18. type: 'shadow',
  19. }
  20. },
  21. xAxis: {
  22. type: 'category',
  23. name: 'id', //x轴的名称
  24. data: this.idData,
  25. },
  26. yAxis: {
  27. type: 'value',
  28. name: 'vote',
  29. // data: this.voteData,
  30. // y轴好像不放data也没多大影响
  31. },
  32. series: [{
  33. data: this.voteData,
  34. type: 'bar',
  35. }]
  36. }
  37. myChart.setOption(option); // 设置图标样式
  38. }
  39. },
  40. created() {
  41. // 这里拿投票数接口来举例
  42. axios.get('http://<ip>:9999/vote/api')
  43. .then((res) => {
  44. this.idData = [];
  45. this.voteData = [];
  46. if (res.status == 200) {
  47. let temp = res.data.score;
  48. for (let i in temp) {
  49. this.idData.push(temp[i].HOUSE_ID);
  50. this.voteData.push(temp[i].HOUSE_VOTE);
  51. }
  52. }
  53. this.initChart();
  54. })
  55. },
  56. mounted() {
  57. this.initChart();
  58. }
  59. }
  60. </script>

原文链接:https://www.cnblogs.com/jaydenchang/p/17058423.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号