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 onkeydown,onkeyup,onkeypress,onclick,ondblclick
Feb 04 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
Vue.js点击切换按钮改变内容的实例讲解
Aug 22 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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/08 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
jquery网页元素拖拽插件效果及实现
2013/08/05 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
Python单元测试简单示例
2018/07/03 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Keras SGD 随机梯度下降优化器参数设置方式
2020/06/19 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
员工自我鉴定范文
2013/10/06 职场文书
公司管理建议书范文
2014/03/12 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
介绍信的写法
2015/01/31 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android