angular6项目中使用echarts图表的方法(有一个坑,引用报错)
1、安装相关依赖(采用的webpack)
npm install ecahrts --save
npm install ngx-echarts --save
2、angular.json 配置echarts路径
"scripts": [
"node_modules/echarts/dist/echarts.min.js",
"node_modules/echarts/map/js/china.js",
"node_modules/echarts/dist/extension/bmap.js"
]
3*、module文件中导入NgxEchartsModule模块,一般都是全局使用,放到项目中的共有模块中,因为并不是其他的每个模块都会用到echarts,所以放到app.module.ts文件下并不是最佳的实践方式。在项目中单独创建一个共享shared.module,在使用的component中引用即可。但是,使用公共module时,必须加入exports中,否则报错!
/**share.module.ts**/
import {NgxEchartsModule} from 'ngx-echarts';
...
imports: [
...,
NgxEchartsModule,
...
],
exports: [
...,
NgxEchartsModule
, ...
]
4、
在对应的模板文件中如此使用
options = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
<div echarts [options]="options" class="main-chart"></div>
angular6项目中使用echarts图表的方法(有一个坑,引用报错)的更多相关文章
- VS项目中使用Nuget还原包后编译生产还一直报错?
Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...
- 再eclipse的javaweb项目中添加JQuery文件时jquery-2.1.4.min.js报错
解决方法: eclipse导入jquery包后报错,下面有个不错的解决方法,需要的朋友可以参考下 eclipse导入jquery包后报错,处理步骤如下: 1.打开项目.project文件,去掉如下内容 ...
- Vue项目中使用webpack配置了别名,引入的时候报错
chainWebpack(config) { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/as ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- 在react项目中使用ECharts
这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...
- 在vue项目中封装echarts的正确姿势
为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...
- C#WinForm应用程序中嵌入ECharts图表
C#WinForm应用程序中嵌入ECharts图表 程序运行效果: 下载ECharts: 官网下载ECharts :http://echarts.baidu.com/download.html 或者直 ...
- SuperDiamond在JAVA项目中的三种应用方法实践总结
SuperDiamond在JAVA项目中的三种应用方法实践总结 1.直接读取如下: @Test public static void test_simple(){ PropertiesConfigur ...
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
C#编译器优化那点事 使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...
随机推荐
- [Xcode 实际操作]三、视图控制器-(8)在Storyboard中设置初始化视图控制器
目录:[Swift]Xcode实际操作 本文将演示如何设置故事板的初始视图控制器. 打开自动生成的默认故事板[Main.storyboard] 在打开的故事板中,系统已经生成了一个空白的视图控制器. ...
- react native 安卓生产包无法获取线上数据
android:usesCleartextTraffic="true"
- 论js里面的for循环
首先搞懂执行的顺序: 对,执行顺序就是这样的. for循环的作用: 1.在编写代码时,你常常希望反复执行同一段代码. 2.遍历数组,可以用forEach();对于DOM对象(nodelist)的话,比 ...
- Gradle 安装(Windows)
一.Gradle 简介 1.1 什么是 Gradle? Gradle 是一个基于 Apache Ant 和 Apache Maven 概念的 项目自动化构建开源工具.它使用一种基于Groovy的D ...
- Active Domain中的用户属性
/// <summary> /// AD中的属性,没有出现的后续接着补充 /// </summary> public class LdapUserEntryProperty { ...
- C# AD 验证登陆
using System.DirectoryServices; using System.DirectoryServices.AccountManagement; using (DirectoryEn ...
- Java中如何实现代理机制(JDK动态代理和cglib动态代理)
http://blog.csdn.net/skiof007/article/details/52806714 JDK动态代理:代理类和目标类实现了共同的接口,用到InvocationHandler接口 ...
- (转)linux内核参数注释与优化
linux内核参数注释与优化 原文:http://blog.51cto.com/yangrong/1321594 http://oldboy.blog.51.cto.com/2561410/13364 ...
- electron 开发记录
判断是否开发环境 安装 electron-is-dev npm install electron-is-dev // main.js const isDev = require('electron-i ...
- 多个activity之间的数据共享
Activity之间的数据共享问题起初一看并没有那么纠结,原因在于两点,一来两个Activity之间可以通过回传的方式进行数据的共享,而哪怕是多个Activity之间,也可以通过静态类进行数据的共享. ...