本篇文章给大家带来的内容是关于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} <br/>{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
<div echarts [options] = "chartoption" [loading]="showloading" class="demo-chart"></div> <div echarts [options] = "baroptions" [loading]="showloading" class="demo-chart"></div> <div echarts [options] = "linkoption" [loading]="showloading" class="demo-chart"></div> <div echarts [options] = "mapoption" [loading]="showloading" class="demo-chart"></div>
以上就是angular4中引入echarts的方法（代码示例）的详细内容。