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. Spring Security Architecture and Implementation(架构和实现)学习笔记

    Spring Security 关于spring-security的官网文档学习笔记,主要是第8章 Architecture and Implementation(架构和实现)内容 参考: https ...

  2. react学习记录（一）

    一.React是什么 声明式写法(强调结果,命令式编程强调过程) 组件化 一次学习,随处编写(多种应用场景,web程序,原生手机应用,系统应用,命令行工具) 二.为什么学习react 大公司加持-fa ...

  3. java static变量及函数

    java以类为基础,没有游离在类之外单独存在的变量.所以,c++中的全局变量,在java中应该是不存在的.java中有的是成员变量和成员方法.当成员前以static修饰时,即为静态成员变量或静态成员方 ...

  4. MySQL Replication--中继日志更新

    RELAY LOG相关参数 设置如何保存从节点接收到的主库BINLOG sync_relay_log : 设置如何同步中继日志到中继日志文件. 当sync_relay_log = 0时,则MySQL服 ...

  5. spring boot项目：java -jar命令 没有主清单属性

    pom文件中,在build的plugins中增加插件: <plugin> <groupId>org.springframework.boot</groupId> & ...

  6. php图片防盗链

    利用.htaccess 重写规则防止图片被盗链 2. 找到httpd.conf 打开重写规则 3.

  7. Python+Selenium+Appium对APP进行UI自动化测试

    1. 安装Python3.7版本 pythonjava的JDK java -version javac nodejs node --versionappium 若nodejs安装完毕,使用npm安装a ...

  8. react-native npm install

    --create project react-native init myapp --version 0.55.4 cd myapp -- react ui npm i react-native-el ...

  9. 《Java程序设计实验》 软件工程18-1,3 OO实验2

  10. 安装nginx环境(含lua)时遇到报错ngx_http_lua_common.h:20:20: error: luajit.h: No such file or directory的解决

    下面是安装nginx+lua环境时使用的相关模块及版本,ngx_devel_kit和lua-nginx-module模块用的都是github上最新的模块.并进行了LuaJIT的安装. #Install ...