angular中使用echarts （echarts 小入门）

angular + echarts 使用

• 首先在你的index页面通过script标签把echarts引入到你的项目。（下载和引入方式不限官方包括了官网下载，github，npm下载npm install echarts --save，我这里用的最简单的script标签）。如下代码：
  <script type="text/javascript"src="vendor/echarts3.0/echarts.min.js"></script>
你也可以引入cdn：https://cdnjs.com/libraries/echarts 该页面有详细cdn列表。
• 第二你需要一个echarts容器
  <div id="chartTask" style="width: 900px;height:400px;"></div>
• 初始化echarts 一般情况下数据都是在请求回来之后进行初始化
  接下来可以直接分三步初始化，配置项，初始化配置项。

var myEchart = echart.init(document.getElementById(chartTask));
var option = {};
myChart.setOption(option);

当你使用的配置项是相同的时候，你可以把option提出来写成函数放在unity.js(公共方法）里面。如果你的数据是请求回来的那么最好把charts的初始化放在回调函数里面否则获取不到正确的数据，option会报错 nodeName

var task_chart_psnr = echarts.init($('#chartTask')[0]);
//res_data是我的数据，task_chart_data是我用来设置配置项的公共函数。
var task_chart_psnr_option = line_option($scope.res_data, 'psnr');
task_chart_psnr.setOption(task_chart_psnr_option);

配置option函数

function line_option(data) {
    var option = {
        title: {
            text: data.text
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: data.line_name
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            left: 'right',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '0'
        }, {
            type: 'inside'
        }],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.x_data
        },
        yAxis: {
            type: 'value'
        },
        series: data.series
    };
    return option;
}