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. 洛谷——P3819 松江1843路

    https://www.luogu.org/problem/show?pid=3819 题目描述 涞坊路是一条长L米的道路,道路上的坐标范围从0到L,路上有N座房子,第i座房子建在坐标为x[i]的地方 ...

  2. 阻止事件冒泡js jquery

    jQuery之防止冒泡事件 冒泡事件就是点击子节点,会向上触发父节点.祖先节点的点击事件. 以下是html代码部分: <body> <div id="content&quo ...

  3. startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVITY_NEW_TASK flag

    startActivity时报错Calling startActivity() from outside of an Activity context requires the FLAG_ACTIVI ...

  4. axios封装http请求

    import axios from 'axios' const HTTP_TIMEOUT = 15000; export function httpPost(url, params = {},head ...

  5. [selenium]-处理滚动条

    转载于:https://blog.csdn.net/lilongsy/article/details/76142497 1.先把driver 强制转换为js,如下 JavascriptExecutor ...

  6. Jedis源码分析

    http://blog.csdn.net/luyee2010/article/details/17580381

  7. POJ 3041 Asteroids 最小覆盖数

    http://poj.org/problem?id=3041 题目大意: 一辆宇宙飞船在一个小行星带中,你知道,这很危险.他有一种武器,可以清除掉一行或一列的小行星.问把小行星全部清除最少的武器使用次 ...

  8. cmake的使用笔记

    一. cmake使用网上还蛮多的.可是当你自己去用的时候,才觉得,都不是你想要的. 自己做个记录,用法全是基本用法. 二. 我在里面直接写注释说明了,直接贴了. 1. #cmake #1. # cma ...

  9. C#调用oracle存储过程自定义表类型

    http://blog.csdn.net/studyzy/article/details/11524527

  10. ado连接mysql和ORACLE

    ------mysql strConnect.Format("Provider=MSDASQL.1;Driver={%s};Server=%s;DataBase=%s;UID=%s;PWD= ...