AngularJs实现echarts折线图

AngularJs实现echarts折线图，效果如下：

在线运行

代码明细

controler

准备要填充的data：

    app.controller('lineChart', function ($scope) {
        $scope.data = [
            [1681985820000, '6.47'],
            [1681985880000, '5.66'],
            [1681985940000, '14.18'],
            [1681986000000, '6.31'],
            [1681986060000, '8.31'],
            [1681986120000, '6.37'],
            [1681986180000, '6.37'],
            [1681986240000, '6.31'],
            [1681986300000, '6.03'],
            [1681986360000, '5.71'],
            [1681986420000, '5.23'],
            [1681986480000, '5.84'],
            [1681986540000, '7.75'],
            [1681986600000, '7.18'],
            [1681986660000, '12.05'],
            [1681986720000, '5.98'],
            [1681986780000, '6.16'],
            [1681986840000, '6.78'],
            [1681986900000, '5.57'],
            [1681986960000, '4.46'],
            [1681987020000, '5.81'],
            [1681987080000, '7.41'],
            [1681987140000, '6.44'],
            [1681987200000, '5.30'],
            [1681987260000, '7.99'],
            [1681987320000, '6.69'],
            [1681987380000, '6.45'],
            [1681987440000, '5.98'],
            [1681987500000, '5.50'],
            [1681987560000, '6.02'],
            [1681987620000, '6.39'],
            [1681987680000, '7.85'],
            [1681987740000, '6.50'],
            [1681987800000, '9.12'],
            [1681987860000, '6.73'],
            [1681987920000, '5.38'],
            [1681987980000, '6.89'],
            [1681988040000, '6.34'],
            [1681988100000, '4.99'],
            [1681988160000, '5.83'],
            [1681988220000, '5.73'],
            [1681988280000, '10.77'],
            [1681988340000, '6.90'],
            [1681988400000, '14.42'],
            [1681988460000, '6.38'],
            [1681988520000, '6.57'],
            [1681988580000, '5.98'],
            [1681988640000, '5.41'],
            [1681988700000, '6.93'],
            [1681988760000, '5.56'],
            [1681988820000, '5.35'],
            [1681988880000, '6.54'],
            [1681988940000, '5.80'],
            [1681989000000, '8.90'],
            [1681989060000, '7.32'],
            [1681989120000, '5.49'],
            [1681989180000, '7.59'],
            [1681989240000, '5.98'],
            [1681989300000, '6.62'],
            [1681989360000, '5.13'],
            [1681989420000, '6.59']
        ]
    });

指令

定义一个指令放置line charts：

app.directive('lineChart', function () {
    return {
        scope: {
            id: "@",
            legend: "=",
            data: "="
        },
        restrict: 'E',
        template: '<div id="main" style="height:400px;"></div>',
        replace: true,
        link: function ($scope, element, attrs, controller) {
            console.log($scope.data);
            var option = {
                grid: {
                    left: '1%',
                    right: '1.3%',
                    bottom: '1%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    show: true,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        padding: [10, 17, 0, 0],
                        // 横坐标，将毫秒数转化成 时间 格式化成==>  小时:分钟
                        formatter: function (value, index) {
                            var date = new Date(value);
                            return (
                                ('0' + date.getHours()).slice(-2) +
                                ':' +
                                ('0' + date.getMinutes()).slice(-2)
                            );
                        }
                    },
                    boundaryGap: false,
                    type: 'time',
                    splitNumber: 6
                },
                yAxis: {
                    show: false,
                    axisLine: {
                        //TINY： 坐标轴轴线相关设置。
                        show: false
                    },
                    axisTick: {
                        //TINY： 坐标轴刻度相关设置。
                        show: false
                    },
                    axisLabel: {
                        margin: 0, // TINY：axisLabel.margin与axisLabel。textStyle.align配合起来，设定文本显示在y轴右侧
                        textStyle: {
                            align: 'left', //TINY： axisLabel.margin与axisLabel。textStyle.align配合起来，设定文本显示在y轴右侧
                            baseline: 'bottom' // TINY：设定文本位置，显示在坐标轴刻度之上。 // 注意：这里有修改对应的js代码，实现位置空隙太小
                        }
                    },
                    // max: 100,
                    min: 0
                },
                series: [
                    {
                        type: 'line',
                        showSymbol: false,
                        hoverAnimation: false,
                        lineStyle: {
                            width: 2,
                            color: '#3DCCA6'
                        },
                        smooth: true,
                        areaStyle: {
                            color: '#3DCCA6',
                            opacity: 0.2
                        },
                        data: $scope.data,
                    }
                ]
            };


            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);

            option && myChart.setOption(option);
        }
    };
});

事件

鼠标移入、移出时展示、消除Y轴网格线

chartDom.onmouseover = () => {
    myChart.setOption({
        yAxis: {
            show: true
        },
    });
};
chartDom.onmouseout = () => {
    myChart.setOption({
        yAxis: {
            show: false
        },
    });
};