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

本篇文章给大家带来的内容是关于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 '@angular/core';import { EchartsComponent } from './echarts/echarts.component';import { NgxEchartsModule } from 'ngx-echarts';@NgModule({  imports: [    NgxEchartsModule   ],  declarations: [EchartsComponent],})export class EchartsModule { }

登录后复制

echarts.component.ts

import { Component, OnInit } from '@angular/core';@Component({  selector: 'app-echarts',  templateUrl: './echarts.component.html',  styleUrls: ['./echarts.component.scss']})export class EchartsComponent implements OnInit {  showloading:boolean = true;  constructor() {         setTimeout(()=> {      this.showloading = false;    }, 3000);  }  ngOnInit() {  }  chartOption = {    title: {      text: '堆叠区域图'    },    tooltip: {      trigger: 'axis'    },    legend: {      data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']    },    toolbox: {      feature: {        saveAsImage: {}      }    },    grid: {      left: '3%',      right: '4%',      bottom: '3%',      containLabel: true    },    xAxis: [      {        type: 'category',        boundaryGap: false,        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']      }    ],    yAxis: [      {        type: 'value'      }    ],    series: [      {        name: '邮件营销',        type: 'line',        stack: '总量',        areaStyle: { normal: {} },        data: [120, 132, 101, 134, 90, 230, 210]      },      {        name: '联盟广告',        type: 'line',        stack: '总量',        areaStyle: { normal: {} },        data: [220, 182, 191, 234, 290, 330, 310]      },      {        name: '视频广告',        type: 'line',        stack: '总量',        areaStyle: { normal: {} },        data: [150, 232, 201, 154, 190, 330, 410]      },      {        name: '直接访问',        type: 'line',        stack: '总量',        areaStyle: { normal: {} },        data: [320, 332, 301, 334, 390, 330, 320]      },      {        name: '搜索引擎',        type: 'line',        stack: '总量',        label: {          normal: {            show: true,            position: 'top'          }        },        areaStyle: { normal: {} },        data: [820, 932, 901, 934, 1290, 1330, 1320]      }    ]  }  Baroptions = {    tooltip: {      trigger: 'item',      formatter: "{a} 
{b}: {c} ({d}%)"    },    legend: {      orient: 'vertical',      x: 'left',      data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']    },    series: [      {        name: '访问来源',        type: 'pie',        selectedMode: 'single',        radius: [0, '30%'],        label: {          normal: {            position: 'inner'          }        },        labelLine: {          normal: {            show: false          }        },        data: [          { value: 335, name: '直达', selected: true },          { value: 679, name: '营销广告' },          { value: 1548, name: '搜索引擎' }        ]      },      {        name: '访问来源',        type: 'pie',        radius: ['40%', '55%'],        data: [          { value: 335, name: '直达' },          { value: 310, name: '邮件营销' },          { value: 234, name: '联盟广告' },          { value: 135, name: '视频广告' },          { value: 1048, name: '百度' },          { value: 251, name: '谷歌' },          { value: 147, name: '必应' },          { value: 102, name: '其他' }        ]      }    ]  }  linkoption = {    title: {      text: '懒猫今日访问量'    },    color: ['#3398DB'],    //气泡提示框，常用于展现更详细的数据    tooltip: {      trigger: 'axis',      axisPointer: { // 坐标轴指示器，坐标轴触发有效        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'      }    },    toolbox: {      show: true,      feature: {        //显示缩放按钮        dataZoom: {          show: true        },        //显示折线和块状图之间的切换        magicType: {          show: true,          type: ['bar', 'line']        },        //显示是否还原        restore: {          show: true        },        //是否显示图片        saveAsImage: {          show: true        }      }    },    grid: {      left: '3%',      right: '4%',      bottom: '3%',      containLabel: true    },    xAxis: [{      type: 'category',      data: [21231,1212,21231,3213],      axisTick: {        alignWithLabel: true      },      axisLabel: {        interval: 0,        rotate: 20      },    }],    yAxis: [{      name: "懒猫今日访问量",      type: 'value'    }],    series: [{      name: '今日访问次数',      type: 'bar',      barWidth: '60%',      label: {        normal: {          show: true        }      },      data:[21231,1212,21231,3213]    }]  }  datamapvalue = [       {name: '海门', value: [121.15,31.89,9]},       {name: '鄂尔多斯', value: [109.781327,39.608266,12]},       {name: '招远', value: [120.38,37.35,12]},       {name: '舟山', value: [122.207216,29.985295,12]},       {name: '齐齐哈尔', value: [123.97,47.33,14]},       {name: '盐城', value: [120.13,33.38,15]},       {name: '赤峰', value: [118.87,42.28,16]},       {name: '青岛', value: [120.33,36.07,18]},       {name: '乳山', value: [121.52,36.89,18]},       {name: '金昌', value: [102.188043,38.520089,19]}   ];  mapoption = {    backgroundColor: '#404a59',    title: {      text: '全国主要城市空气质量',      subtext: 'data from PM25.in',      sublink: 'http://www.pm25.in',      left: 'center',      textStyle: {        color: '#fff'      }    },    tooltip: {      trigger: 'item'    },    legend: {      orient: 'vertical',      y: 'bottom',      x: 'right',      data: ['pm2.5'],      textStyle: {        color: '#fff'      }    },    geo: {      map: 'china',      label: {        emphasis: {          show: false        }      },      roam: true,      itemStyle: {        normal: {          areaColor: '#323c48',          borderColor: '#111'        },        emphasis: {          areaColor: '#2a333d'        }      }    },    series: [      {        name: 'pm2.5',        type: 'scatter',        coordinateSystem: 'geo',        data: this.datamapvalue,        symbolSize: function (val) {          return val[2] / 10;        },        label: {          normal: {            formatter: '{b}',            position: 'right',            show: false          },          emphasis: {            show: true          }        },        itemStyle: {          normal: {            color: '#ddb926'          }        }      },      {        name: 'Top 5',        type: 'effectScatter',        coordinateSystem: 'geo',        data: this.datamapvalue,        symbolSize: function (val) {          return val[2] / 10;        },        showEffectOn: 'render',        rippleEffect: {          brushType: 'stroke'        },        hoverAnimation: true,        label: {          normal: {            formatter: '{b}',            position: 'right',            show: true          }        },        itemStyle: {          normal: {            color: '#f4e925',            shadowBlur: 10,            shadowColor: '#333'          }        },        zlevel: 1      }    ]  }}

登录后复制

echarts.component.html

登录后复制

以上就是angular4中引入echarts的方法（代码示例）的详细内容，更多请关注【创想鸟】其它相关文章！