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 ...

随机推荐

React Native 【学习总结】-【常用命令】
前言刚接触RN,相信很多人无从下手,不知道下一步要干什么,能干什么,本次学习围绕这个问题,将RN的常用命令总结一下,帮助你快速上手架构理解光知道命令的作用,远远不够,如果知道命令背后的意义,才能 ...
Python坑系列：可变对象与不可变对象
在之前的文章 http://www.cnblogs.com/bitpeng/p/4748148.html 中,大家看到了ret.append(path) 和ret.append(path[:])的巨大 ...
Python：模块学习——sys模块
sys模块常见函数和变量 sys.argv:命令行参数,实现从程序外部向程序传递参数 [注]:(1) sys.argv[0] 表示代码本身的文件路径 (2)sys.argv是一个元组,可以用[ ]提取 ...
自己编写 Oracle 分页函数
CREATE OR REPLACE PACKAGE PACK_PAGINATION AS PAGESIZE CONSTANT ; TYPE TYRECORD_EMP IS RECORD( EMPNO ...
在linux下编译线程程序undefined reference to `pthread_create'
由于是Linux新手,所以现在才开始接触线程编程,照着GUN/Linux编程指南中的一个例子输入编译,结果出现如下错误:undefined reference to 'pthread_create'u ...
TP中if标签
if标签 If标签如果php中if语句的作用,if是用于流程控制的. 在ThinkPHP中if标签也是用于流程控制的. If标签的语法格式: <if condition=’条件表达式’> ...
FZU2125_简单的等式
题目想到了就是一个水题. 提示一下,S(x,m)是一个很小的数.(不超过100) 这样直接枚举这个数,然后求方程的整数解,并且判断是否满足条件即可. ——————(一开始还用Pollard大整数分解+ ...
ZOJ3591_Nim
题目的意思是给你n个ai,有多少种不同的连续段使得用该段数中所有的数字玩Nim游戏的先手必胜. 首先根据博弈论的知识,我们知道,要使先手必胜,那么只要保证所有的数的异或值不为0就可以了. 这个题目,给 ...
kettle、Oozie、camus、gobblin
kettle简介 http://www.cnblogs.com/limengqiang/archive/2013/01/16/KettleApply1.html Oozie介绍 http://blog ...
【比赛】HNOI2018 总结
一将功成万骨枯,我就是给那些队爷做基数的一.比赛过程 Day1 看完题,暴力好打,然后就打觉得第三题模型很好建啊,先看第三题吧(结果第三题是最..的) 图建出来,先看树的情况,设dp试一下结果一 ...

echarts 分组绘制柱状图

echarts 分组绘制柱状图的更多相关文章

随机推荐

热门专题