方式一、在webpack中使用ECharts

1、npm安装ECharts

  1. npm install echarts --save

2、引入ECharts

通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require('echarts') 得到 ECharts。

  1. var echarts = require('echarts');
  2.  
  3. // 基于准备好的dom，初始化echarts实例
  4. var myChart = echarts.init(document.getElementById('main'));
  5. // 绘制图表
  6. myChart.setOption({
  7.     title: {
  8.         text: 'ECharts 入门示例'
  9.     },
  10.     tooltip: {},
  11.     xAxis: {
  12.         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  13.     },
  14.     yAxis: {},
  15.     series: [{
  16.         name: '销量',
  17.         type: 'bar',
  18.         data: [, , , , , ]
  19.     }]
  20. });
  1. <div id="main" style="width: 100%;height:400px;"></div>

方式二、单文件引入

1、获取ECharts

2、引入ECharts

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <!-- 引入 ECharts 文件 -->
  6.     <script src="./assets/js/echarts.min.js"></script>
  7. </head>
  8. </html>

3、获取一个图表

  1. <body>
  2.     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  3.     <div id="main" style="width: 600px;height:400px;"></div>
  4. </body>

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>ECharts</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="echarts.min.js"></script>
  8. </head>
  9. <body>
  10.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  11.     <div id="main" style="width: 600px;height:400px;"></div>
  12.     <script type="text/javascript">
  13.         // 基于准备好的dom，初始化echarts实例
  14.         var myChart = echarts.init(document.getElementById('main'));
  15.  
  16.         // 指定图表的配置项和数据
  17.         var option = {
  18.             title: {
  19.                 text: 'ECharts 入门示例'
  20.             },
  21.             tooltip: {},
  22.             legend: {
  23.                 data:['销量']
  24.             },
  25.             xAxis: {
  26.                 data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  27.             },
  28.             yAxis: {},
  29.             series: [{
  30.                 name: '销量',
  31.                 type: 'bar',
  32.                 data: [, , , , , ]
  33.             }]
  34.         };
  35.  
  36.         // 使用刚指定的配置项和数据显示图表。
  37.         myChart.setOption(option);
  38.     </script>
  39. </body>
  40. </html>

查看：ECharts网站地址

关于将ECharts引入到项目中的几种方式的更多相关文章

  1. SuperDiamond在JAVA项目中的三种应用方法实践总结

    SuperDiamond在JAVA项目中的三种应用方法实践总结 1.直接读取如下: @Test public static void test_simple(){ PropertiesConfigur ...

  2. Oracle 项目中 SQL 脚本更新方式

    DECLARE hasVersion ); dbVersion ); BEGIN ) INTO hasVersion FROM ELB_SETTINGS E WHERE E.KEY='dbVersio ...

  3. maven 引入外部jar包的几种方式（转）

    原文链接: maven 引入外部jar包的几种方式 方式1:dependency 本地jar包 <dependency> <groupId>com.hope.cloud< ...

  4. 【转载】C#批量插入数据到Sqlserver中的三种方式

    引用:https://m.jb51.net/show/99543 这篇文章主要为大家详细介绍了C#批量插入数据到Sqlserver中的三种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本篇, ...

  5. echarts在react项目中的使用

    数据可视化在前端开发中经常会遇到,万恶的图表,有时候总是就差一点,可是怎么也搞不定. 别慌,咱们一起来研究. 引入我就不多说了 npm install echarts 对于基础的可视化组件,我一般采用 ...

  6. Spring在Web项目中的三种启动加载的配置

    在最近的项目中,使用到了spring相关的很多东西,有点把spring的配置给搞混了,从网上查到的资料以及整理了一下. 在Web项目中,启动spring容器的方式有三种,ContextLoaderLi ...

  7. C++项目中采用CLR的方式调用C#编写的dll

    1.注意事项:在编写C#DLL类库时,最好不要出现相同的命名空间,否则在C++中调用可能会出现编译错误.2.将C#的源码生成的“dll”文件复制到C++项目中的Debug目录下3.将C++项目属性设置 ...

  8. class类名在webpack项目中的两种引用方式

    一.问题描述 在项目工程中,我们通常既用到css module,也用到普通的less文件引用方式,代码及webpack配置如下,运行时,发现只有css module起作用,如何让两者都起作用呢? // ...

  9. 总结ASP.NET MVC Web Application中将数据显示到View中的几种方式

    当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下 ...

随机推荐

  1. MDK(KEIL) 两步解决 中文乱码 及 中文光标 半个半个跳的问题

    1. 如果已经用MDK(KEIL)的默认设置写了好多中文,那么先用notepad把文件一一打开然后转变编码格式为 utf-8 without ROM,如下: 2. 如果还没有开始编辑,或者已经用not ...

  2. LightOJ-1253-Misere Nim-nim博弈

    Alice and Bob are playing game of Misère Nim. Misère Nim is a game playing on k piles of stones, eac ...

  3. 自动化测试工具2-testcomplete

    今天来说说testcomplete的使用 录了一个简单案例视频,网址如下:https://v.qq.com/x/page/f05116a062y.html 第一步是创建一个工程: 输入工程名,和选择工 ...

  4. Python print命令/ 解压序列

    Python 命令参数  print 命令 : #默认的print是有个 空格,和换行的 # print(sep= ' ') # print(end = '/n') a = 'sunjinchao' ...

  5. mybatis 3 批量插入返回主键 Parameter 'id' not found

    @Insert("<script>INSERT INTO scp_activity_gift (activity_id,type,gift_id,status,limit_num ...

  6. 解决在python中进行CGI编程时无法响应的问题

    问题:我期望的效果是,后端解析脚本后,将结果返回给我,而不是将代码返回给我或者是让我下载文件. 参考地址:https://blog.csdn.net/C_chuxin/article/details/ ...

  7. win10 +Kinect V1 1414环境配置

    win10 +Kinect V1 1414环境配置 想起老Lab的机器人头顶的Kinect 安装准备 demo展示 人脸识别 照片不能够检测到人脸 可以去除背景 检测骨架 想起老Lab的机器人头顶的K ...

  8. hibernate_05_hibernateHQL查询QBC查询和SQL查询

    1.HQL简介:HQL是Hibernate Query Language(Hibernate 查询语言)的缩写,提供更加丰富灵活.更为强大的查询能力:HQL更接近SQL语句查询语法.Hibernate ...

  9. 关于css布局的定位问题

    虽然职位说是PHP程序,但实际上什么都要做些,排版当然也免不了了,以前自己做网站时就能排出网页了,但是很多东西不系统,有点走马观花,例如关于这个css布局定位的问题就是,今天特意总结了一下,知识这东西 ...

  10. windows下，根据端口号杀死进程

    1.cmd下,根据端口号查询进程号 C:\>netstat -ano|findstr " 2.根据进程号928,在任务管理器杀死PID为928进程 注意:默认情况下,进程选项卡里没有P ...