Using echarts, in angular6 says that options cannot be bound.

when using echarts, install and configure it according to the instructions of the official documentation. When binding on html after completion, you will report an error:
ng: Can"t bind to "options" since it isn"t a known property of" div".

:
tsconfig.ts

package.json

Code:
html:
< div echarts [options] = "options" style= "height: 10remt; width: 100%;" > < / div >
ts:

import {Component} from"@ angular/core";

@ Component ({
selector: "app-login",
templateUrl:". / login.component.html",
styleUrls: [". / login.component.scss"]
})

export class LoginComponent implements OnInit {

options: any;

constructor (private router: Router,

          private render: Renderer2,
          public auth: AuthService,
          public message: AlertMessageService) {

}
ngOnInit () {

const data = [["2018-09-01", 0.998], ["2018-09-02", 0.995], ["2018-09-03", 0.899], ["2018-09-04", 0.968],
  ["2018-09-05", 1.025], ["2018-09-06", 1.051], ["2018-09-07", 1.230], ["2018-09-08", 0.958], ["2018-09-09", 0.852],
  ["2018-09-10", 0.846], ["2018-09-11", 0.999], ["2018-09-12", 1.000], ["2018-09-13", 1.023], ["2018-09-14", 1.5]];

const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});

this.options = {

  // Make gradient line here

  title: {
    left: "center",
    text: "",
  },
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    data: dateList
  },
  yAxis: {
    splitLine: {show: false}
  },
  series: {
    type: "line",
    showSymbol: true,
    data: valueList
  }
};

}
}

}