echarts功能配置实例----柱/折线、饼图
---恢复内容开始---
echarts中的柱状图和折线图的参数配置可以共用，一般只需要修改图表类型这一个参数即可。
一、echarts最简单的实例
1、折线图/柱状图
<html>
<head>
<script src="resource/jquery-3.3.1.min.js"></script>
<script src="resource/echarts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//创建存放图表的echar
var chart = echarts.init($('#echartsLineDemo')[]);
//echars的参数配置项
option = {
xAxis: {
//坐标轴类型，大致可分类目轴category，x轴；数值轴value，y轴；
type: 'category',
//坐标轴名称数组
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
//需要显示的数据
data: [, , , , , , ],
//图表类型：line是折线、bar是柱状图、pei是饼图。
type: 'line'
}]
};
//添加option
chart.setOption(option);
}); </script>
</head>
<body>
<div id="echartsLineDemo" style="height: 500px;width: 800px;" > </div> </body>
</html>
补充：折线图和柱图图的配置类似，只需把图表类型修改成bar即可。
2、饼图
只需要更改option的配置即可。
option = {
title : {
text: '某站点用户访问来源',
x:'center'
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
],
}
]
};
echarts功能配置实例----柱/折线、饼图的更多相关文章
- Keepalived 配置实例
Keepalived 是一款轻量级HA集群应用,它的设计初衷是为了做LVS集群的HA,即探测LVS健康情况,从而进行主备切换,不仅如此,还能够探测LVS代理的后端主机的健康状况,动态修改LVS转发规则 ...
- linux邮件服务器postfix配置实例
linux邮件服务器postfix配置实例(超级详细!!!) 2013-03-13 13:30:21 标签:邮件服务器 linux 1. 系统安装:1)centos4.3 选上MAIL组件里的全部.2 ...
- OGG学习笔记02-单向复制配置实例
OGG学习笔记02-单向复制配置实例 实验环境: 源端:192.168.1.30,Oracle 10.2.0.5 单实例 目标端:192.168.1.31,Oracle 10.2.0.5 单实例 1. ...
- IPSEC VPN配置实例
TL-R400VPN应用——IPSEC VPN配置实例 TL-ER6120是TP-LINK专为企业应用而开发的VPN路由器,具备强大的数据处理能力,并且支持丰富的软件功能,包括VPN.IP/MAC 地 ...
- Nginx常用配置实例（4）
Nginx作为一个HTTP服务器,在功能实现方面和性能方面都表现得非常卓越,完全可以与Apache相媲美,几乎可以实现Apache的所有功能,下面就介绍一些Nginx常用的配置实例,具体包含虚拟主机配 ...
- springMVC注解方式+easyUI+MYSQL配置实例
刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+e ...
- Tomcat配置实例
转自:https://www.cnblogs.com/kismetv/p/7228274.html 目录 一.一个server.xml配置实例 二.server.xml文档的元素分类和整体结构 1.整 ...
- Keepalived详解（三）：Keepalived基础功能应用实例【转】
Keepalived基础功能应用实例: 1.Keepalived基础HA功能演示: 在默认情况下,Keepalived可以实现对系统死机.网络异常及Keepalived本身进行监控,也就是说当系统出现 ...
- MySQL主从备份配置实例
转载自:https://www.cnblogs.com/ahaii/p/6307648.html MySQL主从备份配置实例 场景: 1.主服务器192.168.0.225.从服务器192.168.0 ...
随机推荐
- 使用HttpClient发送Get/Post请求 你get了吗？
HttpClient 是Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议 ...
- 第13组_16通信3班_045_OSPFv3作业
IPv6 路由-OSPFv3 实验目的 1. 掌握 OSPFv3 的配置方法 2. 掌握在帧中继环境下 OSPFv3 的配置方法 3. 掌握 OSPFv3 NSSA 的配置方法 4. 学会查看 O ...
- ionic3 生成android 如何控制versionCode版本号
ionic 项目中生成 android 如何控制版本号呢. 1.在项目的配置文件下的config.xml 来我们可以看到 <widget id="com.ionicframework. ...
- Linux编程 23 shell编程(结构化条件判断 命令if -then ， if-then ... elif-then ...else，if test)
一.概述 在上一篇里讲到了shell脚本,shell按照命令在脚本中出现的顺序依次进行处理,对于顺序操作已经足够了,但许多程序要求对shell脚本中的命令加入一些逻辑流程控制,这样的命令通常叫做 结构 ...
- Spring Boot 系列（七）Swagger2-生成RESTful接口文档
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服 ...
- 【原创】Python第二章——行与缩进
Python的基本组成——逻辑行和缩进 a="我是一个物理行" a="""我是一个逻辑行 因为我一条语句便跨越了2个物理行""&q ...
- 菜鸟系列docker——docker镜像中(4)
docker镜像命令 该章节主要介绍docker image相关命令实践操作,建议都一起跑一边 1. docker images 列举本机docker镜像 [centos@jiliguo docker ...
- 3.Magicodes.NET框架之路——预览（一）
3.Magicodes.NET框架之路——预览(一) 前言 一眨眼,已经过去两个多月了 ,哥已经火力全开了(业余时间和精力,甚至为此放弃了各种私活),所以大家不要抱怨慢哈.编程犹如逆水行舟,不进则退. ...
- 翻译：delete语句(已提交到MariaDB官方手册)
本文为mariadb官方手册:DELETE语句的译文. 原文:https://mariadb.com/kb/en/delete/ 我提交到MariaDB官方手册的译文:https://mariadb. ...
- μC/OS-II 任务的同步与通信 --- 消息邮箱
简介 如果把数据缓冲区的指针赋给一个事件控制块的成员 OSEventPrt,同时使事件控制块的成员 OSEventType 为常数 OS_EVENT_TYPE_MBOX,则该事件控制块就叫做消息邮箱, ...