见代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>

    <script>

    var myChart = echarts.init(document.getElementById('main'));

    myChart.title = '坐标轴刻度与标签对齐';

    option = {

        color: ['#3398DB'],

        tooltip : {

            trigger: 'axis',

            axisPointer : {            // 坐标轴指示器，坐标轴触发有效

                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'

            }

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        xAxis : [

            {

                type : 'category',

                data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

                axisTick: {

                    alignWithLabel: true

                }

            }

        ],

        yAxis : [

            {

                type : 'value'

            }

        ],

        series : [

            {

                name:'直接访问',

                type:'bar',

                barWidth: '60%',

                data:[10, 52, 200, 334, 390, 330, 220],

                itemStyle: {

                    normal: {

                        color: function(params) {

          　　　　　　      var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];

                            //若返回的list长度不足，不足部分自动显示为最后一个颜色

          　　　　　　        return colorList[params.dataIndex]

         　　　　　　       },

                        label: {

                            show: true,

                            position: 'top'

                        }

                    }

                }

            }

        ]

    };

    myChart.setOption(option)

    </script>

</body>

</html>

效果如下：

Echarts 简单报表系列一：柱状图的更多相关文章

  1. Echarts 简单报表系列四：雷达图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Echarts 简单报表系列三：饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Echarts 简单报表系列二：折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. RDLC报表系列(五) 简单的图表-柱状图

    继续接上一篇的内容,本文主要是讲图标的内容,本文就是简单的图标,复杂的柱状图和折线图在下一文章中介绍. 数据源还是上文RDLC报表系列(四) 矩阵中的相同 1.还是继续使用demo2的文件

  5. RDLC报表系列(一) 简单的动态数据绑定和配置

    RDLC系列链接 RDLC报表系列(一) 简单的动态数据绑定和配置  RDLC报表系列(二) 行分组 RDLC报表系列(三) 总计和折叠 RDLC报表系列(四) 矩阵 RDLC报表系列(五) 简单的图 ...

  6. 用stimulsoft Reports报表工具制作简单报表的过程

    这是在数据库sql server中People表的数据

  7. HTML5简单入门系列（五）

    前言 本篇将讲述HTML5的服务器发送事件(server-sent event) Server-Sent 事件 Server-Sent 事件是单向消息传递,指的是网页自动获取来自服务器的更新. 以前的 ...

  8. FastReport.Net使用：[3]简单报表一

    如何设置报表栏 1.右键报表栏相关模块进行删除. 2.使用菜单栏中的报表菜单进行添加/删除相应的栏目,选中栏目的背景会变得高亮. 3.使用报表栏编辑器. 可通过点击报表栏顶部的“设置报表栏”或者菜单栏 ...

  9. echarts图形报表缓存问题(option数据缓存)

    这几天我在工作中用到了echarts开发报表.每次查询出来的数据都是新的,但是echart展现的图形报表却还是之前的数据.网上找了搜索了很多次也没能解决,后面加了技术群才解决的. 我开始已经确定是报表 ...

随机推荐

  1. sed命令使用详解

        内容来自马哥视频,感谢马哥精彩讲解 sed:编辑器 sed: Stream EDitor, 行编辑器,逐行进行处理 grep:实现文本过滤 awk:文本报告生成器 sed默认不编辑源文件,而是 ...

  2. springboot整合thymeleaf+tiles示例

    网上关于此框架的配置实在不多,因此想记录下来以防忘记 因为公司框架基于上述(公司采用gradle构建项目,楼主采用的是maven),所以楼主能少走些弯路: 1.创建springboot-maven项目 ...

  3. Python open操作文件

    操作文件 # coding=utf-8 支持中文 """ China Japan France England """ f = open(& ...

  4. R 的内部机制

    在前面的章节中,我们已经学习了 R 语言的基础功能,并且了解了如何运用向量.矩阵.列表和数据框表示不同形式的数据,以及用内置函数解决简单的问题.但是仅仅了解这些功能并不能解决所有问题.现实中的数据分析 ...

  5. C++.可变参数_ZC测试

    ZC:环境: Win7 x64(旗舰版),Microsoft Visual Studio 2010(版本 10.0.30319.1 RTMRel, Microsoft .NET Framework(版 ...

  6. IPC 之 Messenger 的使用

    一.概述 Messenger 是一种轻量级的 IPC 方案,它的底层实现是 AIDL ,对 AIDL 进行了封装,方便了对它的使用.Messenger 一次只处理一个请求,所以在服务端不用考虑线程同步 ...

  7. 餐E评echarts

    所需要的数据结构 option = { num:1212,//商圈数 numRate:34%,//商圈增长率 activation:1231,//活跃度 activationRate:23%,//活跃 ...

  8. 在线html编辑器

    1.http://liveweave.com/ 2.有时间研究下这个. http://dabblet.com/gist/4034534 3.10个免费的在线编辑器. https://www.ev这个需 ...

  9. 数据结构（C语言版）-第7章 查找

    7.1 查找的基本概念 查找表:    由同一类型的数据元素(或记录)构成的集合静态查找表:    查找的同时对查找表不做修改操作(如插入和删除)动态查找表:    查找的同时对查找表具有修改操作关键 ...

  10. Arduino 数字函数总结

    Arduino 有三个数字函数,分别是:pinMode( ), digitalWrite( ),digitalRead( ).三个函数各有其作用,pinMode( ) 在初始化 setup( )函数中 ...