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 相关文章推荐
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
node.js中的http.response.writeHead方法使用说明
Dec 14 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
js中this对象用法分析
Jan 05 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP中strtotime函数使用方法详解
2011/11/27 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
JS实现购物车基本功能
2020/11/08 Javascript
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python实现LRU热点缓存及原理
2019/10/29 Python
基于pandas中expand的作用详解
2019/12/17 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
写给女朋友的道歉信
2014/01/08 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
2014年教师节寄语
2014/08/11 职场文书
优质护理服务心得体会
2016/01/22 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python