网络编程

vue+echarts实现动态绘制图表及异步加载数据的方法
网络编程 2025/1/12 佚名
3 2

前言

　　背景：vue写的后台管理，需要将表格数据绘制成图表（折线图，柱状图），图表数据都是通过接口请求回来的。

安装

　　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.在需要用图表的地方引入 例如：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]
      }]
    });
  }
 }
}

    这样就调用好了视力了，在页面刷新就可以了

　　效果如图：

　　vue+echarts实现动态绘制图表及异步加载数据的方法

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

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

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

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

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

　　3.数据重新请求了，我的图表也要跟着变才对呀（图表重新绘制）

　　再次贴代码（废话再多，不如一行代码）

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();

总结

以上所述是小编给大家介绍的vue+echarts实现动态绘制图表及异步加载数据的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
vue,echarts,动态绘制,vue,异步加载数据
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com