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. 你是否想知道如何应对高并发？Go语言为你提供了答案！

    并发编程是当前软件领域中不可忽视的一个关键概念.随着CPU等硬件的不断发展,我们都渴望让我们的程序运行速度更快.更快.而Go语言在语言层面天生支持并发,充分利用现代CPU的多核优势,这也是Go语言能够 ...

  2. Windows系统修复（System Update Readiness Tool、SFC模式、DISM命令）可解决系统更新问题。

    安装System Update Readiness Tool 提供此更新是因为在 Windows servicing store 中发现了不一致,这可能会影响将来成功安装更新.service pack ...

  3. Pytest07-pytest.ini配置文件

    1.pytest配置文件 固定名称:pytest.ini 作用域:当前目录及子目录 具体配置功能见下: [pytest] # 01 把命令行参数自动添加到这里 addopts = -s -v --ht ...

  4. manjaro下使用deepin-wine5解决wechat无法发送图片的问题

    问题 在manjaro操作系统下,使用了deepin-wine安装wechat.但是,wechat运行无法发送较大图片且截图功能也有问题. 解决 在参考了github之后,我找到了解决方案. 附上链接 ...

  5. Win10笔记本开启热点让手机上网

    Win10开启热点让手机上网,笔记本电脑开启热点,笔记本电脑开启WiFi,手机连接笔记本电脑热点上网. 1.前提条件:笔记本电脑网线联网,笔记本电脑支持热点 2.胆子要大,不怕公司网管统计发现你的电脑 ...

  6. STM32CubeMX教程10 RTC 实时时钟 - 周期唤醒、闹钟A/B事件和备份寄存器

    本实验主要使用STM32CubeMX软件配置STM32F407开发板实现RTC周期唤醒.闹钟A/B事件功能,周期唤醒中输出RTC时间,闹钟A/B事件发生时利用串口输出闹钟A/B事件发生提示 1.准备材 ...

  7. 文心一言 VS 讯飞星火 VS chatgpt （58）-- 算法导论6.4 2题

    文心一言 VS 讯飞星火 VS chatgpt (58)-- 算法导论6.4 2题 二.试分析在使用下列循环不变量时,HEAPSORT 的正确性:在算法的第 2~5行 for 循环每次迭代开始时,子数 ...

  8. 记录：idea git push失败问题

    问题描述: 重复弹出密码登录框,但是push失败 解决,用ssh的方式登录 1.生成ssh 配置用户名 git config --global user.name "tmqq2333&quo ...

  9. 4种方法帮你解决IntelliJ IDEA控制台中文乱码问题

    摘要:在本文中总结了4 种方法完美解决 IntelliJ IDEA 控制台中文乱码问题. 前言 IntelliJ IDEA 如果不进行配置的话,运行程序时控制台中文乱码问题会非常严重,严重影响我们对信 ...

  10. 教你实现一个朴实的Canvas时钟效果

    摘要:今天教大家写一个canvas的时钟案例,效果可能看起来比较简单,没有那些花里胡哨的. 本文分享自华为云社区<如何实现一个朴实无华的Canvas时钟效果>,作者: 北极光之夜.. 一. ...