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. streamController

  2. 【开发工具】- myeclipse安装主题

    你想用IDEA那样炫酷的符合90后气质的主题吗?废话不多说,按照下边步骤就可以安装像IDEA一样超级炫酷的主题. 下载主题 1.进入插件官网(http://eclipsecolorthemes.org ...

  3. Docker 基础篇 入门篇

    1.Docker入门 1.为什么要用docker? 相比于传统: 部署非常慢 成本非常高 资源浪费 难于迁移和扩展 可能会被限定硬件厂商 由于物理机的诸多问题,后来出现了虚拟机 一个物理机可以部署多个 ...

  4. appium自动化webview时遇到的chromedriver问题

    安卓app里面的网页,基本上都是使用手机系统上的webview 去显示的. 安卓 webview 可以看成是 手机上的 chrome 浏览器精简版. appium desktop 里面内置了 用于 w ...

  5. MySQL 5.7的复制架构,在有异步复制、半同步、增强半同步、MGR等的生产中，该如何选择？

    一.生产环境中: 几种复制场景都有存在的价值.下面分别描述一下: 从成熟度上来选择,推荐:异步复制(GTID+ROW) 从数据安全及更高性能上选择:增强半同步 (在这个结构下也可以把innodb_fl ...

  6. 【Mybatis异常】 org.apache.ibatis.binding.BindingException: Parameter 'storeId' not found. Available parameters are [form, param1]

    一.异常信息 2019-05-31 16:06:25.272 [http-nio-10650-exec-3] WARN o.s.w.s.m.m.a.ExceptionHandlerExceptionR ...

  7. 数据库开发-Django ORM的数据库迁移

    数据库开发-Django ORM的数据库迁移 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一. Django 项目准备 1>.安装django包 pip install d ...

  8. mongodb 安装pymongo 驱动

    下载驱动包: https://pypi.org/project/pymongo/ 解压:  tar zxvf pymongo-3.8.0.tar.gz   安装:  python setup.py i ...

  9. 使用Apollo做配置中心

    https://blog.51cto.com/12980017/2158490?source=dra 由于Apollo支持的图形化界面相对于我们更加的友好,所以此次我们使用Apollo来做配置中心 本 ...

  10. 微信小程序~扫码

    为了让用户减少输入,我们可以把复杂的信息编码成一个二维码,利用宿主环境wx.scanCode这个API调起微信扫一扫,用户扫码之后,wx.scanCode的success回调会收到这个二维码所对应的字 ...