在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]

  }]

})

      }

    }

}

网上Vue结合Echarts使用的例子少之又少，而且数据都写好在组件内且不可复用

本文基于 Vue.js高仿饿了么外卖App ，在商家页面添加一个简易的可交互的平滑折线图

Chrome调试模拟手机端 *** 作效果：

</br>

我将拆分为两个部分，标题和三个选择框写在当前页面seller.vue中，将配置折线图的样式都写在父组件seller.vue里，折线图则抽象化为可复用的组件。

</br>

模拟一份JSON格式的 折线图xy坐标轴数据 chartData ，其中分了日、周、月这三组数据。

** data.json：**

</br>

在 webpack 的 dev-sever.js 中读取模拟好的 chartData 数据，然后新增个接口apiRoutes，当服务端收到请求以后，返回给客户端 chartData

** dev-sever.js：**

</br>

Hello.vue向服务器请求并获取 chartData

Hello.vue：

</br>

seller.vue 中写好标题和三个选择框的样式

props 接收从 Hello.vue 传来的xy坐标轴数据 chartData

传入 chart.vue 将要接收的数据，impData 为 chartData 中的一组数据，setData 为自定义折线图样式的数据。

select(type) 方法是点击选择框高亮，并把 impData 赋值为 chartData 中对应的一组数据

** seller.vue ：**

</br>

chart.vue组件中

prop 接收父组件 seller.vue 的传来的 impChartData 和 setChartData

watch 观察 impChartData 数据的变化，因为父组件点击选择框会改变传入的数据，这里相应的改变数据，并渲染新的折线图

drawLine(xData, yData, xAxisColor, lineColor, grid) 是绘制折线图样式的主体，我提取出了五个属性值作为参数，

分别是x坐标轴数据、y坐标轴数据、x坐标轴指示器的颜色、折线线条的颜色、直角坐标系内绘图网格，

分别获取自 this.impChartData.xData、 this.impChartData.yData、 this.setChartData.xAxisColor、 this.setChartData.lineColor、 this.setChartData.grid

Echarts的 配置项 很多，如果想自定义更加个性化的样式，比如多条折线、两个x轴坐标，都可以设置为参数。

GitHub 上已经有达人做了几张图的基本模板 v-charts ，很方便就是可配置项比较少。

chart.vue：

</br>

参考文档：

Echarts 配置项

---