echarts 分组绘制柱状图
示意图：
代码如下：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '坐标轴刻度与标签对齐'; var _xAxis = [
'淡白', '淡红', '红', '暗', '尖红', '边尖红',
'明显','不明显',
'明显','不明显',
'明显','不明显',
'薄腻','厚腻','薄',
'黄','白','薄白'];
var _yAxis = [10, 52, 20, 34, 30, 30,
0,13,
32,14,
3,23,
39,1,32,
12,12,12]; option = {
title: {
text: '舌象显示统计（次）',
textStyle:{
color:"#666666",
fontSize: 16,
fontWeight:"normal"
},
top:"8",
left:"17"
},
color: ['#297E3A'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : _xAxis,
splitArea: {
show: true,
areaStyle: {
color: ['rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
,'rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
,'rgba(204,232,207,0.8)','rgba(204,232,207,0.8)','rgba(204,232,207,0.8)'
,'rgba(250,250,250,0.3)','rgba(250,250,250,0.3)','rgba(250,250,250,0.3)'
]
}
}
}
],
yAxis : [{
type : 'value'
}],
series : [
{
name:'次数',
type:'bar',
barWidth: '50%',
data: _yAxis,
itemStyle: {
normal: {
//柱形图圆角，初始化效果
barBorderRadius:[50, 50, 0, 0],
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
}
},
label: {
normal: {
show: true,
color: '#000000',
position: 'top'
}
}
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
echarts 分组绘制柱状图的更多相关文章
- 使用 highchart 绘制柱状图的通用方法与接口
本文给出使用 highchart 绘制柱状图的通用方法与接口, 只要指定相应的数据结构和配置, 就可以直接拿来使用. 一. 数据结构与基本接口 一般绘制图形, 会涉及到较复杂的数据结构, 比如使 ...
- 【带着canvas去流浪】（1）绘制柱状图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...
- 前端统计图 echarts 实现简单柱状图
前端统计图 echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...
- 带着canvas去流浪系列之一：绘制柱状图
[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...
- Android之使用AchartEngineActivity引擎绘制柱状图、曲线图
1.简介 AChartEngine(简称ACE)是Google的一个开源图表库(for Android).它功能强大,支持散点图.折线 .关于里面类的具体使用,请下载响应的文档说明(主页上有). 2. ...
- python 绘制柱状图
python 绘制柱状图 import matplotlib.pyplot as plt import numpy as np # 创建一个点数为 8 x 6 的窗口, 并设置分辨率为 80像素/每英 ...
- 第167天：canvas绘制柱状图
canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- Python——使用matplotlib绘制柱状图
Python——使用matplotlib绘制柱状图 1.基本柱状图 首先要安装matplotlib(http://matplotlib.org/api/pyplot_api.htm ...
- Python 绘制 柱状图
用Python 绘制 柱状图,使用的是bar()函数. 一个简单的例子: # 创建一个点数为 8 x 6 的窗口, 并设置分辨率为 80像素/每英寸 plt.figure(figsize=(10, 1 ...
随机推荐
- 第三次ScrumMeeting博客
第三次ScrumMeeting博客 本次会议于10月27日(五)22时整在3公寓725房间召开,持续10分钟. 与会人员:刘畅.方科栋.窦鑫泽.张安澜. 1. 每个人的工作(有Issue的内容和链接) ...
- Swing State: Consistent Updates for Stateful and Programmable Data Planes
Swing State: Consistent Updates for Stateful and Programmable Data Planes 年份:2017 来源:ACM 本篇论文解决的问题 B ...
- FormsAuthentication.SetAuthCookie 方法登录
FormsAuthentication.SetAuthCookie 方法,登录的原理. FormsAuthentication.SetAuthCookie 方法登录的过期时间. 登录相关阅读 asp. ...
- int 和Integer
Java是一个近乎纯洁的面向对象编程语言,但是为了编程的方便还是引入不是对象的基本数据类型,但是为了能够将这些基本数据类型当成对象操作,Java为每一个基本数据类型都引入了对应的包装类型(wrappe ...
- laravel连接多个不同数据库的单例类
在連接多個不同數據庫時,需要寫多個連接,爲了簡化該操作,可以使用該基類,不同的數據庫只要建立好相對應的類繼承該類,就可以使用ORM模型進行操作了. class singletonInstance { ...
- django的第一个问题
/usr/local/lib/python2.7/dist-packages/allauth/account/utils.py in setup_user_email, line 258 /usr/l ...
- delphi使用SQL的教程4(使用Params属性为参数赋值 )
17.4.1 使用Params属性为参数赋值 TQuery部件具有一个Params属性,它们在设计时不可用,在程序运行过程中可用,并且是动态建立的,当为TQuery部件编写动态SQL 语句时, D ...
- 第77天：jQuery事件绑定触发
一.元素操作 1. 高度和宽度 $(“div”).height(); // 高度 $(“div”).width(); // 宽度 .height()方法和.css(“height”)的区别: 返回值不 ...
- 详解免费高效实用的.NET操作Excel组件NPOI(转)
有时间研究一下NPOI http://www.cnblogs.com/pengze0902/p/6150070.html
- solrCloud源码分析之CloudSolrClient
CloudSolrClient是solrj提供的客户端与solrCloud交互的类.该类的实例与zookeeper进行通信来确定solrCloud collections中的solr endpoint ...