使用vue+echarts绘制基础图表(柱状图、折线图等）

最新推荐文章于 2023-09-07 16:11:26 发布

db_dzk_2005

最新推荐文章于 2023-09-07 16:11:26 发布

阅读量468

点赞数

文章标签： echarts vue.js

本文链接：https://blog.csdn.net/moyuxi188/article/details/131408697

版权

前言

适合有一定vue基础的人，能看得懂基本的语法结构、文件目录。

vue是？

vue是什么

Vue是一个流行的JavaScript框架，用于构建用户界面。它使用了MVVM（Model-View-ViewModel）架构模式，允许开发者将数据与DOM元素进行绑定，以实现数据驱动的UI设计。Vue具有轻量级、灵活、易于学习和快速上手的特点，同时提供了一些高级特性，如组件化、插件系统和路由管理等，因此得到了广泛应用和社区支持。Vue同时也支持使用TypeScript等其他语言来进行开发，以满足开发者对类型检查等需求。
vue官网

如何使用vue

1.在HTML文件中引入Vue库，可以通过CDN、直接下载或使用构建工具等方式进行引入，如下代码所示：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.通过node.js直接创建vue项目

npm init vue@latest

echarts是？

echarts是什么

ECharts（Enterprise Charts）是百度开源的一款基于JavaScript的数据可视化库，它提供了丰富的图表类型和交互响应能力，可以支持高质量的数据可视化呈现，如折线图、柱状图、散点图、饼图、关系图等。ECharts基于zRender，一个轻量级的Canvas类库，支持SVG和VML渲染，并且支持多端展示（PC、手机、平板等），让用户能够轻松地构建出高质量的图表和可视化应用。
echarts文档

如何使用echarts

1.在HTML文件中引入ECharts库，可以通过CDN、直接下载或使用构建工具等方式进行引入

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2.官网下载echarts.min.js文件，在HTML中进行本地引入

<script src="路径/echarts.min.js"></script>

3.通过node.js下载echarts库，在vue中直接import即可。

npm install echarts

注意，vue3版本中引入格式必须为

import * as echarts from 'echarts'

在vue里面使用echarts绘制基础柱状图

1.在项目里创建一个vue文件，并在App.vue中导入。
2.在新建的vue文件里，引入echarts（这里为已经下载好的库)
3.创建一个dom盒子，并用echarts初始化
4.绘制echarts配置项
5.更新echarts配置项
具体代码如下：

<template>
  <div class='barChart' id='barChart' style="height: 500px;">图的容器</div>
</template>
  
<script>
import * as echarts from 'echarts'
import { onMounted, reactive } from 'vue'

export default {
  setup() {
    onMounted(() => {
      //创建dom盒子并用echarts初始化，创建dom盒子之后，要创建盒子将对应的选择器选择好，例如这里为id选择器，id为barChart。
      //所以盒子的id也要为barChart
      var myChart = echarts.init(document.getElementById('barChart'))
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })
    })//onMounted
    return {
    }//return
  }//setup
}//export default
</script>