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 ...
随机推荐
- Python学习笔记【第五篇】：基础函数
一.函数:函数定义关键字def 后跟函数名称 def 函数名(参数): ... 函数体 ... 返回值 案例: # 定义函数 def say_hei( ...
- postgresql 日常sql
查看服务进程: select pid,usename,client_addr,client_port from pg_stat_activity; 查看当前数据库实例的版本: select ve ...
- 深入分析Java I/O的工作机制 （一）
此篇博客看至许令波的深入分析javaWeb内幕书籍, 此篇博客写的是自己看完之后理解的重点内容,加一些理解,希望对你有帮助. 1.Java的I/O类库的基本架构 先说一下什么是类库:可以说是类的集合, ...
- 使用C# (.NET Core) 实现简单工厂(Simple Factory) 和工厂方法设计模式 (Factory Method Pattern)
本文源自深入浅出设计模式. 只不过我是使用C#/.NET Core实现的例子. 前言 当你看见new这个关键字的时候, 就应该想到它是具体的实现. 这就是一个具体的类, 为了更灵活, 我们应该使用的是 ...
- 通过 Emoji 表情标识 Git 每次提交的信息
在 Git 提交时我们可以通过附加 emoji 表情来着重提醒其他开发人员本次地更改重点,也就是说我们可通过不同的表情可以快速地知道这次提交具体做了哪方面地工作. 比如说本次提交我添加了一个新的单元测 ...
- ubuntu16.04 服务器允许远程连接
ubuntu默认安装了openssh-client,openssh-server需要手动安装. 查看是否安装了ssh服务 apt-cache policy openssh-client openssh ...
- 课程五(Sequence Models)，第三周（Sequence models & Attention mechanism） —— 1.Programming assignments：Neural Machine Translation with Attention
Neural Machine Translation Welcome to your first programming assignment for this week! You will buil ...
- Android--UI之GridView
前言 这篇博客介绍一下Android平台下,GridView控件的开发.针对GridView控件的一些常用属性.方法,以及注意事项进行讲解,最后将以一个Demo展示GridView控件的使用. Gri ...
- Apache-Flink深度解析-概述
摘要: Apache Flink 的命脉 "命脉" 即生命与血脉,常喻极为重要的事物.系列的首篇,首篇的首段不聊Apache Flink的历史,不聊Apache Flink的架构, ...
- Mysql加锁过程详解（4）-select for update/lock in share mode 对事务并发性影响
Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...