angularjs引入echarts包_angular4中引入

这篇文章主要介绍了Echarts基本用法，详解的介绍了Echarts的基本用法和实例，有兴趣的可以了解一下echarts太完美了：1，开源软件，无私的为我们提供漂亮的图形界面；2，使用简单...

本篇文章给大家带来的内容是关于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.tsimport { 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.tsimport { 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