How to introduce echarts in angular4 (code example)

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} 
{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

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!