Echarts具有丰富的图表,可以说是数据可视化的神器；

1.下载Echarts

到官网或者点击以下文字【下载Echarts】即可下载；

①官网下载地址：https://echarts.baidu.com/index.html

②下载Echarts

2.Echarts引用案例

2.1 引入Echarts

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts案例</title>

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

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

</head>

</html>

2.2 绘制前给Echarts准备一个Dom容器

<!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>

</body>

</html>

2.3 绘制一个简单的柱状图

<!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: [5, 20, 36, 10, 10, 20]

            }]

        };

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

        myChart.setOption(option);

    </script>

</body>

</html>

就这样,一个完美的柱状图就生成了！

Echarts 入门操作的更多相关文章

  1. spring boot 入门操作(二)

    spring boot入门操作 使用FastJson解析json数据 pom dependencies里添加fastjson依赖 <dependency> <groupId>c ...

  2. spring boot 入门操作(三)

    spring boot入门操作 devtools热部署 pom dependencies里添加依赖 <dependency> <groupId>org.springframew ...

  3. Mysql的二进制安装和基础入门操作

    前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...

  4. java之servlet入门操作教程一续

    本节主要是在java之servlet入门操作教程一  的基础上使用myeclipse实现自动部署的功能 准备: java之servlet入门操作教程一 中完成myFirstServlet项目的创建: ...

  5. Mysql数据库的二进制安装和基础入门操作

    前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...

  6. Mycat 中间件配置初探与入门操作

    Mycat中间件配置初探与入门操作 By:授客 QQ:1033553122 实践环境 Mycat-server-1.5.1-RELEASE-20161130213509-win.tar.gz 下载地址 ...

  7. EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射（一） c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象

    EF+LINQ事物处理   在使用EF的情况下,怎么进行事务的处理,来减少数据操作时的失误,比如重复插入数据等等这些问题,这都是经常会遇到的一些问题 但是如果是我有多个站点,然后存在同类型的角色去操作 ...

  8. 01.JDBC操作数据库-快速入门操作

    /** * 简单入门操作 * 注:先将mysql-connector-java-5.1.36.jar 构建 Build Path环境当中去 * @param args * @throws Except ...

  9. (转)私有代码存放仓库 BitBucket介绍及入门操作

    转自:http://blog.csdn.net/lhb_0531/article/details/8602139 私有代码存放仓库 BitBucket介绍及入门操作 分类: 研发管理2013-02-2 ...

随机推荐

  1. js 数据类型检测

    提起数据类型检测  大多数人首先想起的应该是  typeof 'xxx' == '数据类型' 坦然这种方法对于基本数据类型的检测还是非常方便的,但是当遇到引用数据类型 Object时却爱莫能助,下面就 ...

  2. Flask蓝图Blueprint和特殊装饰器

    Flask 中的 蓝图 Blueprint 不能被run的flask实例:相当于django中的app01 应用 蓝图作用:功能隔离 路由隔离 Blueprint就是 一个不能run的flask 蓝图 ...

  3. 金融finaunce单词finaunce财经

    金融(FINANCE或FINAUNCE)就是对现有资源进行重新整合之后,实现价值和利润的等效流通.(专业的说法是:实行从储蓄到投资的过程,狭义的可以理解为金融是动态的货币经济学.) 金融是人们在不确定 ...

  4. 基于cmake编译glew

    cmake已经成为了C/C++开源项目的主流构建工具.glew也提供了cmake的脚本,但用cmake编译glew容易采坑:glew的github上的代码,无论是master分支还是glew-2.1. ...

  5. UBOOT2016.05 看门狗

    硬件平台 AM335X UBOOT  2016.05 在UBOOT中关看门狗,需要修改屏蔽这两处代码 init_sequence_r->board_init->hw_watchdog_in ...

  6. OSPF但区域配置

    原理概述 实验内容 实验拓扑 实验编址 实验步骤1.基本配置配置完成后,使用ping命令检测 2.部署单区域OSPF网络使用命令ospf创建并运行OSPF 其中1是进程号,如果没有写明进程号,则默认为 ...

  7. 使用Cloudera Manager部署Kafka消息队列

    使用Cloudera Manager部署Kafka消息队列 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.下载需要安装的Kafka版本 1>.查看Cloudera Dis ...

  8. Local CubeMap实现玻璃折射

    这个方法来自于Arm公司Cave Demo中的冰雕效果 原文提供了一种计算折射向量的方法, 这里用个更简单的方式尝试发现效果也不错: float3 v = -normalize(_WorldSpace ...

  9. 划分土地（how many pieces of land）

    题目描述: 给一个椭圆,上面有n个点,两两连接这n个点,得到的线段能把椭圆分为几个区域? 思路: 首先想想,n个点在椭圆边缘,每两个点两两连接有\(C^2_n\)条线段,这些线段交于很多点,求这些线段 ...

  10. CSP-S 2019提高组训练 服务器需求

    时间限制:C/C++ 3秒 空间限制:C/C++ 262144K 题目描述 小多计划在接下来的n天里租用一些服务器,所有的服务器都是相同的.接下来n天中,第i天需要\(a_i\)台服务器工作,每台服务 ...