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 ...
随机推荐
- Python模块random使用详情
python常用模块目录 1.random.random()#用于生成一个0到1的随机浮点数:0<= n < 1.0 import random mcw = random.random() ...
- 【Alpha】阶段第一次Scrum Meeting
[Alpha]阶段第一次Scrum Meeting 工作情况 团队成员 今日已完成任务 明日待完成任务 刘峻辰 后端接口开发 测试接口,修正bug 赵智源 撰写测试方案书 部署实际任务和编写测试样例 ...
- 【IdentityServer4文档】- 启动和概览
启动和概览 有两种基本的方式来启动一个新的 IdentityServer 项目: 从空项目开始(从头开始) 从 Visual Studio 的 ASP.NET Identity 模板开始 假如您从头开 ...
- HDU 1257 最少拦截系统（最长递减子序列的条数）
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1257 题解: #include<iostream> #include<cstdio ...
- 复利计算C转java版
import java.util.Scanner; public class Compound_int { public static void main(String[] args) { tip() ...
- maven 添加tomcat依赖
https://my.oschina.net/angel243/blog/178554
- PHP中面向对象编程思想的3个特征
面向对象编程思想的3个特征: 封装: 无非是一个大的指向思想,目的是为了将一个类设计得更为健壮! 其基本做法是: 尽可能地将一个类的成员私有化,只开放那些必不可少的对外的属性或方法,能private的 ...
- Thread的run()与start()的区别
java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...
- [LeetCode] Search in Rotated Array II
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...
- 【JQuery】使用JQuery 合并两个 json 对象
一,保存object1和2合并后产生新对象,若2中有与1相同的key,默认2将会覆盖1的值 1 var object = $.extend({}, object1, object2); 二,将2的值合 ...