1、简单演示一个饼状图

准备好echarts-all.js

2、编写页面代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <!-- 引入 ECharts 文件 -->

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

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

    <script type="text/javascript">

    var myChart1 = echarts.init(document.getElementById('pie1'));

    option1 = {

        title:{

            text:'按类型统计',

            top:'bottom',

            left:'center',

            textStyle:{

                fontSize: 14,

                fontWeight: '',

                color: '#333'

            },

        },//标题

        tooltip: {

            trigger: 'item',

            formatter: "{a} <br/>{b}: {c} ({d}%)",

            /*formatter:function(val){   //让series 中的文字进行换行

                 console.log(val);//查看val属性，可根据里边属性自定义内容

                 var content = var['name'];

                 return content;//返回可以含有html中标签

             },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件

        },//提示框，鼠标悬浮交互时的信息提示

        legend: {

            show: false,

            orient: 'vertical',

            x: 'left',

            data: ['50%-学生', '25%-老师', '25%-家长']

        },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配

        graphic:{

            type:'text',

            left:'center',

            top:'center',

            style:{

                text:'用户统计\n'+'100', //使用“+”可以使每行文字居中

                textAlign:'center',

                font:'italic bolder 16px cursive',

                fill:'#000',

                width:30,

                height:30

            }

        },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多

        series: [

            {

                name:'用户统计',//tooltip提示框中显示内容

                type: 'pie',//图形类型，如饼状图，柱状图等

                radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试

                //roseType:'area',是否显示成南丁格尔图，默认false

                itemStyle: {

                    normal:{

                        label:{

                            show:true,

                            textStyle:{color:'#3c4858',fontSize:"18"},

                            formatter:function(val){   //让series 中的文字进行换行

                                return val.name.split("-").join("\n");}

                        },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档

                        labelLine:{

                            show:true,

                            lineStyle:{color:'#3c4858'}

                        }//线条颜色

                    },//基本样式

                    emphasis: {

                        shadowBlur: 10,

                        shadowOffsetX: 0,

                        shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色

                        textColor:'#000'

                    }//鼠标放在各个区域的样式

                },

                data: [

                    {value: 50, name: '50%-学生'},

                    {value: 25, name: '25%-老师'},

                    {value: 25, name: '25%-家长'},

                ],//数据，数据中其他属性，查阅文档

                color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色

            },//数组中一个{}元素，一个图，以此可以做出环形图

        ],//系列列表

    };

    myChart1.setOption(option1);

    </script>

</head>

</html>

3、在浏览器中打开页面

总结：echarts的使用

1》使用echarts.init(document.getElementById('pie1'));初始化一个ECharts显示位置html标签

2》编写自己的option

3》将加载到已经初始化的ECharts位置。

ECharts-第一篇最简单的应用的更多相关文章

  1. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  2. VueRouter爬坑第一篇-简单实践

    VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...

  3. 跟初学者学习IbatisNet第一篇

    写在前面的话:我自己也是一个初学者,写这个专题只是为了对学过知识的巩固,如果有什么不对的地方,欢迎大家指正…………………… 第一篇就简单介绍一下什么是IbatisNet,然后写一个简单的Demo,在后 ...

  4. 简单的抓取淘宝关键字信息、图片的Python爬虫|Python3中级玩家：淘宝天猫商品搜索爬虫自动化工具（第一篇）

    Python3中级玩家:淘宝天猫商品搜索爬虫自动化工具(第一篇) 淘宝改字段,Bugfix,查看https://github.com/hunterhug/taobaoscrapy.git 由于Gith ...

  5. spring 第一篇（1-1）：让java开发变得更简单(下)转

    spring 第一篇(1-1):让java开发变得更简单(下) 这个波主虽然只发了几篇,但是写的很好 上面一篇文章写的很好,其中提及到了Spring的jdbcTemplate,templet方式我之前 ...

  6. （转） 史上最简单的 SpringCloud 教程 | 第一篇： 服务的注册与发现（Eureka）

    一.spring cloud简介 spring cloud 为开发人员提供了快速构建分布式系统的一些工具,包括配置管理.服务发现.断路器.路由.微代理.事件总线.全局锁.决策竞选.分布式会话等等.它运 ...

  7. Golang学习-第一篇 Golang的简单介绍及Windows环境下安装、部署

    序言 这是本人博客园第一篇文章,写的不到位之处,希望各位看客们谅解. 本人一直从事.NET的开发工作,最近在学习Golang,所以想着之前学习的过程中都没怎么好好的将学习过程记录下来.深感惋惜! 现在 ...

  8. redis 一百二十篇（简单介绍）之第一篇

    前言 总结自己的redis,日常使用不是特别频繁,所以比较基础. 开篇 redis 是无关系型数据库,因为其实内存数据库,所以常常和他的竞争对手memcached对比,因为两者原理基础相似,存储方式也 ...

  9. Python爬虫小白入门（四）PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  10. Three.js 第一篇：绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

随机推荐

  1. Linux 安装 Composer

    Linux 安装 Composer  入门 练习环境: 虚拟机:Oracle VM VirtualBox. 系统:CentOS 7. 安装方式一: 参考网址:https://learnku.com/c ...

  2. python3-安装第三方模块

    在Python中,安装第三方模块,是通过包管理工具pip完成的. 如果你正在使用Mac或Linux,安装pip本身这个步骤就可以跳过了. 如果你正在使用Windows,请参考安装Python一节的内容 ...

  3. x86-x64寄存器及CallStack调用栈

    Intel 32位体系结构(简称IA32)处理器包含8个通用寄存器,如下图所示: EIP是指令寄存器,指向处理器下条等待执行的指令地址(代码段内的偏移量),每次执行完相应汇编指令EIP值就会增加.EI ...

  4. NOIP2017 D1T1 小凯的疑惑

    洛谷P3951 看到题目,很容易想到这一题是求使ax+by=c(a,b,c∈N)无非负整数解的最大c 由裴蜀定理可知方程一定有整数解(a,b互素,gcd(a,b)=1|c) 解法一:暴力枚举 看到题目 ...

  5. vue-cli3.0以上项目中引入jquery的方法

    这里配置的是vue-cli3.0引入jquery的方法,不是vue-cli2.0的配置方法 一.安装jquery npm install jquery --save 二.在vue.config.js ...

  6. web上传大文件(>4G)有什么解决方案?

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  7. 求大师点化,寻求大文件(最大20G左右)上传方案

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  8. permutation 2

    permutation 2 猜了发结论过了== $N$个数的全排列,$p_{1}=x,p_{2}=y$要求$|p_{i+1}-p_{i}|<=2|$求满足条件的排列个数. 首先考虑$x=1,y= ...

  9. [CSP-S模拟测试]:寿司（暴力）

    题目描述 小$c$是一名$oier$.最近,他发现他的数据结构好像学傻了.因为他在刷题时碰到了一道傻逼数据结构题,强行使用了平衡树来解决,卡着时间$AC$.为此,他被狠狠地嘲讽了一番.于是,小$c$找 ...

  10. 高通Camera bring up软件流程【转】

    本文转载自:http://blog.csdn.net/liwei16611/article/details/51279658 高通camera bring up分为两种类型:YUV和bayerbrin ...