1.照着官方文档简单做两个图表，感受一下。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>echarts-demo1</title>

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

     </head>

     <body>

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

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

         <script>

         //柱状图  bar

            //基于准备好的实例，初始化echarts实例

             var myChart = echarts.init(document.getElementById("bar"));

             //指定图表的配置项和数据

             var option = {

                 title:{

                     text:"echarts示例"

                 },

                 tooltip:{},

                 legend:{

                     data:['销量']

                 },

                 xAxis:{

                     data:['衬衫','羊毛衫','雪纺衫']

                 },

                 yAxis:{},

                 series:[{

                     name:'销量',

                     type:'bar',

                     data:[5,20,36]

                 }]

             }

             myChart.setOption(option);

         //饼图 pie

         var mypie = echarts.init(document.getElementById("pie"));

         mypie.setOption({

             series:[{

                 name:"访问来源",

                 type:"pie",

                 radius:'55%',

                 data:[{value:400,name:"搜索引擎"},{value:300,name:"直接访问"},{value:400,name:"视频广告"},{value:400,name:"联盟广告"}]

             }],

             //南丁格尔图会用半径来表示数据大小

             roseType:"angle"

         })

         </script>

     </body>

 </html>

可视化Echarts的使用示例的更多相关文章

  1. react_app 项目开发 (9)_数据可视化 ECharts

    数据可视化 ECharts yarn add echarts echarts-for-react

  2. 前端数据可视化echarts.js使用指南

    一.开篇 首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...

  3. 前端数据可视化echarts.js

    一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...

  4. 可视化-echarts流向图制作

    案例: http://www.internetke.com/jsEffects/2018040406/ 前段时间用echarts做了流程图,在此记录下制作步骤. 一.Echarts是什么 Echart ...

  5. 物联网温度服务器-ECharts、HTML5、JavaScript / ECharts gauge使用示例

    https://blog.csdn.net/u012812482/article/details/51079890 1. 效果 2. 简介 1. 其中仪表的部分使用的是ECharts的gauge控件实 ...

  6. ECharts.js 简单示例

    ECharts.js学习(一) 简单入门 EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart   这个是Vi ...

  7. 【数据可视化-Echarts】Echart基础

    林峰老师Echart基础课程笔记

  8. echarts示例

    将做过的echarts图表通过示例形式展示,便于以后使用,基于vue ,echarts,leancloud实现 github源码地址:https://github.com/707293891/echa ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

随机推荐

  1. OpenGL ES 光照模型之——漫反射光（RenderMonkey测试，地球日出效果）

    概述及目录(版权所有,请勿转载 http://www.cnblogs.com/feng-sc) 本文在上一篇(OpenGL ES 光照模型之——环境光照(RenderMonkey测试))环境光基础上, ...

  2. CDialog

    对话框和对话框类CDialog 对话框经常被使用,因为对话框可以从模板创建,而对话框模板是可以使用资源编辑器方便地进行编辑的. 模式和无模式对话框 对话框分两种类型,模式对话框和无模式对话框. 模式对 ...

  3. Hdu2612 Find a way 2017-01-18 14:52 59人阅读 评论(0) 收藏

    Find a way Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Su ...

  4. [转自知乎] 从github上下载单个文件夹

    原文地址: 如何从 GitHub 上下载单个文件夹?  注意:如果是在公司网络环境的话需要配置可以访问外网的代理,否则 svn checkout 时会出错.

  5. 【lazy标记得思想】HDU3635 详细学习并查集

    部分内容摘自以下大佬的博客,感谢他们! http://blog.csdn.net/dm_vincent/article/details/7769159 http://blog.csdn.net/dm_ ...

  6. Mac突然没有声音但是重启后可以恢复

    命令行操作方式   今天又发现了Mac上的一个BUG,有时候在工作之余我们去吃饭的时候Mac经常会进入睡眠状态,但是有的时候从睡眠状态激活后,本来想听个音乐,但是突然发现音乐不可以用了,以前每次都是重 ...

  7. 四、创建覆盖网络--Flannel

      Flannel是 CoreOS 团队针对 Kubernetes 设计的一个覆盖网络(Overlay Network)工具,其目的在于帮助每一个使用 Kuberentes 的 CoreOS 主机拥有 ...

  8. LoadRunner 技巧之 IP欺骗 （推荐）

    IP欺骗也是也loadrunner自带的一个非常有用的功能. 需要使用ip欺骗的原因:1.当某个IP的访问过于频繁,或者访问量过大是,服务器会拒绝访问请求,这时候通过IP欺骗可以增加访问频率和访问量, ...

  9. [C#]C#时间日期操作

    一.C# 日期格式 1. DateTime dt = DateTime.Now; 2. dt.ToString();//2005-11-5 13:21:25 3. dt.ToFileTime().To ...

  10. [C#学习笔记]类型对象指针和同步块索引

    写在前面 看<CLR via C#>第四章时,看到了类型对象指针和同步块索引这两个概念,不知如何解释,查看过相关资料之后,在此记录. 类型对象指针 <CLR via C#>中的 ...