vue echarts3

安装echarts

cnpm install --save vue-echarts-v3

新建一个一个通用的折线图组件  line.vue

<template>
    <div id="line">
    	<IEcharts :option="line" :style="style"></IEcharts>
    </div>
</template>

<script>
import IEcharts from 'vue-echarts-v3' // 导入IEcharts组件
export default {
  props: {
    obj: null
  },
  data () {
    return {
      line: {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: { // 横坐标
          boundaryGap: false,
          data: this.obj.xAxis // 横坐标数据
        },
        yAxis: { // 纵坐标
        },
        series: [
          {
            name: '查询条数',
            type: 'line', // 图表类型
            data: this.obj.series // 纵坐标数据
          }
        ]
      },
      style: 'width:890px;height:500px;'
    }
  },
  components: {
    IEcharts// 声明组件
  }
}
</script>

父页面使用

<template>
<!--  :obj向子页面传值-->
  <detailedAll :obj="data"></detailedAll>
</template>

<script>
import line from '@/components/echarts/line.vue' // 引用line
export default {
  data () {
    return {
      data: null
    }
  },
  methods: {
// 图表
    detailedtab () {
      let that = this
      that.data = null
      let params = {}
      that.$api.get('###', params, function (req) {
        that.data = req.content
      })
    }
  },
  components: {
    detailedAll: line // 自定义组件
  }
}
</script>