本篇文章给大家带来的内容是关于angular4中引入echarts的方法（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1、安装ngx-echarts
npm install echarts --save
npm install ngx-echarts --save
2.在项目中引入echarts
Mfkiqpl旅行社旅游线路预订程序
下载
升级报告：增加动态新闻功能后台添加，删除，编辑，支持UBB代码，支持上传片及文件。 增加我要入团功能散客可以自由选择加入贵社最近要出发的团队。 增加线路置顶功能置顶后的线路永远显示在最前面。 增加同行报价功能管理员在后台添加同行用户，同行用户登录后可查看贵社线路对同行的报价。同行报价在添加线路中一并添加。（感谢网友拽哥提出修改意见） 增加更多线路显示的分页功能方便大型旅行社由于线路过多而引起的部分
//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
