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 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
js只执行1次的函数示例
Jul 20 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 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下使用curl模拟用户登陆的代码
2010/09/10 PHP
详细解读PHP中接口的应用
2015/08/12 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
Python编程中对文件和存储器的读写示例
2016/01/25 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python pandas cumsum求累计次数的用法
2019/07/29 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
教师自我鉴定范文
2014/03/20 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
四风查摆剖析材料
2014/10/10 职场文书
行政处罚告知书
2015/07/01 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL