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 ...
随机推荐
- Kali学习笔记25：Arachni使用（实现分布式扫描）
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Arachni不同于上次介绍的nikto和skipfi ...
- nginx配置tp5的pathinfo模式并隐藏后台入口文件
server { listen 2223; server_name manage; access_log /data/wwwlogs/access_manage.log combined; root ...
- ubuntu 16.04下安装ADB
1. 安装adb工具. 从谷歌的网站下载LINUX adb调试工具(FQ),当然可以随便百度一个一大堆. http://developer.android.com/tools/device.html ...
- g++编译的makefile模板库和脚本
编译C++文件,特别是多文件的时候,经常要找模板,这里为了后面方便,就自己做了一个模板. makefile模板:Makefile # Object files to either reference ...
- mysql 架构篇系列 3 复制运行状态监控与选项参数说明
一. 概述 在上一篇中,搭建了一主一从的复制架构,这篇通过一些诊断方法来了解复制的运行状态和一些选项参数说明.上次mysql主从服务关机,今天在打开mysql服务,出现了错误信息. 1.首先 启动主从 ...
- mysql 开发基础系列1 表查询操作
在安装完数据库后,不管是windows 还是linux平台, mysql的sql命令都大同小异,相关命令都是相同的,每个命令结束后 都以 ; 结尾, 注意在windows平台中表名是不区分大小写 ...
- Docker概念学习系列之详谈Docker 的核心组件与概念（5）
不多说,直接上干货! 见[博主]撰写的https://mp.weixin.qq.com/s/0omuSAjF5afJBZBxhbKTqQ 想要了解Docker,就必须了解Docker的五大核心概念 ...
- SLG手游Java服务器的设计与开发——架构分析
微信公众号[程序员江湖] 作者黄小斜,斜杠青年,某985硕士,阿里 Java 研发工程师,于 2018 年秋招拿到 BAT 头条.网易.滴滴等 8 个大厂 offer,目前致力于分享这几年的学习经验. ...
- [java核心篇02]__内部类
前言 其实我们在前面已经初步接触到内部类了,但是我们去对它的作用并不胜了解.只是简单的知道了类的定义也是可以嵌套的,定义在一个类里面的类就是内部类. class out{ private String ...
- SpingBoot 属性加载
属性加载顺序 配置属性加载的顺序 开发者工具 `Devtools` 全局配置参数: 单元测试上的 `@TestPropertySource` 注解指定的参数: 单元测试上的 `@SpringBootT ...