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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论