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 ...
随机推荐
- php的大小写敏感问题整理
php的大小写敏感问题整理 今天在开发php的过程中,因为命名大小写的问题导致代码错误,所以从网上整理了php的大小写敏感的一些资料,需要的朋友可以参考下. PHP对大小写敏感问题的处理比较乱,写 ...
- Requests库入门——应用实例-网络图片的爬取与保存（好看的小姐姐≧▽≦）
在B站学习这一节的时候,弹幕最为激烈,不管大家是出于什么目的都想体验一下网络爬虫爬取图片的魅力,毕竟之前的实例实话说都是一些没有太大作用的信息. 好了,直接上代码: import requests i ...
- 2016-2017 ACM-ICPC, NEERC, Northern Subregional Contest Problem I. Integral Polygons
题目来源:http://codeforces.com/group/aUVPeyEnI2/contest/229510 时间限制:2s 空间限制:256MB 题目大意: 给定一个凸多边形,有一种连接两个 ...
- 读<<我是IT小小鸟>>
<倔强><怒放的生命>以歌曲的含义来引入文章,让文章可以与音乐产生共鸣让读者可以直接明了的就直击到本篇文章的中心含义是非常受用的,在文中写了许多以自己为视角,以自己的成长经历来 ...
- java锁有哪些类（转）
转载来源:http://www.cnblogs.com/lxmyhappy/p/7380073.html 1.Java都有哪些锁? 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/ ...
- 配置resin web方式部署项目
写在前面,推荐下载resin4.0.47版本.其它版本没有测试 最近打算做一个小项目,然后容器选用了resin.想通过web提交war文件的方式 进行部署,更新代码也方便. 试了resin最新的版本( ...
- oracle和DB2的差异
1.简介 当今IT的环境正经历着剧烈的变化,依靠单一的关系型数据库管理系统(RDBMS)管理数据的公司开始逐渐减少.分析家的报告指出 ,今天超过90%的公司都拥有不只一种RDBMS.在现在紧张的经济情 ...
- Laravel 框架集成 UEditor 编辑器的方法
㈠. 背景 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 ...
- Binlog的三种模式
binlog模式分三种(row,statement,mixed) 1.Row 日志中会记录成每一行数据被修改的形式,然后在slave端再对相同的数据进行修改,只记录要修改的数据,只有value,不会有 ...
- 【.Net】vs2017 自带发布工具 ClickOnce发布包遇到的问题
一.遇到的问题 在安装了vs2017 社区版(Community)之后 想打包安装程序(winform) 还是想用之前的 installshield来打包 发现居然打不了,在官网查了 ins ...