Angular8引入百度Echarts进行图表分析的实现代码

最近突发奇想，想自己做一个理财分析记录的网页，主要给自己记账，然后想到了把每天，每周的消费用图标分析出来，于是就需要用到百度的echarts图标插件，talk is cheep， show me the code。

1. npm 安装ngx-echarts及相关的依赖

npm install echarts -S
npm install ngx-echarts -S
npm install @types/echarts -D

2. 添加js引导文件

{
 "scripts": [
  "../node_modules/echarts/dist/echarts.min.js" // or echarts.js for debug purpose
 ],
}

3. AppModule引入NgxEchartsModule

这里有个坑，记得在你调用了echarts的相关模块的Module里面引入NgxEchartsModule，不然会报错：Template parse errors: Can't bind to 'options' since it isn't a known property of 'div'.所以切记

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
 imports: [
  ...,
  NgxEchartsModule
 ],
 ...
})
export class AppModule { }

4. 使用echarts

html

<div echarts [options]="chartOption" class="demo-chart"></div>

scss

.demo-chart {
 height: 400px;
}

component

import { EChartOption } from 'echarts';
chartOption: EChartOption = {
 xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
 },
 yAxis: {
  type: 'value'
 },
 series: [{
  data: [820, 932, 901, 934, 1290, 1330, 1320],
  type: 'line'
 }]
}

5. 参考网站

https://www.npmjs.com/package/ngx-echarts
angular echarts 在线模板

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angular4中引入echarts的方法示例

    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

  • Angular2.0/4.0 使用Echarts图表的示例代码

    Angular2.0/4.0 使用Echarts图表的示例代码

    前言:在开发中现在需要使用echarts来制作图标,所以就在网络上各种找资料,最后发现ngx-echarts轮子可用.那么就走一波. 方式: 使用echarts和ngx-eachrts两个依赖,借助于ngx..,是因为echarts是基于js编写,没有ts文件.所以就使用ngx-echarts来使用即可. 第一步:安装依赖 npm install echarts --save npm install ngx-echarts --save 第二步:在Module中引入 import { NgxEc

  • Angular8引入百度Echarts进行图表分析的实现代码

    最近突发奇想,想自己做一个理财分析记录的网页,主要给自己记账,然后想到了把每天,每周的消费用图标分析出来,于是就需要用到百度的echarts图标插件,talk is cheep, show me the code. 1. npm 安装ngx-echarts及相关的依赖 npm install echarts -S npm install ngx-echarts -S npm install @types/echarts -D 2. 添加js引导文件 { "scripts": [ &qu

  • 利用百度echarts实现图表功能简单入门示例【附源码下载】

    利用百度echarts实现图表功能简单入门示例【附源码下载】

    本文实例讲述了利用百度echarts实现图表功能.分享给大家供大家参考,具体如下: 百度有一款开源的图表控件,号称是大数据时代最好的图表控件.刚好目前的项目需要用图表展示给客户看数据,所以就选择这个三方的控件.对这种控件一般来说使用起来应该没有太大的难度,基本就是按照它的规则组装json数据,关键是配置上面, 如果刚开始入门,不太懂,可能真要花点时间来搞的.我整理了一个最基本的入门例子,里面有详细的注释,按这种方式去加载相关 js 就没有问题了: <!DOCTYPE html> <hea

  • React Native使用百度Echarts显示图表的示例代码

    React Native使用百度Echarts显示图表的示例代码

    Echarts是百度推出的免费开源的图表组件,功能丰富,涵盖各行业图表.相信很多同学在网页端都使用过.今天我就来介绍下在React Native中如何使用Echarts来显示各种图表. 首先需要在我们的React Native项目中安装native-echarts组件,该组件是兼容IOS和安卓双平台的. 安装 npm install native-echarts --save 安装完成后在node_modules文件夹下会多出一个文件夹叫native-echarts. 目录结构如下图所示: 基础

  • JavaScript使用百度ECharts插件绘制饼图操作示例

    JavaScript使用百度ECharts插件绘制饼图操作示例

    本文实例讲述了JavaScript使用百度ECharts插件绘制饼图操作.分享给大家供大家参考,具体如下: 百度ECharts是一款由百度前端团队开发与维护的,基于HTML5的开源JavaScript图表库.E是Enterprise的简称,意思是商业级数据图表. 本文简述使用ECharts绘制饼图(Pie Chart)的过程,下图为使用ECharts绘制的饼图实例. 首先需要在页面中新建<script>标签,引入符合AMD规范的加载器,如esl.js 关于AMD规范的详细介绍,可以参考阮一峰的

  • Vue2 使用 Echarts 创建图表实例代码

    在后台管理系统中,图表是一个很普遍的元素.目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm install echarts -S 和之前介绍的 axios 类似,echarts 也不能通过 Vue.use() 进行全局调用 通常是在需要使用图表的 .vue 文件中直接引入 import echarts from 'echarts' 也可以在 main

  • 详解android与百度echarts项目整合方法

    百度echarts是一个很不错的图表项目,效果很绚丽. 用起来也不知很繁琐. 这里主要说在android项目中的整合. 1.项目整合,这个地方我是一个已经在使用的项目中整合的例子. 用的就不是android studio而是eclipse. 我只截取部分结构. 2.下载位置如图. (建议下个完全的.就是倒数第二个.就是"完整"这个) 3.可以选择部分组件进行打包成js文件下载. 4.这个地方要注意主题和组件是分开的. 5.下载下来的文件是这个样子的. 6.调用原理很简单. WebVie

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    html中: <div class="charts1"/> <div class="charts2"/> <div class="charts3"/> <div class="charts4"/> <div class="charts5"/> <div class="charts6"/> <div class=

  • ECharts多图表联动功能的实现过程

    ECharts多图表联动功能的实现过程

    当需要展示的数据比较多时,放在一个图表进行展示的效果并不佳,此时,可以考虑使用两个图表进行联动展示. ECharts提供了多图表联动(connect)的功能,连接的多个图表可以共享组件事件并实现保存图片时的自动拼接.多图表联动支持直角系下tooltip的联动 实现EChart中的多图表联动,可以使用以下两种方法. (1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时,传入group值,从而使用多个ECharts对象建立联动关系,格式如下.

  • Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解

    目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,

  • 详解vue.js下引入百度地图jsApi的两种方法

    前言 今天有个项目需要用到百度地图,一般我们在移动端使用百度地图,都是直接通过这样的方式,直接引入百度地图的jsApi. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D9b45bc6f98deafc489e9ac1bc7f7612"></script> 这种方法的原理,就是直接给全局widow对象添加一个BMap对象,从而可以使我们

随机推荐