1.获取ECharts

　　官网 下载：http://echarts.baidu.com/download.html

2.在html页面中引入ECharts文件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" src="js/echarts.min.js" ></script>//这里是引入ECharts的js文件

    </head>

    <body>

    </body>

</html>

文件的目录结构：

3.绘制一个简单的图表

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ECharts练习</title>

        <script type="text/javascript" src="js/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: [5, 20, 36, 10, 10, 20]

                }]

            };

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

            myChart.setOption(option);

        </script>

    </body>

</html>

4.效果图展示

ECharts学习（1）--简单图表的绘制的更多相关文章

  1. .net图表之ECharts随笔01-最简单的使用步骤

    找了几种绘制图表的办法,后面选定了ECharts.下载链接如下,好像不同的ECharts有不同的用法,要下对. https://gitee.com/Tuky/SomeWebFrame/tree/mas ...

  2. ECharts学习总结(一):ECharts的第一个图表

    在进行echarts图表开发之前先要到echarts官网下载echarts的库文件,我下载的是echarts-2.2.7.然后把库文件放到工程文件web目录下.接下来进行第一个图表的显示步骤如下: 1 ...

  3. echarts学习总结

    ECharts学习总结使用步骤1 引入ECharts <script src="echarts.min.js"></script>2 绘制一个简单的图表 为 ...

  4. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  5. 主窗体里面打开子窗体&&打印饼图《Delphi 6数据库开发典型实例》--图表的绘制

    \Delphi 6数据库开发典型实例\图表的绘制 1.在主窗体里面打开子窗体:ShowForm(Tfrm_Print); procedure Tfrm_Main.ShowForm(AFormClass ...

  6. Echarts学习总结（一）-----柱状图

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,基于[HTML5]Canvas (ZRender),纯Javascript图表库,是百度的一个开源的数据可视化工具,业 ...

  7. echarts学习笔记(一)

    echarts学习笔记(一) echarts开发步骤 创建一个新的html文件 在html文件head头部信息中导入echarts 声明一个容器(可以理解为画布),用于存放echarts 实例化ech ...

  8. 自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表

    自学Zabbix3.8.1.1-可视化Visualisation-Graphs简单图表 Zabbix提供了一些简单的图表,用于可视化由项目收集的数据. 用户不需要进行配置工作来查看简单的图表.他们是由 ...

  9. vue和echarts 封装的 v-charts 图表组件

    https://v-charts.js.org/#/ 在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2. ...

随机推荐

  1. Day Tips：关于搜索小问题

    1.如果想重启SPSearchHostController请确保没有服务在运行,如果有爬网运行可能会导致重启失败,使之处于stoping状态,不过遇到这个状态也不要紧使用 taskkill /f /f ...

  2. Set up Github Pages with Hexo, migrating from Jekyll

    Set up Github Pages with Hexo, migrating from Jekyll. 本文介绍用Hexo建立github pages, 其中包含了从Jekyll迁移过来的过程. ...

  3. [原创]python之简单计算器(超详解,只有基本功能+－*/，还有括号处理)

     不想看过程的话,直接看文章最后的正式源码 作业需求及分析: 流程图 https://www.processon.com/diagraming/580c5276e4b03c844a5a9716 初期感 ...

  4. C#命名规则和编码规范

    用Pascal规则来命名属性.方法.事件和类名. public class HelloWorld { public void SayHello(string name) { } } Pascal规则是 ...

  5. [css]我要用css画幅画(九) - Apple Logo

    接着之前的[css]我要用css画幅画(八) - Hello Kitty,这次画的是苹果公司的logo 这次打算将分析和实现步骤尽量详细的说一说. 其实之前的也打算详细讲分析和设计过程,不过之前的图比 ...

  6. Mac入门教程之: Command键5个隐藏功能

    Mac 电脑的 Command 键位于空格边上,是 OS X 系统很多快捷键组合的一部分.不过,Command 自己也能完成很多操作,帮助用户更好的在 OS X 中完成各项任务,下面是 Command ...

  7. RMAN-03002, RMAN-06059, ORA-19625 and ORA-27037 When Running RMAN Backup of Archivelogs

    RMAN备份数据库时,出现下面错误错误信息: Starting backup at 25-MAY-15 current log archived allocated channel: ORA_DISK ...

  8. 通过例子学习 Keystone - 每天5分钟玩转 OpenStack（19）

    上一节介绍了 Keystone 的核心概念.本节我们通过“查询可用 image”这个实际操作让大家对这些概念建立更加感性的认识. User admin 要查看 Project 中的 image 第 1 ...

  9. javascrip中parentNode和offsetParent之间的区别

    首先是 parentNode 属性,这个属性好理解,就是在 DOM 层次结构定义的上下级关系,如果元素A包含元素B,那么元素B就可以通过 parentElement 属性来获取元素A. 要明白 off ...

  10. maven archetype生成自定义项目原型(模板)

    maven archetype可以将一个项目做成项目原型,之后只需要以此原型来创建项目,那么初始创建的项目便具有原型项目中的一切配置和代码.通俗讲就是一个项目模板. eclipse中那些快速生成mav ...