angular4中引入echarts的方法示例
更新时间：2019年01月29日 08:28:38 作者：Zitming
这篇文章主要介绍了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}
{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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了AngularJS删除路由中的#符号的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
本篇文章主要介绍了详解AngularJS 模块化，模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁。有兴趣的可以了解一下2017-06-06
这篇文章主要给大家介绍了关于Angular4实现图片上传预览路径不安全问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧。2017-12-12
这篇文章主要为大家介绍了Angular Tree Shaking优化机制原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
AngularJs bootstrap搭载前台框架——基础页面
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下2016-09-09
AngularJS 文件上传控件 ng-file-upload详解
这篇文章主要介绍了AngularJS 文件上传控件 ng-file-upload详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解
这篇文章主要给大家介绍了关于Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法，文中介绍了两个解决方法，大家可以选择使用，需要的朋友可以参考借鉴，下面来一起看看吧。2018-04-04
Angular.js前台传list数组由后台spring MVC接收数组示例代码
这篇文章主要给大家介绍了关于Angular.js前台传list数组之后，由后台spring MVC接收数组的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
这篇文章主要介绍了AngularJS实现图片上传和预览功能的方法,结合HTML5实例形式对比分析了AngularJS图片上传的相关操作技巧与注意事项,需要的朋友可以参考下2017-11-11
Angular组件库ng-zorro-antd实现radio单选框选择
这篇文章主要为大家介绍了Angular组件库ng-zorro-antd实现radio单选框取消选择实现问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最新评论