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. 新报: 根据IP获取物理地址不需要调用接口啦

    一. 复制data文件夹到自己的项目当中 可以进行加载到这个文件即可 博主放入在项目的根目录当中 请移步Gitee pull 该文件 https://gitee.com/yangbuyi/ip_fil ...

  2. C# 成为2023年度编程语言之王

    原文发表在公众号 腾讯云开发者:https://mp.weixin.qq.com/s/5owE5hmJVkwOLJrKMXfR6Q 导读 2023 TIOBE 年度编程语言正式揭晓,C# 在陪跑多年后 ...

  3. UE5：相机震动CameraShake源码分析

    本文将会分析UE5中相机震动的调用流程,会简要地分析UCameraModifier_CameraShake.UCameraShakeBase等相关类的调用过程. 阅读本文,你至少需要使用或者了解过Ca ...

  4. Flutter定时器

    代码 const timeout = Duration(seconds: 3); var t=Timer.periodic(timeout, (timer) { print('afterTimer=' ...

  5. 16、Flutter Wrap组件 实现流布局

    Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,单列的Wrap则跟Column表现几乎一致.但 Row与Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时, ...

  6. JavaScript异步编程4——Promise错误处理

    目录 1. 概述 2. 详论 3. 参考 1. 概述 在上一篇文章<JavaScript异步编程3--Promise的链式使用>中,通过Promise的链式使用,避免程序中多次嵌套回调(回 ...

  7. 《语义增强可编程知识图谱SPG》白皮书

    语义増强可编程图谱框架:新一代知识图谱语义框架/引擎.SPG+LLM双驱架构及应用相关进展和应用.<语义增强可编程知识图谱SPG>白皮书 v1.0.pdf: https://url39.c ...

  8. MySQL篇：第二章_初识MySQL

    初始MySQL MySQL的背景 1.前身属于瑞典的一家公司,MySQL AB 2.08年被sun公司收购 3.09年sun被oracle收购 MySQL的优点 1.开源.免费.成本低 2.性能高.移 ...

  9. CANN开发实践：4个DVPP内存问题的典型案例解读

    摘要:由于DVPP媒体数据处理功能对存放输入.输出数据的内存有更高的要求(例如,内存首地址128字节对齐),因此需调用专用的内存申请接口,那么本期就分享几个关于DVPP内存问题的典型案例,并给出原因分 ...

  10. RDS：一致性处理事务的神器

    摘要:RDS关系型数据库是一种基于云计算平台的即开即用.稳定可靠.弹性伸缩.便捷管理的在线关系型数据库服务. 本文分享自华为云社区<一致性处理事务这下还是看RDS的吧[秋招特训]>,作者: ...