见代码：

<!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. qt QRegExp使用（搬运工）

    设置正则表达式. 类似下面的 QRegExp 这里的用法就是用来检测QString等字符串错误的,例如文件名里面最好就不出现<>|/\:等,所以可以如下定义QRegExp rx(" ...

  2. WijmoJS 全面支持 Angular 7

    概述 首先恭喜Angular团队发布Angular 7.0.0版本! 对于大多数开发人员,只需要执行一个命令就可以更新到Angular 7: ng update \@angular/cli \@ang ...

  3. windows特殊文件或文件夹

    考了很多文章,搜集了很多资料整理而成.好的用途可以用来隐藏个人资料,防止误删,病毒免疫等等.至于坏的方面,当然也可用来隐藏木马等等,就看你怎么用了.还有一个没有搞明白,资料上也没找到,请知道的指点一下 ...

  4. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  5. MVC ---- 去掉HTML过滤

    在方法头上添加特效  [ValidateInput(false)]  富文本框提交的内容就可以顺利提交到后台了.

  6. Jmeter 二次开发 将CSV Data Set Config添加从哪一行开始读数据

    经常遇到性能测试的时候,有100万条数据,才用了5万条,中途因为某些原因停止了,继续用的时候, 要么要清除DB中数据,要么要清除数据源中的数据, 觉得特别麻烦, 希望改写下代码,将 Ignore fi ...

  7. Django2.2安装

    Django2.2安装 https://media.djangoproject.com/releases/2.2/Django-2.2.tar.gz 解压 tar -zvxf Django-2.2.t ...

  8. Robot Framework 三种测试用例模式

    1.三种测试用例模式 关键字驱动(keyword-driver).数据驱动(data-driver).行为驱动模式(behavior-driver) 2.关键字驱动(keyword-driver)   ...

  9. Axure 第一次接触动态面板

    动态面板可以理解为有多维空间的一个容器,里面可以设置多个state,每个state里面可以放多个元件 先把对应的元件设置为动态面板并且隐藏: 本段教程主要包括三种应用场景: 1.邮箱不为空.密码为空时 ...

  10. （转）c#中const与readonly区别

    const 的概念就是一个包含不能修改的值的变量.常数表达式是在编译时可被完全计算的表达式.因此不能从一个变量中提取的值来初始化常量.如果 const int a = b+1;b是一个变量,显然不能再 ...