基于vue 封装echarts 全局组件，柱状图，饼图，折线图

 1.使用npm安装echarts

npm install echarts --save

2.main.js文件下添加

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

3.定义全局公用组件

 

 

4.组件调用Demo

//HeapTest.vue

5.后台数据

export function getDateline() {//获取数据
  mockData.result = {
    nameArray: ['周一', '周二', '周三', '周四', '周五', '周六', '周天'],
    seriesData: [
      {
        type:'bar',
        name: '潜在客户',
        data: [
          { value: 2048, name: "周一" },
          { value: 735, name: "周二" },
          { value: 530, name: "周三" },
          { value: 484, name: "周四" },
          { value: 300, name: "周五" },
          { value: 300, name: "周六" },
          { value: 300, name: "周天" },
        ]
      },
      {
        type: 'line',
        name: '意向客户',
        data: [
          { value: 201, name: "周一" },
          { value: 711, name: "周二" },
          { value: 536, name: "周三" },
          { value: 124, name: "周四" },
          { value: 360, name: "周五" },
          { value: 314, name: "周六" },
          { value: 236, name: "周天" },
        ]
      },
      {
        type: 'bar',
        name: '预购客户',
        data: [
          { value: 150, name: "周一" },
          { value: 232, name: "周二" },
          { value: 201, name: "周三" },
          { value: 154, name: "周四" },
          { value: 190, name: "周五" },
          { value: 250, name: "周六" },
          { value: 410, name: "周天" },
        ]
      },
      {
        type: 'line',
        name: '成交客户',
        data: [
          { value: 320, name: "周一" },
          { value: 332, name: "周二" },
          { value: 301, name: "周三" },
          { value: 334, name: "周四" },
          { value: 390, name: "周五" },
          { value: 330, name: "周六" },
          { value: 320, name: "周天" },
        ]
      },
      {
        type: 'bar',
        name: '维护客户',
        data: [
          { value: 820, name: "周一" },
          { value: 932, name: "周二" },
          { value: 901, name: "周三" },
          { value: 934, name: "周四" },
          { value: 1290, name: "周五" },
          { value: 1330, name: "周六" },
          { value: 1320, name: "周天" },
        ]
      },
    ],
  }
  return new Promise(resolve => {
    resolve(mockData)
  })
}

6.效果展示