angular4中引入echarts的方法示例


Posted in Javascript onJanuary 29, 2019

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

}

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 #Javascript
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
vue.js仿hover效果的实现方法示例
Jan 28 #Javascript
You might like
php轻松实现中英文混排字符串截取
2014/05/28 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
利用js实现前后台传送Json的示例代码
2018/03/29 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
高效使用Python字典的清单
2018/04/04 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
实习教师自我鉴定
2013/09/27 职场文书
生产副总岗位职责
2013/11/28 职场文书
技术总监岗位职责
2013/12/05 职场文书
应聘面试自我评价
2014/01/24 职场文书
八一慰问活动方案
2014/02/07 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
庆元旦迎新年广播稿
2014/02/18 职场文书
大学生党员承诺书
2014/05/20 职场文书
2014国庆节标语口号
2014/09/19 职场文书
高中生旷课检讨书
2014/10/08 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
委托书的样本
2015/01/28 职场文书
python删除csv文件的行列
2021/04/06 Python
简单聊聊Vue中的计算属性和属性侦听
2021/10/05 Vue.js
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS