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

一、总结

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

1、echarts怎么使用？

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

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

页面源代码和官方教程

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

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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>测试百度Charts</title>
  6.      <script src="echarts.js"></script>
  7.  </head>
  8.  <body>
  9.      <div id="main" style="height: 600px;width: 600px;"></div>
  10.      <div id="chart2" style="height: 600px;width: 600px;"></div>
  11.      <script type="text/javascript">
  12.          // 基于准备好的dom，初始化echarts实例
  13.          var myChart = echarts.init(document.getElementById('main'));
  14.  
  15.          // 指定图表的配置项和数据
  16.          var option = {
  17.              title: {
  18.                  text: 'ECharts 入门示例'
  19.              },
  20.              tooltip: {},
  21.              legend: {
  22.                  data:['销量']
  23.              },
  24.              xAxis: {
  25.                  data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  26.              },
  27.              yAxis: {},
  28.              series: [{
  29.                  name: '销量',
  30.                  type: 'bar',
  31.                  data: [5, 20, 36, 10, 10, 20]
  32.              }]
  33.          };
  34.  
  35.          // 使用刚指定的配置项和数据显示图表。
  36.          myChart.setOption(option);
  37.      </script>
  38.  </body>
  39.  </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. CList 点击表头排序 （1）SortItems函数

    点击表头排序整体的思路都是去 CListCtrl类中的方法SortItems去实现 CListCtrl::SortItems的原型是: BOOL SortItems( PFNLVCOMPARE pfn ...

  2. FreeNX

    freenx 在Linux下,我们最常使用的远程管理工具是ssh客户端,比如putty.SecureCRT等,但是ssh只提供字符界面的操作方式,有时我们需要图形界面的操作,在Linux下支持图形界面 ...

  3. ajax中的POST和GET传值

    ajax中的POST和GET传值 转自:http://www.cnblogs.com/jtome/archive/2008/12/04/1347864.html Ajax中我们经常用到get和post ...

  4. win7桌面有个无法删除的IE图标

    平台:win7 症状:安装软件时没仔细看,结果装上了一大堆,挨个卸载后桌面残留了一个IE无法删除.在该图标上点右键只有“打开”“属性”“创建快捷方式”三个选项,主页默认为www.2345.com. 解 ...

  5. Appium_Java运行测试脚本时问题汇总

    问题一.java.lang.NoClassDefFoundError: org/openqa/selenium/remote/SessionNotFoundExceptionCaused by: ja ...

  6. 记一些stl的用法（持续更新）

    有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...

  7. Altium Designer如何统一改变pcb状态下的原件标号位置

    原创 我用的是Altium Designer16版本 变成 步骤如下: 选中标号 右击 下边一步很重要: 点击应用和确定 在之后弹出的对话框中选则你要改变的位置,我这里是把标号改变到原件的右侧: 等待 ...

  8. ssh远程执行命令并自动退出

    usage: ssh [-1246AaCfgKkMNnqsTtVvXxYy] [-b bind_address] [-c cipher_spec] [-D [bind_address:]port] [ ...

  9. 洛谷—— P1765 手机_NOI导刊2010普及（10）

    https://www.luogu.org/problem/show?pid=1765#sub 题目描述 一般的手机的键盘是这样的: 1 2 abc 3 def 4 ghi 5 jkl 6 mno 7 ...

  10. JSF教程（11）——生命周期之Invoke Application Phase

    在这个阶段JSF实现将处理不论什么应用界别的事件,比如表单的提交或者链接点击后跳转到还有一个页面. 这时假设应用须要重定向不同 的web应用字眼或者产生一个资源其并不喊不论什么的JSF组件,那么就调用 ...