默认option指令:

    <chart-line option="chartLineOption"></chart-line>
    【必写属性】默认option,参数有限,配置简单

scope中的数据:

    $scope.option = {
        title: '访问来源统计',                                          // 标题
        xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //【必填】x轴数值
        series: [{
            name: '直接访问',
            data: [100, 332, 301, 334, 390, 330, 320]
        }, {
            name: '搜索引擎',
            data: [200, 100, 901, 934, 1290, 1330, 1320]
        }],
        backgroundColor: '#f5f5f5',                                   // 背景颜色,默认无背景色
        saveAsImage: false                                            // 是否显示"保存为图片"
    };


增强option指令: <chart-line option="chartLineOption" origin="true"></chart-line> origin="true": option可以是echarts line支持的所有属性 scope中的数据: 参考官方文档
响应点击事件指令: <chart-line option="chartLineOption" line-click="onLineClick();" output-data="nodeInfo"></chart-line> line-click="onLineClick();":自定义点击事件 output-data="nodeInfo":【必写属性】点击处的数据 scope中的数据: $scope.onLineClick = function(){ console.table($scope.nodeInfo); }

如果legend数据太长导致内容重叠,提供三种建议方案: 方案1. 增加图表显示区域的宽高; 方案2. 将origin置为true,通过更全的参数调整渲染布局; 方案3. 将legend隐藏,在图标DOM旁边自定义legendDOM。