echarts怎么使用（最最最最简单版）（本质canvas）

一、总结

一句话总结：外部扩展插件肯定要写js啊，不然数据怎么进去，不然宽高怎么设置。本质都是canvas嵌套在页面上，比如div中。

1、echarts怎么使用？

引入js，指定控件，编写js

2、怎么让外部插件变得非常容易？

页面源代码和官方教程

二、echarts怎么使用（最最最最简单版）

三、自己测试（这么简单的吗，看百度教程）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>测试百度Charts</title>

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

 </head>

 <body>

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

     <div id="chart2" style="height: 600px;width: 600px;"></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怎么使用（最最最最简单版）（本质canvas）的更多相关文章

  1. php爬虫最最最最简单教程

    php爬虫最最最最简单教程 一.总结 一句话总结:用的爬虫框架,却是用的自己的例子(因为网站结构的变化,作者的例子不一定好用) 爬虫框架 自己例子 1.发现自己的运行效果和作者的不一样怎么办? 耐下性 ...

  2. vue双向数据绑定最最最最最简单直观的例子

    vue双向数据绑定最最最最最简单直观的例子 一.总结 一句话总结:双向绑定既不仅model可以影响view的数据,view也可以影响model的数据 view model 数据 1.vue双向数据绑定 ...

  3. ThinkPHP5.0最最最最最简单实例

    ThinkPHP5.0最最最最最简单实例 一.效果图 二.操作步骤 1.用mysql数据库建立数据库 2.按照ThinkPHP官网的指示装好ThinkPHP5.0 tp5里面的目录结构如下: 3.配置 ...

  4. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  5. thinkphp5最最最最简单的ajax实例

    thinkphp5最最最最简单的ajax实例 一.总结 一句话总结:页面端使用$.get()方法传递ajax请求,服务器端判断是不是ajax请求,是的话接受参数,进行逻辑处理之后向客户端返回值. 1. ...

  6. ECharts.js 超简单入门（本质canvas）

    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门 ...

  7. 其它课程中的python---4、Matplotlib最最最最简单使用

    其它课程中的python---4.Matplotlib最最最最简单使用 一.总结 一句话总结: 慢慢来吧,不着急,心态平和和沉稳:每次和世界交互,你就能感受到无比的自信 1.如何区别python2和p ...

  8. python从入门到大神---4、python3文件操作最最最最简单实例

    python从入门到大神---4.python3文件操作最最最最简单实例 一.总结 一句话总结: python文件操作真的很简单,直接在代码中调用文件操作的函数比如open().read(),无需引包 ...

  9. 代码走查25条疑问 C# 跳转新的标签页 C#线程处理 .Net 特性 attribute 学习 ----自定义特性 看懂 ，学会 .NET 事件的正确姿势-简单版

    代码走查25条疑问   代码走查(Code Review) 是一个开发人员与架构师集中讨论代码的过程.通过代码走查可以提高代码的 质量,同时减少Bug出现的几率.但是在小公司中并没有代码走查的过程在这 ...

随机推荐

  1. VUE错误记录 - 小球模拟购物车

    <body> <div id="app"> <input type="button" value="Add to Car ...

  2. JdbcTemplate简单介绍

    转自:http://www.php.cn/java-article-368819.html 一.关于JdbcTemplate JdbcTemplate是最基本的Spring JDBC模板,这个模板支持 ...

  3. 不在JPA 的 persistence.xml 文件中配置Entity class的解决办法

    在Spring 集成 Hibernate 的JPA方式中,需要在persistence配置文件中定义每一个实体类,这样非常地不方便,2种方法可以解决此问题: 这2种方式都可以实现不用在persiste ...

  4. ajax 通过return 返回data值

    方法例如以下: 1. ajax 必须为同步 设置async:false 2. 定一个局部变量 把data赋值给局部变量 然后 return 局部变量就可以 示比例如以下 function getEmp ...

  5. 怎样让IE支持自己定义协议

    浏览QQ空间的时候发现,仅仅要在IE地址中输入象一下这样的形式的地址. tencent://Message/?Uin=251464630&websiteName=qzone.qq.com&am ...

  6. Loadrunner--关联详解

    当录制脚本时,VuGen会拦截client端(浏览器)与server端(网站服务器)之间的对话,并且通通记录下来,产生脚本.在VuGen的Recording Log中,您可以找到浏览器与服务器之间所有 ...

  7. 【hdu 3518】Boring counting

    [链接]h在这里写链接 [题意] 给出一个字符串,求出至少不重叠出现2次以上的子串有多少个. [题解] 枚举要找的子串的长度i; 根据height数组,找出连续>=i的height; 这几个起始 ...

  8. Vim 模式及常用命令整理

    VIM 命令     以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令.   vim的模式 基本上可以分为3种模式,分别是命令模式(command mode).插入模 ...

  9. 防止 Chrome 屏蔽 非官方 扩展程序 教程（一）

    说明 Google Chrome,又称 Google 浏览器,是一个由 Google(谷歌)公司开发的网页浏览器.该浏览器是基于其它开源软件所撰写.包含 WebKit,目标是提升稳定性.速度和安全性. ...

  10. swift项目第二天：初始化项目

    初始化项目 项目的部署版本 之后项目会运行在哪些系统中 横竖屏的支持 iPhone应用一般只支持横屏 iPhone游戏一般支持竖屏 iPad横竖屏都支持 设置项目的图标和启动图片 项目的图标(美工做好 ...