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. 通过API执行AutoCAD命令来…

    大家知道AutoCAD功能丰富,而更可贵的是,这么多丰富的功能背后都有一个命令,有些东西,直接用API调用写起来可能很费劲或者无法实现,可如果能用命令的话却很简单,这时候我们就可以通过API来调用Au ...

  2. tabbarItem字体及图片颜色设置

    tabbarItem设置图片后运行往往与我们原始图片颜色有出入,这是因为在默认情况下,未选中状态图片和字体颜色为灰色,选中状态下图片和字体颜色为蓝色.   UIImage 在呈现(render)时会选 ...

  3. 每个程序员都会的 35 个 jQuery 小技巧

    1. 禁止右键点击 $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return ...

  4. UILabel

    //UILabel->UIView /* 1.实例化 2.属性 3.添加到父视图上 */ //实例化 UILabel *label = [[UILabel alloc] initWithFram ...

  5. 浅谈iptables防SYN Flood攻击和CC攻击

    ------------------------本文为自己实践所总结,概念性的东西不全,这里粗劣提下而已,网上很多,本文主要说下目前较流行的syn洪水攻击和cc攻击------------------ ...

  6. 使用eclipse开发Morphline的Java代码段

    背景:morphline是一个轻量级的etl工具.除了提供标准化的方法之外,还可以定制化的开发java片段.定制化的java片段会在加载时被作为一个独立的类编译,对源数据作处理. morphline关 ...

  7. Python学习笔记2-解析数据

    Import os; -- Python自带 print(os.getcwd()) -- 获得当前工作目录 os.chdir('/Users/longlong/Documents') -- 转换到/U ...

  8. MySQL调优系列_日志分析

    前言 本篇主要总结一下MySQL数据库的几种日志,用于日常维护过程中问题解决和性能优化等,稍显基础,日常积累之用. 文章的部分内容会将MySQL数据库和SQL Server数据库部分内容做一个对比,非 ...

  9. Python进阶【第二篇】多线程、消息队列queue

    1.Python多线程.多进程 目的提高并发 1.一个应用程序,可以有多进程和多线程 2.默认:单进程,单线程 3.单进程,多线程 IO操作,不占用CPU python的多线程:IO操作,多线程提供并 ...

  10. 【java开发】分支语句、循环语句学习

    一.Java分支语句类型 if-else 语句 switch 关于if-esle语句可以拆分为三种 if语句 if(条件){语句块;} if-else语句if(条件语句){语句块;} if-else ...