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