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. css控制英文内容自动换行問題

    css控制英文内容自动换行 HTML: <!-- 因为要显示的内容是用户通过CMS添加进入数据库,再抓取出来前台显示的,所以你根本无法 控制每一行内容的长度. 所以我在显示内容的div设置了一个 ...

  2. AndroidPn消息推送

    接着前面的工作,消息接收之后,要推送给不同的客户端.关于消息推送,网上有很多方式,http长连接,xmpp协议,还有一个谷歌的貌似叫C2DM的东西. 在此之前,用openfire做了一个小demo,例 ...

  3. SQL反模式-1

    SQL反模式讲了很多数据库设计中遇到的难题.跟我最近的工作很相关.因此特意拜读了下.本文主要讲解"多值列"和"幼稚的树" 多值列要分成映射表,比如(A,B),其 ...

  4. 微软儿童编程技术，kodu（酷豆）为儿童创造一个游戏世界

    受微软青年星火项目组的邀请,我和微软项目组的朋友参加了一场针对儿童编程的技术指导. 儿童和编程,本来是两个完全不靠边的词.在大家的常规思维中,编程一直是软件开发人员的事情,是高科技类型的工作,高不可攀 ...

  5. [翻译]第一天 - 在 Windows 下安装和运行 .NET Core

    原文: http://michaelcrump.net/getting-started-with-aspnetcore/ 免责声明:我不是 .NET Core 开发团队的一员,并且使用的是公开.可用的 ...

  6. dropdownlist的OnSelectedIndexChanged方法不触发

    解决方法: AutoPostBack="true" if (!IsPostBack){ 数据绑定 } 如果数据绑定后不触发,但是手动添加数据的情况下触发<%@ Page En ...

  7. C#文件监控对象FileSystemWatcher实例，通过监控文件创建、修改、删除、重命名对服务器数据进行实时备份

    先上图,简单的windorm界面:此为最初的版本,后续会增加监听多个源目录的功能.log功能.进度条展示功能等. 1.初始化监听 /// <summary> /// 初始化监听 /// & ...

  8. C#DataGridView的简单使用

    首先创建一个DataGridView控件,然后创建列(包括列名的定义), 由于我不是和数据库进行连接,只是为了输出好看一点. 删除所有数据: while (this.dataGridView1.Row ...

  9. K8S+GitLab-自动化分布式部署ASP.NET Core(二) ASP.NET Core DevOps

    一.介绍 前一篇,写的K8S部署环境的文章,简单的介绍下DevOps(Development和Operations的组合词),高效交付, 自动化流程,来减少软件开发人员和运维人员的沟通.Martin ...

  10. C# 图片反色处理 图片夜间模式

    项目属性-->生成-->允许不安全代码勾上. 代码: /// <summary> /// 反色处理 /// </summary> private Bitmap In ...