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

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

admin 2019-09-29 297 浏览 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();

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


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

相关推荐

嘉兴女工8秒包1个粽子 月收入过万羡煞网友
嘉兴女工8秒包1个粽子 月收入过万羡煞网友

  又是一年#端午节#到来,最受大家关注的自然是粽子。近日,在浙江嘉兴,一位专门包粽子的高阿姨因手速快、收入高,引起了网友的关注。高阿姨是一名经验丰富的工人,已...

1周前 (06-25) admin

端午节粽子口味地图出炉 “甜咸之争”你是哪一派?
端午节粽子口味地图出炉 “甜咸之争”你是哪一派?

“吃货不分南北,口味必分甜咸”,作为端午节的特色美食,粽子几乎每年都会引发咸甜之争。粽子的甜咸之争其实与气候环境、文化习俗等因素关系密切,中国天气网根据用户调查...

1周前 (06-25) admin

萌娃商场认错妈妈抱着不撒手,亲妈出现后萌娃一脸懵
萌娃商场认错妈妈抱着不撒手,亲妈出现后萌娃一脸懵

近日,成都一网友上传了一段视频。在上班路上一小男孩突然跑过来叫她妈妈,接着她抱起了小男孩。随后小男孩抱着他不愿松手,不一会儿妈妈从远处走了过来。大家都告诉小孩妈...

2周前 (06-23) admin

亚马逊的直播带货,还差点什么
亚马逊的直播带货,还差点什么

5月22日,阿里巴巴发布了2020财年全年及第四季度业绩,阿里2020财年(2019年4月到2020年3月)的消费型商业业务交易额突破1万亿美元,成为全球首家交...

1个月前 (05-28) admin

为什么平时点外卖用的美团,离两个马爸爸越来越近了?
  • 为什么平时点外卖用的美团,离两个马爸爸越来越近了?
  • 为什么平时点外卖用的美团,离两个马爸爸越来越近了?
  • 为什么平时点外卖用的美团,离两个马爸爸越来越近了?
  • 为什么平时点外卖用的美团,离两个马爸爸越来越近了?
3月共有5亿海外用户涌入速卖通,App下载量已超过亚马逊
3月共有5亿海外用户涌入速卖通,App下载量已超过亚马逊

5月23日消息英国金融债券媒体LearnBonds近日发布报告称,受疫情影响,网购在海外迅速普及开来,全球手机购物用户激增。阿里巴巴旗下中国最大的跨境电商...

1个月前 (05-25) admin

拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
  • 拳王泰森放话:我欢迎任何人的挑战,愿意和任何人开战
受疫情影响 2020纽约车展正式宣布取消
受疫情影响 2020纽约车展正式宣布取消

当地时间5月22日,纽约车展组委会宣布受新冠肺炎疫情的影响,2020年纽约车展正式取消,下一届纽约车展将于2021年3月31日-4月11日期间举行,其中3月31...

1个月前 (05-23) admin

京东正式上线“自营房产”
京东正式上线“自营房产”

5月22日,京东房产与中骏集团在京签署战略协议,中骏集团成为首个在京东开设自营旗舰店的房产开发商,这也标志着京东正式上线“自营房产”业务。据京东方面介绍,通过此...

1个月前 (05-23) admin

重量级第一人泰森-富里:我很丑还秃顶,但没有人能战胜我
重量级第一人泰森-富里:我很丑还秃顶,但没有人能战胜我

近日,现WBC/《拳坛》杂志重量级拳王英国“吉普赛皇帝”泰森-富里(30-0-1,21KO)在接受媒体采访时表示,他现在是引领拳坛的超级巨星,而且是战无不胜的。...

1个月前 (05-22) admin

我国开通5G基站超20万个 运营商详解如何推进5G融合应用
我国开通5G基站超20万个 运营商详解如何推进5G融合应用

央广网北京5月17日消息(记者吕红桥)据中央广播电视总台经济之声《天下财经》报道,5月17日是世界电信日,工信部、几大运营商在世界电信日大会上重点聚焦5G,介绍...

2个月前 (05-18) admin

欢迎 发表评论: