ECharts快速入门

  1. 引入 ECharts
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

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

</head>

</html>
  1. 准备一个具备高和宽的DOM容器
<body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

    <div id="main" style="width: 600px;height:400px;"></div>

</body>
  1. 初始化echarts实例
<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]

            }]

        };

    </script>
  1. 通过setOption方法激活！
// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

完成代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

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

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

</head>

<body>

    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        //3. 基于准备好的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]

            }]

        };

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

        myChart.setOption(option);

    </script>

</body>

</html>

ECharts——快速入门的更多相关文章

  1. Echarts快速入门---------v客学院技术分享

    ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  2. ECharts快速入门

    一.简介 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Saf ...

  3. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  4. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  5. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  6. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  7. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  9. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  10. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

随机推荐

  1. Windows Server 2012 R2在桌面上显示我的电脑等图标

     从Windows 2012 开始,微软取消了服务器桌面个性化选项,如何重新调出配置界面,可以使用微软命令.方法如下: 按下「Win鍵」+「R」,在运行里输入: rundll32.exe shell3 ...

  2. 一个Tomcat 如何部署多个项目？附多种解决方案及详细步骤！

    此文源自一次多年前面试的面试题,民工哥将它总结出来分享给大家,希望对大家有所帮助,或者今后的面试中说不定会用的上. 首先,我们了解一下常见的Java Web服务器. Tomcat:由Apache组织提 ...

  3. 遍历菜单树得到所有菜单ids

    1.前言 在我们实现菜单管理页面的时候,有时候我们需要默认展开所有的菜单列表,但是因为后端有时候没有返回所有菜单ids数组. 而且我们也不容易获取到所有菜单ids,比如如果我们通过角色id查询到所有菜 ...

  4. .NET技术分享日活动-202202

    2022年02月19日下午,个人组织举办了山东地区的第四次.NET技术分享日活动.主要包含.NET常用技术.低代码.大前端.大数据和工作流等五个技术领域. 本次技术分享日活动面向了山东地区广大的.NE ...

  5. 7种创建方式，带你理解Java的单例模式

    本文分享自华为云社区<<Java极简设计模式>第01章:单例模式(Singleton)>,作者:冰 河. 单例设计模式 看几个单例对象的示例代码,其中有些代码是线程安全的,有些 ...

  6. typescript参照C#/java/swift学习小结

    学typescript,首先肯定是看官方文档,http://www.typescriptlang.org,国内翻译网站:https://www.tslang.cn 说实话,这个文档看下去,是昏昏欲睡的 ...

  7. 聊聊Hive数据血缘——从Atlas没有列级血缘的Bug讲起

    前几天,Datahub提供了最新的字段级别数据血缘功能,很多朋友迫不及待想对比一下Datahub的字段级血缘与Atlas的区别. 这个时候问题来了,在Atlas收集Hive血缘的时候,由于部分版本问题 ...

  8. 使用 docker-compose 部署 folkmq 消息中间件

    仓库拉取 docker-compose.yml 文件: https://github.com/noear/folkmq/tree/main/deploy version: '3.5' services ...

  9. PPT 图片框架排版万能能公式

    图片作用 提升设计感 辅助表达 传递情感 如何选择一张高大上的图片? 星空.地球.城市.海洋.线条.粒子.山脉.壁纸(系统.手机厂商千挑万选的) https://cn.bing.com/images ...

  10. Kubernetes(K8S) 配置静态资源服务

    Kubernetes(K8S) 配置静态资源服务 --- apiVersion: v1 kind: ConfigMap metadata: name: img-config namespace: vi ...