Vue使用echarts（表格工具）

最新推荐文章于 2025-03-18 23:46:59 发布

MYNAMEL

最新推荐文章于 2025-03-18 23:46:59 发布

阅读量852

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/MYNAMEL/article/details/114304624

版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Echarts，包括通过npm安装，引用Echarts库，详细教程参照官方文档，并提醒注意Echarts不同版本可能出现的问题及解决方案。

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

官网地址：https://echarts.apache.org/zh/index.html

下载：

npm install echarts --save

引用：

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

在这里插入图片描述

使用：

该处直接参考官网写的：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
在这里插入图片描述

<template>
    <div id="home">
      <div id="main" style="width: 600px;height:400px;"></div>
    </div>
</template>

<script>
  export default {
    name: 'Home',
    mounted () {
      this.init()
    },
    methods:{
      init(){
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          legend: {
            data:['销量']
          },
          xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

注意事项：

如果你下载下来的是5.0版本运行时可能有错。（本人之前5.0.2，现在4.9.0）
如果你出现运行不了，请参考这篇文章：https://www.cnblogs.com/cyhsmile/p/14098269.html
解决方法：

npm uninstall echarts //卸载
npm install echarts@4.9.0//重装
npm fund
npm run dev
然后就好了，本人亲测有效。

在这里插入图片描述