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 ...
随机推荐
- Seven super tips for successful selling on Amazon
Check for orders daily: To ship quickly you need to find out about orders promptly. We will e-mail y ...
- Beta周王者荣耀交流协会第六次会议
1.立会照片 成员王超,高远博,冉华,王磊,王玉玲,任思佳,袁玥全部到齐. master:袁玥 2. 时间跨度 2017年11月15日 19:00 — 19:10 ,总计10分钟. 3. 地点 一食堂 ...
- c# WPS DLL及其调用
1.dll分享(含xsl及docx的dll) 链接:https://pan.baidu.com/s/1c1ImV14OndmvIb4W-_WL2A 密码:d2rx 2.方法: 1.先在类的前面(类外面 ...
- DL开源框架Caffe | 模型微调 （finetune）的场景、问题、技巧以及解决方案
转自:http://blog.csdn.net/u010402786/article/details/70141261 前言 什么是模型的微调? 使用别人训练好的网络模型进行训练,前提是必须和别人 ...
- Spring中jdbc Template使用
http://1358440610-qq-com.iteye.com/blog/1826816
- 2nd 本周例行报告
每周例行报告 1.个人项目:词频统计更新 C类型 C内容 S开始时间 E结束时间 I间隔(min) T净时间(min) 分析 功能分析 8:30 10:00 20 70 学习 查阅资料 10:00 1 ...
- 【C++】C++ static关键字详解
static的作用 1.隐藏 当我们编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性,其他的源文件也能访问.如,我们有源文件source1.cpp定义了一个全局变量i和函数Fu ...
- linux下面Zookeeper的单机模式（standalone）
1.下载 zk下载地址 http://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/ 我用的是http://mirrors.tuna.tsinghua.e ...
- jQuery树形控件zTree
初始化如下: function zTreeInit(){ parentCode = ""; setting = { view: { dblClickExpand: false, s ...
- centos中apache自用常用额外配置记录(xwamp)
xwamp套件中apache配置,记录下,以免忘记. 配置路径 ${wwwroot_dir}/conf/httpd.conf 配置内容 <ifmodule mod_deflate.c> D ...