在vue中添加echarts

原创于 2020-08-12 21:10:58 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端知识专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成ECharts图表库，包括安装、配置及使用步骤，通过实例展示如何创建并渲染动态折线图。

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

在vue中添加echarts

首先安装echarts到你的vue项目

 npm install echarts -s

在main.js中引用echart

import echarts from 'echarts';
Vue.use(echarts);

echarts引用

新建一个vue文件，并创建一个dom

<template>
//创建一个dom
  <div id="main" style="width:100%;height:500px;"></div>
</template>
<script>
//引入echarts
import echarts from "echarts";
export default {
  name: "chart",
  data() {
    return {};
  },
  //表格渲染
  mounted() {
    this.drawLine();
  },
  methods: {
     //绘制函数
    drawLine() {
       //根据刚才创建的dom实例化一个表格
      var myChart = echarts.init(document.getElementById("main"));
      //表格的各项参数设置
      myChart.setoption = {
        //横坐标
        xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
           type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }],
      };
   }
 }
</script>

4.效果图：