Vue.js 和 ECharts 封装的图表组件库v-charts

最新推荐文章于 2025-06-06 09:14:43 发布

yjxfox

最新推荐文章于 2025-06-06 09:14:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vuejs ECharts 图表组件库 v-charts

本文链接：https://blog.csdn.net/yjxfox/article/details/90235841

Vue.js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何通过npm安装v-charts和ECharts，并在Vue项目中配置和展示折线图。示例代码展示了如何设置图表数据，包括日期和PV值，以及如何在页面中引入和使用VeLine组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 命令安装

npm i v-charts echarts -S

2. 在显示的页面进行参数配置

<template>
  <div>
    <ve-line :data="chartData"></ve-line>
  </div>
</template>

<script>
import VeLine from 'v-charts/lib/line.common'
export default {
  components: { VeLine },
  data () {
    return {
      chartData: {
        columns: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      }
    }
  }
}
</script>

3. https://v-charts.js.org/ 官网