组件路径

src\components\Common\lineChart.vue

效果

使用方法

<template>
    <line-chart :option="option"></line-chart>
</template>
<script>
    import LineChart from '../../../Common/lineChart.vue'

    export default {
        data() {
            return {
                option: [
                  {
                    title: '新增合伙人统计（人）',
                    date: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07'],
                    data: ['100', '20', '50', '30', '80', '20', '70'],
                    name: '合伙人（人）'
                  },
                  {
                    title: '新增订单统计（笔）',
                    date: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07'],
                    data: ['100', '20', '505', '30', '80', '20', '70'],
                    name: '订单（笔）'
                  },
                  {
                    title: '合伙人交易额（元）',
                    date: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07'],
                    data: ['100', '240', '50', '30', '220', '20', '70'],
                    name: '交易额（元）'
                  },
                  {
                    title: '合伙人每日佣金（元）',
                    date: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07'],
                    data: ['50', '20', '50', '20', '10', '20', '70'],
                    name: '佣金（元）'
                  }
                ]
            }
        },
        components: {
          'line-chart': LineChart
        }
    }
</script>

data

option: [                       //数组，用于存放echart配置数据，需要几个线图就传几个child
    {
        //标题
        title: '合伙人交易额（元）',
        //X轴列表数据，        
        date: ['2017-05-01', '2017-05-02', '2017-05-03', '2017-05-04', '2017-05-05', '2017-05-06', '2017-05-07'],
        //折线数据
        data: ['100', '240', '50', '30', '220', '20', '70'],
        //Y轴名称
        name: '交易额（元）'

    }
]