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. oracle 日期

    http://blog.itpub.net/126211/viewspace-712986/

  2. Android RecyclerView And CardView

    Google I/O 2014大会公布Android L系统,还有Material Design全新的设计风格.而Material Design卡片式的设计.Google Play应用商店和G+ AP ...

  3. Light OJ 1373 Strongly Connected Chemicals 二分匹配最大独立集

    m种阳离子 n种阴离子 然后一个m*n的矩阵 第i行第j列为1代表第i种阴离子和第j种阴离子相互吸引 0表示排斥 求在阳离子和阴离子都至少有一种的情况下 最多存在多少种离子能够共存 阴阳离子都至少须要 ...

  4. install-软件安装跟push的区别

    今天在做项目的时候,需要往一个user版本的手机中安装一个应用,就在网上查了相应的方法,可以使用如下命令 adb install -r out/target/product/vanzo6752_lwt ...

  5. OpenAL音频播放

    // // OpenALPlayer.m // live // // Created by lujunjie on 2016/11/5. // Copyright © 2016年 lujunjie. ...

  6. Thinkphp5创建控制器

    今天我们就来创建一个控制器: <?php namespace app\index\controller; use think\Controller; class Test extends Con ...

  7. 原生js大总结五

    041.在js中如何用方法将10进制的字符转换成16进制和8进制   数字.toString(16) 数字.toString(8)     042.如何创建时间对象   new Date()   04 ...

  8. 【习题 6-10 UVA - 246】10-20-30

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 发牌的那个牌堆用一个deque,7个牌堆用vector来模拟. 然后按照题意模拟就好. 不难. [代码] /* 1.Shoud it ...

  9. 在线java反编译服务

    大家是否遇到过有java class文件,却没有java源码的苦恼.近期findmaven.net提供了在线java反编译服务http://www.findmaven.net/decompile_cn ...

  10. Javascript和jquery事件--事件对象event

    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...