Vue2+echarts 实现图表的简单绘制

Echarts是一个基于JavaScript的开源可视化库,由百度开发和维护。它通过简单的配置方式,就可以实现各种复杂的数据可视化和图表展示。Echarts支持多种图表类型,包括柱状图、折线图、饼图、散点图、漏斗图等,同时还支持地图可视化和3D可视化效果。Echarts具有高度可定制性和交互性,支持动态数据更新和大数据量展示。Echarts提供了丰富的API和文档,可以方便地与其他前端框架整合。Echarts被广泛应用于数据可视化领域,特别是大数据分析和BI数据分析等领域。

 一:快速构建vue项目

使用vue脚手架创建一个快速入门项目

vue create echarts-test

 这里选择默认的vue2模板项目快速构建

 运行命令启动项目

cd echarts-test
npm run serve

 打开浏览器输入对应的端口就可以看到模板页面了

二:引入echarts

2.1添加echarts包

在项目根目录执行命令

npm i echarts

 这时候你就可以在package.json文件中找到添加的包

 2.2全局引入echarts

在main.js中添加以下语句

import * as echarts from 'echarts'
Vue.prototype.$echarts =echarts

 这样的目的是将echarts挂载到vue原型上,可以直接通过$echarts直接使用

三:echarts简单入门示例

3.1清理无用文件

将app.vue 内的无关内容清空

清空完的内容为

<template>
  <div>

  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style></style>


3.2echarts示例图表

首先创建一个区域作为echarts图表的画布并设置对应的宽高和ref

<template>
  <div>
    <div ref="echarts" style="height: 600px;width: 800px;"></div>
  </div>
</template>

在挂载的时候获取echarts初始化和绘制图表

<script>

export default {
  name: 'App',
  mounted() {
    let chart = this.$echarts.init(this.$refs.echarts)
    chart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      legend: {
        data: ["销量"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}

 效果如下图所示

 更多图表可查看官网描述Apache ECharts

  • 10
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现动态绘制图表,可以使用Vue.js做前端框架,使用Echarts.js做图表库。下面是一个简单实现过程: 1. 在Vue.js中安装Echarts.js。可以通过npm或者cdn的方式来安装。 2. 在Vue.js组件中引入Echarts.js,并初始化一个echarts实例。 3. 在Vue.js的data中定义一个数组,用来存储图表的数据。在mounted生命周期钩子中,设置一个定时器,每隔一段时间就往数据数组中添加一些数据。 4. 在Vue.js的methods中定义一个函数,用来更新图表。在这个函数中,使用echarts实例的setOption方法来更新图表数据。 5. 在Vue.js的template中,添加一个div元素作为图表容器,并设置宽高。在mounted生命周期钩子中,使用echarts实例的init方法初始化图表,并在更新图表数据时调用更新函数。 下面是一个简单的示例代码: ``` <template> <div id="chart" style="width: 600px; height: 400px;"></div> </template> <script> import echarts from 'echarts' export default { data () { return { chartData: [] } }, mounted () { this.chart = echarts.init(document.getElementById('chart')) this.timer = setInterval(() => { this.addData() this.updateChart() }, 1000) }, methods: { addData () { this.chartData.push(Math.random() * 100) }, updateChart () { this.chart.setOption({ xAxis: { type: 'category', data: Array.from({ length: this.chartData.length }, (_, i) => i) }, yAxis: { type: 'value' }, series: [{ data: this.chartData, type: 'line' }] }) } }, beforeDestroy () { clearInterval(this.timer) this.chart.dispose() } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ZLY_2004

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值