方式一、在webpack中使用ECharts

1、npm安装ECharts

npm install echarts --save

2、引入ECharts

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

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 绘制图表

myChart.setOption({

    title: {

        text: 'ECharts 入门示例'

    },

    tooltip: {},

    xAxis: {

        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    },

    yAxis: {},

    series: [{

        name: '销量',

        type: 'bar',

        data: [, , , , , ]

    }]

});
<div id="main" style="width: 100%;height:400px;"></div>

方式二、单文件引入

1、获取ECharts

2、引入ECharts

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

    <script src="./assets/js/echarts.min.js"></script>

</head>

</html>

3、获取一个图表

<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="main" style="width: 600px;height:400px;"></div>

</body>

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

            },

            yAxis: {},

            series: [{

                name: '销量',

                type: 'bar',

                data: [, , , , , ]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</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. HDU-1850-Being a Good Boy in Spring Festival-nim博弈

    一年在外 父母时刻牵挂春节回家 你能做几天好孩子吗寒假里尝试做做下面的事情吧 陪妈妈逛一次菜场悄悄给爸爸买个小礼物主动地 强烈地 要求洗一次碗某一天早起 给爸妈用心地做回早餐 如果愿意 你还可以和爸妈 ...

  2. Flutter介绍

    1. flutter简介 Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能快速构建高性能.高保真的ios和Android应用程序, 并且在排版.图标.滚动. ...

  3. 13-Ubuntu-查阅终端命令版本信息和帮助信息

    查看版本信息: 终端命令 --version 查看帮助信息: 终端命令 --help 注: 待查阅的命令 后面有两个减号-- 例:查看终端命令ls的版本和帮助信息 ls --version ls -- ...

  4. codeforces round#524 C. Masha and two friends /// 矩形切割

    题目大意: 给定n行m列的黑白棋盘如下 给定矩形的左下点x1 y1和右上点x2 y2将这个区域都涂成白色 再给定矩形的左下点x3 y3和右上点x4 y4将这个区域都涂成黑色 求最后棋盘内有分别多少个白 ...

  5. java 在数组{1,2,3,4,6,7,8,9,10}中插入一个数5，使其插入完成后仍然有序

    1.需要实现的效果 2.代码实现 import java.util.Scanner; /* * 11.在数组{1,2,3,4,6,7,9,8,10}中插入一个数5, * 使其插入完成后仍然有序,运行结 ...

  6. 再次封装ajax函数，统一入口

    根据API写网页的时候,每个页面都需要ajax请求,每次都写一大堆请求,配置什么的太麻烦,于是打算封装一个ajax函数,统一调用: 开始时是使用return返回ajax,如下: function cr ...

  7. Spark三种部署方式

  8. JS事件 光标聚焦事件（onfocus）当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行

    光标聚焦事件(onfocus) 当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行. 如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数messa ...

  9. Buy Low, Buy Lower

    Buy Low, Buy Lower 给出一个长度为N序列\(\{a_i\}\),询问最长的严格下降子序列,以及这样的序列的个数,\(1 <= N <= 5000\). 解 显然我们可以很 ...

  10. NOI2019网络同步赛总结

    先说说分数:\(100+20+0+100+0+0=220\) 我果然还是个大蒟蒻-- Day1 比赛之前还在回顾着<灵笼>,时间一到就立刻进入比赛. 快速地浏览了一遍题目,然后开始刚T1. ...