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. C++实现排序算法

    稳定性:快速 希尔 选择 堆排序不稳定 时间复杂度:平均情况下,快速.希尔.归并和堆排序的时间复杂度均为O(nlog2(n)),其他都是O(n^2).最坏情况下,快排的时间复杂度为O(n^2) #in ...

  2. 基于GitLab与Git Extensions搭建版本控制工具

    1.背景 大家知道GitHub是现在非常流行的代码托管工具,但是如果有些项目不想开源的话,则需要付费,因此萌生了自己搭建一个Git的版本控制工具,供内网使用.GitLab则是个好的选择,但是GitLa ...

  3. CentOS7 - 给VMwear Workstation 15安装VMwear tools

    操作系统:CentOS 7 VMwear Workstation :15 Pro 最简单方法,打开shell,输入下面命令: yum install open-vm-tools -y 参考: http ...

  4. JQuery Mobile - 如何让listview不显示向右的箭头？

    先看一下有向右箭头的截图吧 这个listview第二个项目,就有向右的箭头,如果单纯显示具体数据,没有扩展显示的内容,那么这个向右的箭头就是多余的,在这种情况下,最好是去掉这个向右箭头,程序中已经在第 ...

  5. Python3.5 学习八

    #动态导入 官方建议import importlibimport_str="lib.aa"lib=importlib.import_module(import_str)obj=li ...

  6. python的super用法及含义

    注释:以下都是在python2.7版本验证的 总括:1.python解决二义性问题,经历了深度优先算法.广度优先算法.拓扑排序算法,目前python的版本都是使用拓扑算法(C3)    2.严谨sup ...

  7. Mysql分析-profile详解

    一.前言当我们要对某一条sql的性能进行分析时,可以使用它. Profiling是从 mysql5.0.3版本以后才开放的.启动profile之后,所有查询包括错误的语句都会记录在内.关闭会话或者se ...

  8. 利用nginx实现负载均衡

    1.安装nginx和tomcat 我这里是使用docker安装的.安装流程可参照 dockerfile 这里安装了两个tomcat,端口分别是42000和42001.第二个tomcat的首页随便加了些 ...

  9. pymongo学习第1篇——增删改查

    参考文档: 1.https://docs.mongodb.org/getting-started/python/ 2.http://api.mongodb.org/python/current/api ...

  10. php 词法分析，语法分析

    php的词法分析 可以理解为 通过一定的规则,把输入的代码 区分出哪些是 是$开头的变量, 哪些是 以两个单引号括起来的字符串,哪些是以两个双引号括起来的字符串 等等, 这些区分出来的东西 称为tok ...