美文网首页
vue 引入echarts 简单易懂

vue 引入echarts 简单易懂

作者: 一叶孤舟1990 | 来源:发表于2019-07-09 20:01 被阅读0次

    今天为大家带来vue 引入echarts 的办法,也是新手最可以看懂的办法!!!

    (如果可行,并且看懂,请帮忙给我点个赞吧,谢谢!!!)

    第一步: 安装 echarts :npm  i  echarts

    第二步: 引入(我这是整体引入,建议最好按需引入    注意:最好不要在入口文件中引入) 

    1,直接 复制到你需要用到echarts的组件中      import echarts from 'echarts'

    2,完成  是不是很简单呢。哈哈  

    下面来介绍实际使用!!!

    1,打开echarts官网 选择 菜单中的  实例   (https://echarts.baidu.com/examples/

    2,看到符合你项目的可视化图表直接点进去,举例:

    3,复制代码到vue中,下图中 option 就是复制的代码,要放到 return 中  这样才能渲染

    4,随便写个div 给上id  方便获取 

    5,渲染这个echarts    我是用了axios 调用了数据   myChart  就是获取你自己创建的元素  

    myChart.setOption(this.option);  这句话就是渲染  echarts  

    6,完成

       希望大家可以给点个赞,谢谢大家!!!!

    相关文章

      网友评论

          本文标题:vue 引入echarts 简单易懂

          本文链接:https://www.haomeiwen.com/subject/sgbfkctx.html