vue中引入echarts实现数据可视化（问题已解决：关于引入echarts图表不显示）

Beiyux

于 2021-09-27 09:12:47 发布

阅读量825

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： echarts javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45745641/article/details/120501202

本文介绍了在Vue项目中全局引用Echarts的步骤，包括在main.js中的配置，以及在组件中创建图表的基本用法。当遇到Echarts图表不显示的问题时，提到了可能是由于版本冲突，通过卸载最新版并安装指定版本的Echarts可以解决问题。文中给出了简单示例，并提示详细属性设置可参考官方文档。

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

实现数据可视化现在基本上是必须要掌握的，现在教大家如何在vue中使用Echarts完成数据可视化的实现

安装依赖

npm install echarts -S    //也可以使用淘宝镜像进行下载
cnpm install echarts -S

引入echarts

可以使用全局引用和按需引用两种方式，这里介绍全局引用，引用一次，在项目中使用都比较方便

全局引用在main.js中完成配置

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

进行使用

1.首先需要一个固定宽高的盒子存放图表

<div id="total-orders-chart" :style="{ width: '100%', height: '100%'}"/>

2.在 mounted 进行使用

 mounted () {
    const chartDom = document.getElementById('total-orders-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      xAxis: {
      },
      yAxis: {
      },
      series: [{
        type: 'line',
        data: [650, 504, 420, 350, 430, 600, 560, 263, 333, 519, 640, 520, 356, 426, 412, 633]
      }]
    })
  }