登录 | 地图 欢迎访问【UZ导航】
当前位置:网站首页 > 推荐 > 正文

vue+echarts 动态绘制图表以及异步加载数据

admin 2019-09-29 67 浏览 0 评论

安装


  cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度)

实例化


   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西。


  官方文档:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts


  不废话,贴代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1.在需要用图表的地方引入 例如:hello.js
 
    import echarts from 'echarts'
 
2.hello.vue  中写个容器
    
    <div id='myChart' style='width:600px;height:600px'></div>
 
3.在hello.js
    
 export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom,初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}
 
    这样就调用好了视力了,在页面刷新就可以了

效果如图:

1.png

这样是很简单的方法,嗯重点来了,我的数据又不是写死的~数据都是后台给我的呀(官方,还真的没有怎么说,示例也是ajax异步请求的)


项目一开始是有完整的一个表格数据,也就是我要把表格数据绘制成图表,还有一堆的筛选条件,有点懵逼~


  感觉问题很多啊,给我五分钟,分析分析,分解分解一下


  1.数据我都是有的,我需要绘制四条折线,表格数据循环复制给新的四个数组(筛选条件一变,四组数据也跟着变)


  2.横坐标也是动态,项目是时间(刚开始我还想偏了,自动填充日期的那种),表格的第一行就是日期,同样用新数组储存


  3.数据重新请求了,我的图表也要跟着变才对呀(图表重新绘制)


  再次贴代码(废话再多,不如一行代码)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1.在调用筛选条件的方法那里,创建五个新的数组(四条折线),横坐标(日期)
    这里没有代码
2.横坐标动态的:
    xAxis: {
         type: 'category',
         boundaryGap: false,
         data: this.xData,  //xData 就是日期这个数组
      },
3.series (四条折线的数据)
    series : [{
    name:this.tooltipData[0],
    type:'line',
    stack: '总量',
    data:this.new_userData,
  },
  {
    name:this.tooltipData[1],
    type:'line',
    stack: '总量',
    data:this.new_deviceData,
  },
  {
    name:this.tooltipData[2],
    type:'line',
    stack: '总量',
     data:this.active_userData,
  },
  {
    name:this.tooltipData[3],
    type:'line',
    stack: '总量',
    data:this.active_deviceData,
  }] 
4.随着筛选数据,重新绘制图表
    调用筛选条件方法的时候再调用这个实例化 drawline 方法就可以了
    this.drawLine();

大概就是这样就可以实现了


写的不好,但是还是值得参考的。

相关推荐

知乎启动“知乎百科”,个人机构皆可参与
知乎启动“知乎百科”,个人机构皆可参与

 最近、知乎对外宣布正式启动“知乎百科”公共编辑计划,无论是个人用户还是机构用户,都可以参与,推出了一条跟百度百科、维基百科都不相同的百科玩法。“知乎...

10小时前 admin

搜狗浏览器访问百度被提示禁止访问
搜狗浏览器访问百度被提示禁止访问

11月21日消息有大量网友称,用搜狗浏览器访问百度网站时提示被禁止访问。截止发稿时,IT之家通过搜狗浏览器访问百度页面进行实测时,搜索页面显示“您要访问的网站...

10小时前 admin

车载微信很快发布!你准备好了吗?
车载微信很快发布!你准备好了吗?

科技先生11月21日讯,世界5G大会今日正式开幕,在5G与数字经济新动能高峰论坛上,腾讯副总裁马斌发表演讲。马斌认为,中国未来的机会是从人口红利转向数据红利。4...

10小时前 admin

今日头条SEO1.0,头条站长 上线啦
今日头条SEO1.0,头条站长 上线啦

1提交站点验证:跟百度类似,为了省事,我就用官方的截图了a、下载验证文件b、添加到进行验证的网站域名(如:www.toutiao.com)根目录下。c、验证...

1天前 admin

中国联通:新增3182.6万4G用户!
中国联通:新增3182.6万4G用户!

今日有媒体爆料,中国联通公告称,2019年1至10月,公司移动出账用户累计净增708.3万户,达到3.22亿户;其中4G用户累计净增3182.6万户,达到2.5...

1天前 admin

刘强东喊出的京东下一个二十年战略图谱曝光
  • 刘强东喊出的京东下一个二十年战略图谱曝光
  • 刘强东喊出的京东下一个二十年战略图谱曝光
  • 刘强东喊出的京东下一个二十年战略图谱曝光
  • 刘强东喊出的京东下一个二十年战略图谱曝光
王思聪被取消限制消费令
王思聪被取消限制消费令

11月20日晚间,经查询中国执行信息公开网发现,王思聪已经不在限制消费人员名单之列。此前的10月12日,上海市嘉定区人民法院发布了案件号为(2019)沪0114...

2天前 admin

国内如何访问国外谷歌网站
  • 国内如何访问国外谷歌网站
  • 国内如何访问国外谷歌网站
  • 国内如何访问国外谷歌网站
  • 国内如何访问国外谷歌网站
高通预测2021年全球5G手机出货量将达4.5亿部
高通预测2021年全球5G手机出货量将达4.5亿部

北京时间11月20日早间消息,高通公司周二表示,预计全球智能手机制造商2021年的5G手机出货量将达4.5亿部,2022年出货量则将进一步增长至7.5亿部。  ...

2天前 admin

警察偷拍同事获刑入狱6年!
警察偷拍同事获刑入狱6年!

警察偷拍同事获刑怎么回事?据俄罗斯卫星网18日报道,据《纽约邮报》报道,美国加州长滩警察局一名警察因偷拍同事使用洗手间等私密视频而被判入狱6年。据报道,这名警察...

3天前 admin

乐视总部大楼被中止拍卖 曾经千亿市值今付不起612万
乐视总部大楼被中止拍卖 曾经千亿市值今付不起612万

原标题:贾跃亭的烦恼:曾经千亿市值的乐视被612万元难倒如今总部大楼还被中止拍卖  来源:每日经济新闻  每经记者陈梦妤   ...

3天前 admin

金立新增被执行超1.8亿 新品能否自救?
金立新增被执行超1.8亿 新品能否自救?

新京报讯(记者陈维城)记者11月19日获悉,天眼查工商信息显示,11月18日,深圳市金立通信设备有限公司新增两条被执行人信息,累计执行标的超1.8亿元。  深...

3天前 admin

全球最环保的搜索引擎:每搜索45次就种一棵树
全球最环保的搜索引擎:每搜索45次就种一棵树

  新浪科技讯北京时间11月19日晚间消息,据国外媒体报道,德国搜索引擎Ecosia被誉为是“全球最环保”的搜索引擎,因为用户的每一次浏览都相当于在种树。  ...

3天前 admin

html常用代码
html常用代码

1.文件类型<HTML></HTML>(放在档案的开头与结尾)2.文件主题<TITLE></TITLE>...

3天前 admin

不为人知的好东西
不为人知的好东西

收集和分享互联网上不为人知的好东西。今天呢小编又给大家带来了两款非常小众的软件,一起来看一下吧。第一款软件呢,叫做MYDM,是一个全能型的下载器了,有点类似于x...

3天前 admin

王思聪创业:生于万达,死于腾讯
王思聪创业:生于万达,死于腾讯

 一年前,王思聪在微博上搞了个抽奖:为了庆祝iG夺冠,拿出113万现金,抽113个人平分。  这个抽奖有一个特殊的规则,就是腾讯和英雄联盟的员工不能参与。  当...

3天前 admin

百度小程序白屏检测规则变更
百度小程序白屏检测规则变更

尊敬的开发者:您好!为更好提升小程序运行性能与稳定性,现将白屏检测规则修改如下: 从“小程序页面框架创建时开始计算时间,6秒后进行截图分析。当截图为空...

3天前 admin

企业微信:互联网最后的流量洼地
企业微信:互联网最后的流量洼地

微信是不是在走下坡路了?我听说用户时长下降、用户黏性下降,被短视频分流的很厉害!”他们好像是在陈述一个事实,而不是观点;尽管他们拿不出“微信在走下坡路”的任何真...

3天前 admin

“黑色星期五”首进日本,亚马逊推促销活动
“黑色星期五”首进日本,亚马逊推促销活动

11月和12月都是美国和中国的购物旺季。不同的是,中国是集中在双十一,美国则是因为“黑色星期五”。所谓黑色星期五,便是在感恩节的第二天。感恩节为11月第四个星期...

4天前 admin

5G终端上新 中国移动发布2020年终端产品规划
5G终端上新 中国移动发布2020年终端产品规划

11月15日,在中国移动召开的5G泛智能终端渠道生态合作峰会上,中国移动发布2020年终端产品规划及5G产品白皮书。此外,中国移动“5G终端先行者产业联盟”发布...

4天前 admin

欢迎 发表评论: