在vue里面引入echarts（柱状图，饼图，折线图））

1.安装echarts 

npm install echarts -S

2.在main.js中引用echarts

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.封装chart组件(复制粘贴就好了)

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="bar" style="width: 600pxheight:400px"></div>

<div id="pie" style="width: 600pxheight:400px"></div>

<div id="line" style="width: 600pxheight:400px"></div>

在script里面写下面内容

export default{

    mounted(){

    this.drawLine()//调用这个方法

},

    methods:{

        drawLine () {

        var echarts = require('echarts')

        var barChart = echarts.init(document.getElementById('bar'))

        var pieChart = echarts.init(document.getElementById('pie'))

        var lineChart = echarts.init(document.getElementById('line'))

        barChart.setOption({

          title: {

              text: '柱状图'

          },

          tooltip: {},

          legend: {

              data: ['销量']

          },

          xAxis: {

              data: ["肉夹馍", "馒头", "豆沙包", "粉丝汤", "豆包", "油条"]

          },

          yAxis: {},

          series: [{

              name: '销量',

              type: 'bar',

              data: [5, 20, 36, 10, 10, 20]

          }]

        })

pieChart.setOption({

  title: {

      text: '饼图'

  },

  series: [{

      name: '访问来源',

      type: 'pie', // 设置图表类型为饼图

      radius: '55%', // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。

      data: [ // 数据数组，name 为数据项名称，value 为数据项值

          {

              value: 235,

              name: '视频广告'

          },

          {

              value: 274,

              name: '联盟广告'

          },

          {

              value: 310,

              name: '邮件营销'

          },

          {

              value: 335,

              name: '直接访问'

          },

          {

              value: 400,

              name: '搜索引擎'

          }

      ]

  }]

})

lineChart.setOption({

  title: {

      text: '折线图',

  },

  tooltip: {},

  legend: {

      data: ['销量', '试穿', '退货'],

      x: 'right'

  },

  xAxis: {

      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]

  },

  yAxis: {},

  series: [{

      name: '销量',

      type: 'line',

      data: [5, 20, 36, 10, 10, 20]

  }, {

      name: '试穿',

      type: 'line',

      data: [30, 40, 50, 20, 12, 30]

  }, {

      name: '退货',

      type: 'line',

      data: [1, 2, 1, 3, 5, 2]

  }]

})

      }

    }

}

由于在项目中需要对数据进行可视化处理，也就是用图表展示，众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的（懒省事），eg:vue-echarts ，但是拉取下来发现，跟项目中使用的类型有点偏差，而且他们的数据大多都是定制好的，我很难在此基础上进行更改（惹不起），于是选择了放弃，最终还是选择echarts。以下是我使用的一些心得体会~

我的示例是在vue-cli搭建

首先需要全局引入

在main.js中

在Echarts.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

这样一个简单的图表就完成了，是不是觉得很简单？假如在一个大型的项目中，而且数据是非常复杂的？那么该如何 *** 作？

由于全局引入会将所有的echarts图表打包，导致体积过大

在Echarts.vue文件中

使用 require 而不是 import

基于前面的疑问，加上实际运用到项目中遇到的一些问题，我思考使用组件的形式。

从上边可以看出，你每次在使用echarts的时候，都必须要重复的引入，这样很不方便

vue作为一个组件化开发的框架，我们可以使用组件的方式进行集成。每次我们引入组件，进行使用，这样就方便的多。

下面是一个我自己对echarts进行的一个简单的vue组件的集成。

在echarts中

子组件：

props部分是我接收到的参数，父组件获取数据分发，data是父组件分发给echarts的数据源。

父组件：

如果在大型的项目，而且图表又非常的多，那么vuex少不了。如果把数据集中存储到了vuex中，echarts组件再从vuex中获取数据，我们也能随时保存获取的结果，对这些数据可以添加收藏也可以加入缓存中，下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

---