Angular development (26)-angular set Baidu chart development

main steps of using Baidu chart in angular1. Install the dependency package npm install--save echarts ng2-echarts

2, in the Angular-cli.json configuration

"Scripts": [
   "...] /node_modules/echarts/dist/echarts.min.js "
],

3, in the App.module.ts configuration

Import {ng2echarts} from ' Ng2-echarts ';
...
declarations: [
    ng2echarts
]
...

4. Write the official demo code of Baidu chart in the related components

Public ChartData = {theme: ', event: [{type: ' click ', Cb:function (res) {con
        Sole.log (RES);
      }}], title: {text: ' Site user access source ', Subtext: ' Fictitious ', x: ' Center '}, tooltip: {
      Trigger: ' Item ', formatter: "{A} <br/>{b}: {C} ({d}%)"}, Legend: {Orient: ' vertical ', Left: ' Left ', data: [' Direct access ', ' email marketing ', ' affiliate AD ', ' video ad ', ' Search Engine '}, series: [{name: ' Access source ', type:
        ' Pie ', startangle: -180, Radius: ' 55% ', center: [' 50% ', ' 60% '], data: [{value:335,
      Name: ' Direct Access '}, {value:310, name: ' Mail Marketing '}, {value:234, Name: ' Affiliate AD ' }, {value:135, Name: ' Video ad '}, {value:1548, Name: ' Search Engine '}], ite Mstyle: {emphasis: {shadowblur:10, shadowoffsetx:0, Shadowcolor: ' Rgba (0, 0, 0, 0.5) '}}]}; 

5. Write in the HTML code of the component

<div [ng2-echarts]= "ChartData" style= "height:300px; width:500px; " ></div>