见代码：

<!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. NOIP2018退役祭

    退役感受 在写下这个标题的时候,我的心情是复杂的,无非就是感觉像对一位将要赶往战场的士兵说:"你的战争已经输掉了." 退役了,没有什么好说的.无论再怎么抱怨这题出的真烂也无法改变了 ...

  2. 【Java】【路径】

    [java中Class.getResource用法(用于配置文件的读取)] 用JAVA获取文件,听似简单,但对于很多像我这样的新人来说,还是掌握颇浅,用起来感觉颇深,大常最经常用的,就是用JAVA的F ...

  3. _spellmod_on_learn、_spellmod_on_remove

    _spellmod_on_learn._spellmod_on_remove,这俩表分别控制学习技能和遗忘技能时调用的GM命令.例如你制作了一个技能,学习炼金术这个专业时给玩家,遗忘炼金术这个专业时同 ...

  4. @Autowired 警告 Field injection is not recommended Spring @Autowired注入

    问题: 一. 在IDEA升级2017版后,发现以前使用的 @Autowired 出现了个警告 Field injection is not recommended. @Autowired的三种使用方式 ...

  5. nodejs导出excel

    //导出Excel var nodeExcel = require("excel-export"); var fs = require("fs"); var c ...

  6. 非常好的 gdb tui 的文章

    http://beej.us/guide/bggdb/ Help Commands help command Get help on a certain command apropos keyword ...

  7. springBoot springSecurty: x-frame-options deny禁止iframe调用

    springBoot springSecurty:  x-frame-options deny禁止iframe调用 https://blog.csdn.net/whiteforever/article ...

  8. 20171104xlVBA各人各科进退

    Sub 各班个人各科进步幅度() Dim dRank As Object Set dRank = CreateObject("Scripting.Dictionary") Dim ...

  9. android--------自定义控件 之 ViewGroup

    前面几篇讲了自定义控件的组合控件,地址:http://www.cnblogs.com/zhangqie/p/8985612.html 今天这篇博文主要来说说 自定义控件的 ViewGroup. 什么是 ...

  10. Confluence 6 归档一个空间

    当你认为一个空间不再需要实时进行编辑,但你还希望在后面某个时候能够对空间重新进行访问编辑的时候,你可以对空间进行归档.归档一个空间,这样你可以让你归档的空间让最少的人能看见,但是你的空间还是可以在 C ...