见代码：

<!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. UVa 11488 超级前缀集合（Trie的应用）

    https://vjudge.net/problem/UVA-11488 题意: 给定一个字符串集合S,定义P(s)为所有字符串的公共前缀长度与S中字符串个数的乘积.比如P( {000, 001, 0 ...

  2. HDU 1403 Longest Common Substring（最长公共子串）

    http://acm.hdu.edu.cn/showproblem.php?pid=1403 题意:给出两个字符串,求最长公共子串的长度. 思路: 刚开始学后缀数组,确实感觉很难,但是这东西很强大,所 ...

  3. java根据URL获取HTML内容

    之前我写脚本,是想获取HTML内容的. 但是呢...一方面编码困扰着我,于是我写了这个: java根据URL获取网页编码 然后呢,每个网站是不是GZIP还得判断,贼麻烦... 但是没办法啊,麻烦也得写 ...

  4. Codeforces 767E Change-free

    题目链接:http://codeforces.com/contest/767/problem/E 居然是一个瞎几把贪心(E比B水系列) 考虑要每一次操作至少要用${\left \lfloor \fra ...

  5. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  6. python win32api 如何用代码模拟点击网页confirm框的确定按钮

    mshtml.IHTMLDocument2 doc = (mshtml.IHTMLDocument2)webBrowser1.Document.DomDocument; doc.parentWindo ...

  7. Centos7下安装memcached

    1. which memcached //如果已经安装,会有“/usr/bin/memcached”类似的输出 memcached -h //memcache帮助列表 php -m | grep me ...

  8. Data Structure 基本概念

    数据(data) 描述客观事物的数值 数据项(data item) 具有原子性,不可分割的最小单位 数据元素(data element)集合的个体,通常由很多数据组成 数据对象(data object ...

  9. Calendar的使用注意

    一.Calendar和GregorianCalendar的关系 GregorianCalendar的一点: // 初始化 Gregorian 日历 // 使用当前时间和日期 // 默认为本地时间和时区 ...

  10. JNI开发-Java从C/C++获取List集合对象

    NI开发有时需要Java从C/C++获取List对象,此篇主要讲解Java从C/C++获取List<Student>返回值; 1. 定义com.niubashaoye.simple.jni ...