编辑器:HBuilderx

axios文档:http://www.axios-js.com/zh-cn/docs/

echarts实例:https://echarts.apache.org/examples/zh/index.html


  1. 用HBuilderx新建elementUI项目。
  2. 安装axios:打开命令行,进入项目文件夹下,输入:
    cnpm install axios

  3. main.js中添加:
    import echarts from 'echarts'
    import VueResource from 'vue-resource'
    import axios from 'axios'; /* 引入axios进行地址访问*/ //Vue.config.productionTip = false
    Vue.prototype.$echarts = echarts
    Vue.prototype.$http = axios;
  4. 在App.vue中新建一个div容器:
    <div id="echart1" style="height: 300px; width: 100%;"></div>
  5. 新建options.js和option.json文件(内容来自echarts折线图例子:https://echarts.apache.org/examples/zh/editor.html?c=line-smooth)
    新建以后的项目目录如下:

    options.js

    export const option =  {
    xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    type: 'value'
    },
    series: [{
    data: [],//把echarts例子中这里的数据去掉了
    type: 'line',
    smooth: true
    }]
    };

    option.json

    {
    "data": [820, 932, 901, 934, 1290, 1330, 1320]
    }
  6. 在<script></script>中引入:
    import {option} from "../src/static/options.js"
    import axios from 'axios'; var echarts = require('echarts');
  7. 在methods:{ }中新建drawBarChart()
    methods: {
    drawBarChart() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));
    // 绘制基本图表
    myChart.setOption(option); //option是一个详细的配置参数
    axios
    .get("../src/static/option.json")
    .then(res => (
    myChart.setOption({
    series: [{
    data: res.data.data //用option.json中的数据给data赋值
    }]
    })
    ));
    }
    }
  8. 在mounted:function(){ }中添加:
    this.drawBarChart();


  9. 全部代码如下:
    main.js

    import Vue from 'vue'
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    import App from './App.vue' import echarts from 'echarts'
    import VueResource from 'vue-resource'
    import axios from 'axios'; /* 引入axios进行地址访问*/ // Vue.config.productionTip = false
    Vue.prototype.$echarts = echarts
    Vue.prototype.$http = axios; Vue.use(ElementUI) new Vue({
    el: '#app',
    render: h => h(App)
    })

    App.vue

    <template>
    <div id="app">
    <div>
    <div id="echart1" style="height: 300px; width: 100%;"></div>
    </div>
    </div>
    </template> <script>
    import {
    option
    } from "../src/static/options.js"
    import axios from 'axios'; var echarts = require('echarts');
    export default {
    mounted: function() {
    this.drawBarChart();
    },
    methods: {
    drawBarChart() {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));
    // 绘制基本图表
    myChart.setOption(option); //option是一个详细的配置参数
    axios
    .get("../src/static/option.json")
    .then(res => (
    myChart.setOption({
    series: [{
    data: res.data.data //用option.json中的数据给data赋值
    }]
    })
    ));
    }
    }
    }
    </script> <style>
    #app {
    font-family: Helvetica, sans-serif;
    text-align: center;
    }
    </style>

vue使用axios读取本地json文件来显示echarts折线图的更多相关文章

  1. android 读取本地json文件 解决显示乱码显示

    1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson(Context context,  String fileName){         ...

  2. Vue2.0 axios 读取本地json文件

    参考:https://www.cnblogs.com/wdxue/p/8868982.html 1.下载插件 npm install axios --save 2.在main.js下引用axios i ...

  3. vue使用axios请求本地json文件出现404

    之前的路径是这么写的,一直出现404,后来发现必须是http的才可以,这样是无法请求的 把路径改为以下   位置根据json文件决定,但是必须是http://localhost:断口号

  4. 读取本地json文件,并转换为dictionary

    // 读取本地JSON文件 - (NSDictionary *)readLocalFileWithName:(NSString *)name { // 获取文件路径 NSString *path = ...

  5. jQuery ajax读取本地json文件

    jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...

  6. JavaScript读取本地json文件

    JavaScript读取本地json文件 今天调试了一上午,通过jQuery读取本地json文件总是失败,始终找不出原因,各种方法都试了 开始总以为是不是json格式的问题.高了半天不行 后来读了一个 ...

  7. 读取本地json文件,转出为指定格式json 使用Base64进行string的加密和解密

    读取本地json文件,转出为指定格式json   引用添加Json.Net 引用命名空间 using Newtonsoft.Json //读取自定目录下的json文件StreamReader sr = ...

  8. vue组件+axios访问本地json

    import axios from 'axios'export default { name: "AjaxText", data: function () { return { m ...

  9. 读取本地Json文件

    //读取Json文件  地区 //将文件拖到本地  获取json数据 //获取json文件路径 NSString *pathArea=[[NSBundle mainBundle] pathForRes ...

随机推荐

  1. java的加载与执行原理详解

    java程序从开发到最终运行经历了什么? (31) 编译期: 第一步:在硬盘某个位置(随意),新建一个xxx.java文件 第二步:使用记事本或者其他文本编辑器例如EditPlus打开xxx.java ...

  2. 【UE4 C++】绘制函数 Debug drawing functions

    基于UKismetSystemLibrary /** Draw a debug line */ UFUNCTION(BlueprintCallable, Category="Renderin ...

  3. 【UE4 设计模式】外观模式 Facade Pattern

    概述 描述 外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.外观模式又称为门面模式,它是一 ...

  4. OO课第三单元总结

    一.梳理JML语言的理论基础 (1)理论基础 JMl的出现很大程度上一为了行为接口的规范化,用这种语言来指定特定模块的特定功能.JML的核心部分分为三个部分:前置条件(requires).后置条件(e ...

  5. 五分钟搞懂spring-cloud-square

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 初识spring-cloud-square 2021年 ...

  6. IDA*、操作打表、并行处理-The Rotation Game HDU - 1667

    万恶之源 优秀题解 用文字终究难以穷尽代码的思想 思路 每次操作都有八种选择,相当于一棵每次延申八个子节点的搜索树,故搜索应该是一种方法.而这题要求求最少步数,我们就可以想到可以试试迭代加深搜索(但其 ...

  7. 【转】PLI是什么以及怎么用

    programmable language interface 这里就说给verilog用的一些系统函数,还是无双大大的帖子 首先介绍了怎么让你自己写的pli系统函数在ncverilog里面可以成功调 ...

  8. 碰撞的蚂蚁 牛客网 程序员面试金典 C++ Java Python

    碰撞的蚂蚁 牛客网 程序员面试金典 C++ Java Python 题目描述 在n个顶点的多边形上有n只蚂蚁,这些蚂蚁同时开始沿着多边形的边爬行,请求出这些蚂蚁相撞的概率.(这里的相撞是指存在任意两只 ...

  9. inline hook原理和实现

    inline hook是通过修改函数执行指令来达到挂钩的.比如A要调用B,但人为地修改执行流程导致A调用了C,C在完成了自己的功能后,返回B再执行. 修改这段指令前首先要获取修改权限 由于要修改的代码 ...

  10. Django(74)drf-spectacular自动生成接口文档

    介绍 drf-spectacular是为Django REST Framework生成合理灵活的OpenAPI 3.0模式.它可以自动帮我们提取接口中的信息,从而形成接口文档,而且内容十分详细,再也不 ...