angular4中引入echarts的方法（代码示例）

1、安装ngx-echarts

npm install echarts --save

npm install ngx-echarts --save

2.在项目中引入echarts

//angular-cli.json文件

{
    "apps": [{
        "scripts":[
            "../node_modules/echarts/dist/echarts.min.js",
            "../node_modules/echarts/map/js/china.js",
            "../node_modules/echarts/dist/extension/bmap.js"
        ]
    }]
}

3.使用 在你真正需要使用echarts指令的module中import NgxEchartsModule
echarts.module.ts

import { NgModule } from &＃39;@angular/core&＃39;;
import { EchartsComponent } from &＃39;./echarts/echarts.component&＃39;;
import { NgxEchartsModule } from &＃39;ngx-echarts&＃39;;

@NgModule({
  imports: [
    NgxEchartsModule 
  ],
  declarations: [EchartsComponent],
})
export class EchartsModule { }

echarts.component.ts

import { Component, OnInit } from &＃39;@angular/core&＃39;;

@Component({
  selector: &＃39;app-echarts&＃39;,
  templateUrl: &＃39;./echarts.component.html&＃39;,
  styleUrls: [&＃39;./echarts.component.scss&＃39;]
})
export class EchartsComponent implements OnInit {
  showloading:boolean = true;

  constructor() { 
    
    setTimeout(()=> {
      this.showloading = false;
    }, 3000);
  }

  ngOnInit() {
  }

  chartOption = {
    title: {
      text: &＃39;堆叠区域图&＃39;
    },
    tooltip: {
      trigger: &＃39;axis&＃39;
    },
    legend: {
      data: [&＃39;邮件营销&＃39;, &＃39;联盟广告&＃39;, &＃39;视频广告&＃39;, &＃39;直接访问&＃39;, &＃39;搜索引擎&＃39;]
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    grid: {
      left: &＃39;3%&＃39;,
      right: &＃39;4%&＃39;,
      bottom: &＃39;3%&＃39;,
      containLabel: true
    },
    xAxis: [
      {
        type: &＃39;category&＃39;,
        boundaryGap: false,
        data: [&＃39;周一&＃39;, &＃39;周二&＃39;, &＃39;周三&＃39;, &＃39;周四&＃39;, &＃39;周五&＃39;, &＃39;周六&＃39;, &＃39;周日&＃39;]
      }
    ],
    yAxis: [
      {
        type: &＃39;value&＃39;
      }
    ],
    series: [
      {
        name: &＃39;邮件营销&＃39;,
        type: &＃39;line&＃39;,
        stack: &＃39;总量&＃39;,
        areaStyle: { normal: {} },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: &＃39;联盟广告&＃39;,
        type: &＃39;line&＃39;,
        stack: &＃39;总量&＃39;,
        areaStyle: { normal: {} },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: &＃39;视频广告&＃39;,
        type: &＃39;line&＃39;,
        stack: &＃39;总量&＃39;,
        areaStyle: { normal: {} },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: &＃39;直接访问&＃39;,
        type: &＃39;line&＃39;,
        stack: &＃39;总量&＃39;,
        areaStyle: { normal: {} },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: &＃39;搜索引擎&＃39;,
        type: &＃39;line&＃39;,
        stack: &＃39;总量&＃39;,
        label: {
          normal: {
            show: true,
            position: &＃39;top&＃39;
          }
        },
        areaStyle: { normal: {} },
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  }

  BaroptiOns= {
    tooltip: {
      trigger: &＃39;item&＃39;,
      formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
      orient: &＃39;vertical&＃39;,
      x: &＃39;left&＃39;,
      data: [&＃39;直达&＃39;, &＃39;营销广告&＃39;, &＃39;搜索引擎&＃39;, &＃39;邮件营销&＃39;, &＃39;联盟广告&＃39;, &＃39;视频广告&＃39;, &＃39;百度&＃39;, &＃39;谷歌&＃39;, &＃39;必应&＃39;, &＃39;其他&＃39;]
    },
    series: [
      {
        name: &＃39;访问来源&＃39;,
        type: &＃39;pie&＃39;,
        selectedMode: &＃39;single&＃39;,
        radius: [0, &＃39;30%&＃39;],

        label: {
          normal: {
            position: &＃39;inner&＃39;
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: [
          { value: 335, name: &＃39;直达&＃39;, selected: true },
          { value: 679, name: &＃39;营销广告&＃39; },
          { value: 1548, name: &＃39;搜索引擎&＃39; }
        ]
      },
      {
        name: &＃39;访问来源&＃39;,
        type: &＃39;pie&＃39;,
        radius: [&＃39;40%&＃39;, &＃39;55%&＃39;],

        data: [
          { value: 335, name: &＃39;直达&＃39; },
          { value: 310, name: &＃39;邮件营销&＃39; },
          { value: 234, name: &＃39;联盟广告&＃39; },
          { value: 135, name: &＃39;视频广告&＃39; },
          { value: 1048, name: &＃39;百度&＃39; },
          { value: 251, name: &＃39;谷歌&＃39; },
          { value: 147, name: &＃39;必应&＃39; },
          { value: 102, name: &＃39;其他&＃39; }
        ]
      }
    ]
  }



  linkoption = {
    title: {
      text: &＃39;懒猫今日访问量&＃39;
    },
    color: [&＃39;#3398DB&＃39;],
    //气泡提示框，常用于展现更详细的数据
    tooltip: {
      trigger: &＃39;axis&＃39;,
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: &＃39;shadow&＃39; // 默认为直线，可选为：&＃39;line&＃39; | &＃39;shadow&＃39;
      }
    },
    toolbox: {
      show: true,
      feature: {
        //显示缩放按钮
        dataZoom: {
          show: true
        },
        //显示折线和块状图之间的切换
        magicType: {
          show: true,
          type: [&＃39;bar&＃39;, &＃39;line&＃39;]
        },
        //显示是否还原
        restore: {
          show: true
        },
        //是否显示图片
        saveAsImage: {
          show: true
        }
      }
    },
    grid: {
      left: &＃39;3%&＃39;,
      right: &＃39;4%&＃39;,
      bottom: &＃39;3%&＃39;,
      containLabel: true
    },
    xAxis: [{
      type: &＃39;category&＃39;,
      data: [21231,1212,21231,3213],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        rotate: 20
      },
    }],
    yAxis: [{
      name: "懒猫今日访问量",
      type: &＃39;value&＃39;
    }],
    series: [{
      name: &＃39;今日访问次数&＃39;,
      type: &＃39;bar&＃39;,
      barWidth: &＃39;60%&＃39;,
      label: {
        normal: {
          show: true
        }
      },
      data:[21231,1212,21231,3213]
    }]
  }


  datamapvalue = [
       {name: &＃39;海门&＃39;, value: [121.15,31.89,9]},
       {name: &＃39;鄂尔多斯&＃39;, value: [109.781327,39.608266,12]},
       {name: &＃39;招远&＃39;, value: [120.38,37.35,12]},
       {name: &＃39;舟山&＃39;, value: [122.207216,29.985295,12]},
       {name: &＃39;齐齐哈尔&＃39;, value: [123.97,47.33,14]},
       {name: &＃39;盐城&＃39;, value: [120.13,33.38,15]},
       {name: &＃39;赤峰&＃39;, value: [118.87,42.28,16]},
       {name: &＃39;青岛&＃39;, value: [120.33,36.07,18]},
       {name: &＃39;乳山&＃39;, value: [121.52,36.89,18]},
       {name: &＃39;金昌&＃39;, value: [102.188043,38.520089,19]}
   ];


  mapoption = {
    backgroundColor: &＃39;#404a59&＃39;,
    title: {
      text: &＃39;全国主要城市空气质量&＃39;,
      subtext: &＃39;data from PM25.in&＃39;,
      sublink: &＃39;http://www.pm25.in&＃39;,
      left: &＃39;center&＃39;,
      textStyle: {
        color: &＃39;#fff&＃39;
      }
    },
    tooltip: {
      trigger: &＃39;item&＃39;
    },
    legend: {
      orient: &＃39;vertical&＃39;,
      y: &＃39;bottom&＃39;,
      x: &＃39;right&＃39;,
      data: [&＃39;pm2.5&＃39;],
      textStyle: {
        color: &＃39;#fff&＃39;
      }
    },
    geo: {
      map: &＃39;china&＃39;,
      label: {
        emphasis: {
          show: false
        }
      },
      roam: true,
      itemStyle: {
        normal: {
          areaColor: &＃39;#323c48&＃39;,
          borderColor: &＃39;#111&＃39;
        },
        emphasis: {
          areaColor: &＃39;#2a333d&＃39;
        }
      }
    },
    series: [
      {
        name: &＃39;pm2.5&＃39;,
        type: &＃39;scatter&＃39;,
        coordinateSystem: &＃39;geo&＃39;,
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        label: {
          normal: {
            formatter: &＃39;{b}&＃39;,
            position: &＃39;right&＃39;,
            show: false
          },
          emphasis: {
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: &＃39;#ddb926&＃39;
          }
        }
      },
      {
        name: &＃39;Top 5&＃39;,
        type: &＃39;effectScatter&＃39;,
        coordinateSystem: &＃39;geo&＃39;,
        data: this.datamapvalue,
        symbolSize: function (val) {
          return val[2] / 10;
        },
        showEffectOn: &＃39;render&＃39;,
        rippleEffect: {
          brushType: &＃39;stroke&＃39;
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: &＃39;{b}&＃39;,
            position: &＃39;right&＃39;,
            show: true
          }
        },
        itemStyle: {
          normal: {
            color: &＃39;#f4e925&＃39;,
            shadowBlur: 10,
            shadowColor: &＃39;#333&＃39;
          }
        },
        zlevel: 1
      }
    ]
  }

}

echarts.component.html

以上就是angular4中引入echarts的方法（代码示例）的详细内容，更多请关注 第一PHP社区 其它相关文章！