1==》首先准备一个容器

  1. <div id="echartContainer" style="width:400px; height:400px"></div> <!--创建一个echarts的容器-->

2==>在当前的页面中使用axios

引入放在本地在static文件中的静态文件op.js

引入echarts

  1. import axios from 'axios';
  1. 将数据格式放在js文件中 等会将他暴露出去
  1. import {option} from '../../../static/op.js'
  引入echarts模块
  var echarts = require('echarts');
  1.  

op.js文件如下,它黎曼是配置好了的参数

  1. export const option = {
  2. title: { text: '简单饼状图' },
  3. tooltip: {},
  4. xAxis: {
  5. data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  6. name: '产品'
  7. },
  8. yAxis: {},
  9. series: [{
  10. name: '销量',
  11. type: 'bar',
  12. data: [],
  13. itemStyle: {
  14. normal: {
  15. color: 'hotpink'
  16. }
  17. }
  18. }]
  19. }

3==》在调用methods中写一个方法,在mounted中去调用

  1. mounted() {
  2. // 调用这个函数 在节点创建完成之后
  3. this.drawBarChart();
  4. },

4==>在methods中写一个方法

  1. methods:{
  2. drawBarChart() {
  3. // 基于准备好的dom,初始化echarts实例
  4. var myChart = this.echarts.init(document.getElementById('echartContainer'));
  5. // 绘制基本图表
  6. myChart.setOption(option); //option是一个详细的配置参数
  7. //没有加载出来显示加载动画
  8. myChart.showLoading();
  9. //获取数据
  10. axios.get('../../static/b.json').then(res => {
  11. setTimeout(()=>{ //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时
  12. myChart.hideLoading(); //没有加载出来隐藏加载动画
  13. myChart.setOption({ //动画的配置
  14. series: [{
  15. data: res.data.product //这里数据是一个数组的形似
  16. }]
  17. })
  18. }, 2000 )
  19. })
  20. },

b.json的参数也是如下的

  1. {
  2. "product" : [5, 20, 36, 10, 10, 20]
  3. }

vue中如何使用echarts,使用axios获取数据的更多相关文章

  1. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  2. vueX、vue中transition的使用、axios

    引入一篇好文章链接:看一遍就会的vuex文章;完!!! vue中transtion的使用:transition文章;完!!! axios的文章:axios;完!!!

  3. vue中如何使用echarts

    在vue中使用echarts主要是注意如何与vue生命周期相结合,从而做到数据驱动视图刷新 主要是以下几步: echarts的option配置项放在在data(){}或者computed(){}中 在 ...

  4. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  5. 【4】axios 获取数据

    API:https://www.kancloud.cn/yunye/axios/234845 基于axios进行二次封装 安装axios npm install axios --save 安装成功 [ ...

  6. vue中的iviewUI导出1W条列表数据每次只导出2000条的逻辑

    导出弹窗的html <template> <Modal v-model="exportModal" width=400 :closable="false ...

  7. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  8. PHP中使用CURL模拟登录并获取数据实例

    cURL 是一个功能强大的PHP库,使用PHP的cURL库可以简单和有效地抓取网页并采集内容,设置cookie完成模拟登录网页,curl提供了丰富的函数,开发者可以从PHP手册中获取更多关于cURL信 ...

  9. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

随机推荐

  1. 设置API:wx.openSetting,wx.getSetting使用说明(示例:地图授权与取消授权后的重新授权)

    这个API解决了过去一个长久以来无法解决的问题,如何让用户重复授权: 打开小程序的设置界面:就是主动调取授权 目前资料极少,但是已经可以让大家先看看了: 官方文档地址:https://mp.weixi ...

  2. Makefile 文件格式;makefile伪目标

    Makefile包含 目标文件.依赖文件.可运行命令三部分. 每部分的基本格式例如以下: test: prog.o  code.o gcc  -o  test   prog.o   code.o 当中 ...

  3. Acwing43 不分行从上往下打印二叉树

    地址 https://www.acwing.com/problem/content/description/41/ 从上往下打印出二叉树的每个结点,同一层的结点按照从左到右的顺序打印. 样例 输入如下 ...

  4. c++用控制符控制输出格式

    #include<iostream> #include<cstdio> #include<iomanip> using namespace std; int mai ...

  5. 《Java面试全解析》505道面试题详解

    <Java面试全解析>是我在 GitChat 发布的一门电子书,全书总共有 15 万字和 505 道 Java 面试题解析,目前来说应该是最实用和最全的 Java 面试题解析了. 我本人是 ...

  6. HTML连载50-伪元素选择器、清除浮动方式五

    一.伪元素选择器 1.什么是伪元素选择器 伪元素选择器作用给指定标签的内容前面添加一个子元素,或者给指定标签的内容后面添加一个子元素. 2.格式: 标签名称::before{ 属性名称:值: } 给指 ...

  7. php date获取前一天的时间

    结果: 结论: 第二种方式只使用了一个函数,所以更快一些,速度大约是第一种的两倍

  8. python接口自动化11-pytest入门

    前言 pytest是一个非常成熟的全功能的Python测试框架,适合从简单的单元到复杂的功能测试,主要特点有以下几点: 简单灵活,容易上手: 支持参数化: 能够支持简单的单元测试: 标记测试功能与属性 ...

  9. PHP判断设备访问来源

    /** * 判断用户请求设备是否是移动设备 * @return bool */ function isMobile() { //如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (is ...

  10. HttpClient 如何设置超时时间

    今天分享一个巨坑,就是 HttpClient.这玩意有多坑呢?就是每个版本都变,近日笔者深受其害. 先看一下代码,我要发送请求调用一个c++接口. public static String doPos ...