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

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

安装依赖

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

引入echarts

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

1. 全局引用在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]
      }]
    })
  }

效果图：

这里只是作最简单的引入演示，需要进行更多的echarts属性的设置可以达到 理想的图表效果
关于属性设置 请移步官方文档 ------ 点我跳转

关于问题解决

很多人遇到安装echarts依赖后，引入echarts仍然无法显示图表的问题，这里是因为版本的原因
echarts默认安装5.x最新版，卸载echarts后安装指定版本即可解决

npm uninstall echarts  //卸载

npm install [email protected] --save  //安装指定版本