ECharts-第一篇最简单的应用

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位置。

转载于:https://www.cnblogs.com/ZeroMZ/p/11402874.html

ECharts-第一篇最简单的应用相关推荐

angularjs学习第四天笔记（第一篇：简单的表单验证）
您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...
我的第一篇博文——简单的C/S模型
这几天在学习Linux环境下的基础socket编程,作为一个小实验,自己编写了一个最基本简单的C/S模型,然而并没有像我想当然的那样一次性成功.一些错误来源于概念的偏差,而一些来源于对细节的忽略.总的 ...
博客第一篇文章--简单的NTRU 加密算法的编程实现
前段时间选修信息安全实验课,为了完成课程目标,对NTRU加密算法进行了简单的编程实现.使用c#编程语言,完成了一个加解密winform应用程序. 首先对NTRU加解密算法简答的介绍一下.基于寻找格中最 ...
IPv6篇之简单为美
IPv6前言 IP以其简单.方便操作,迅速占领了网络通信的领域,最终实现了网络通信的统一,可惜设计者并未预料到IP膨胀速度如此之快,因此设计了IPv6,作为第二代IP协议横空出世.虽然IPv6技术理念 ...
一起实现RPC，超详细~~~ 第一篇
一起实现RPC,超详细!!! 第一篇一个简单的RPC通信逻辑如下: 服务端暴露其要提供服务的接口客户端通过动态代理调用服务端的接口方法,通过代理将要传输的信息发送到服务端(代理是为了让客户端不去关 ...
史上最简单的 SpringCloud 教程｜第一篇：服务的注册与发现（Eureka）
最新Finchley版本请访问: https://www.fangzhipeng.com/springcloud/2018/08/30/sc-f1-eureka/ 或者 http://blog.csd ...
Android四大组件之Activity（第一篇-简单使用）
Android四大组件之Activity(第一篇-简单使用) 前言一.Activity是什么? 二.如何使用 1.继承 2.重写onCreate() 总结文章目录前言一.Activity是什么 ...
第一篇博客——C语言实现简单的学生成绩管理系统
C语言简单实现学生成绩管理系统一.前言首先,要写一个管理系统必须要先搭出一个框架来,即明确自己要实现哪些功能,将每个功能都写陈一个函数,然后再去编写实现各个功能的函数,最后再思考各个函数之间的相互 ...
vue使用e-charts制作专题图（广西省为例）---第一篇
vue使用E-Charts制作专题图(广西省为例)---第一篇写博客是为了做笔记先给大家看一下效果图: "专题图"顾名思义就是地图的每一部分根据一定的标准,展现出不一样颜色,使 ...
如何介绍世界上第一台计算机,[世界第一台计算机]计算机简单的自我介绍第一篇...
无论是找工作还是申请学校,面试都是大家必经的一个过程.而每一场面试几乎都是以"自我介绍"开始的.那么面试计算机应该怎么自我介绍?以下是答.案.网 ZqNf.Com小编为您整理的计算 ...

ECharts-第一篇最简单的应用

ECharts-第一篇最简单的应用相关推荐

最新文章

热门文章