The content of this article is about the method (code example) of introducing echarts in angular4. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Install ngx-echarts
npm install echarts --save
npm install ngx-echarts --save
2.Introduce it into the project 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. Use 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
}
]
}
}in the module where you really need to use the echarts directive. 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>
The above is the detailed content of How to introduce echarts in angular4 (code example). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
