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 ...
随机推荐
- ES6的新特性（2）——let 与 const 增强变量声明
let 与 const 增强变量声明 ES6 新增了let命令,用来声明局部变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效,而且有暂时性死区的约束. 先看个var的常见 ...
- 关于《数据结构》课本KMP算法的理解
数据结构课上讲的KMP算法和我在ACM中学习的KMP算法是有区别的,这里我对课本上的KMP算法给出我的一些想法. 原理和之前的KMP是一样的https://www.cnblogs.com/wkfvaw ...
- 02慕课网《进击Node.js基础（一）》——CommonJs标准
是一套规范管理模块 每个js 为一个模块,多个模块作为一个包 node.js和Couchdb是对其的实现: 不同于jQuery 模块:定义.标识.引用(地址/模块名称) 模块类型: 核心模块http ...
- 随机生成30道四则运算-NEW
补充:紧跟上一个随机生成30道四则运算的题目,做了一点补充,可以有真分数之间的运算,于是需要在原来的基础上做一些改进. 首先指出上一个程序中的几个不足:1.每次执行的结果都一样,所以不能每天给孩子出3 ...
- 软工1816 · Alpha冲刺（5/10）
团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 后端代码复审 福大各个食堂的菜品口味量化.属性标记 组织前后端线下协作 接下来 ...
- 团队Alpha冲刺（四）
目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:丹丹 组员7:何家伟 组员8:政演 组员9:鸿杰 组员10:刘一好 组员:何宇恒 展示组内最新 ...
- Eclipse项目导入到Android Studio中
背景 最近需要将Eclipse中的android项目导入到Android Studio中!倒腾一番,记录如下! 步骤1 打开Android Studio(下文称AS),选择Import project ...
- java 基础 --final--008
finally:被finally控制的语句一定会执行,但是如果执行之前jvm退出了,就不会执行了.比如System.exit(0);final:常见的可以修饰类(该类不能被继承) 方法(方法不能被重写 ...
- PHP实现HTML页面静态化
随着网站的内容的增多和用户访问量的增多,无可避免的是网站加载会越来越慢,受限于带宽和服务器同一时间的请求次数的限制,我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化.一般情况下会从以下方面 ...
- [LeetCode] Climbing Sairs
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...