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. gorename: easy refactoring tool for Golang[转]

    To inaugurate this attempt of blog, I’ll talk about gorename a small but incredibly useful tool I ju ...

  2. （最小生成树）QS Network -- ZOJ --1586

    链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1586 http://acm.hust.edu.cn/vjudge/ ...

  3. hdu 1300 Deck

    题目 分析:对于n张卡片的最佳摆法,我们只需要在n-1张卡片的摆法下面加一张边缘与桌檐重合的卡片,并将所有卡片一起向桌檐外移动.对于一种最佳摆法,其中心一定在桌檐上,所以一定符合杠杆原理,支点是桌檐. ...

  4. x13 vs md5

    x13 vs md5 阅读:  评论:  作者:Rybby  日期:  来源:rybby.com 最近在设计巴巴变时想对用户设计的节点模块添加锁定功能,比如你的网站可以让用户发表文章或评论,而你想让用 ...

  5. Java web 调试技巧之查看浏览器中调试中的network

    在java web开发过程中尤其后台开发经常需要查看浏览器调试中的network项:今天在开发在线预览系统时用到了flexpaper插件,这个插件会调用FlexPaperViewer.swf这个软件( ...

  6. ASP.NET Core真实管道详解[1]

    ASP.NET Core管道虽然在结构组成上显得非常简单,但是在具体实现上却涉及到太多的对象,所以我们在 <ASP.NET Core管道深度剖析[共4篇]> 中围绕着一个经过极度简化的模拟 ...

  7. asp.net缓存使用介绍

    介绍: 在我解释cache管理机制时,首先让我阐明下一个观念:IE下面的数据管理.每个人都会用不同的方法去解决如何在IE在管理数据.有的会提到用状态管理,有的提到的cache管理,这里我比较喜欢cac ...

  8. Oracle数据库设置Scott登录

    Oracle数据库Scott登录 在安装数据库时,用户登录选项中,Scott用户默认是未解锁的. 用户名填写as sysdba:密码是原来设置的,登录进去,新建SQL窗口,输入命令: alert us ...

  9. 文本比较算法Ⅱ——Needleman/Wunsch算法的C++实现【求最长公共子串（不需要连续）】

    算法见:http://www.cnblogs.com/grenet/archive/2010/06/03/1750454.html 求最长公共子串(不需要连续) #include <stdio. ...

  10. docker rpm 下载地址

    http://yum.dockerproject.org/repo/main/centos/7/Packages/