原图：


原代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--   柱状统计图 -->

        <div class="row">

            <div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>

        </div>

    </body>

    <script src="../../js/echarts/echarts.min.js" type="text/javascript"></script>

    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

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

        // 指定图表的配置项和数据

        myChart.setOption({

            title: {

                text: '平均耗时（分钟）',

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'shadow'

                }

            },

            legend: {

                /*  data: [ '2012年']*/

            },

            grid: {

                left: '3%',

                right: '4%',

                bottom: '3%',

                containLabel: true

            },

            xAxis: {

                type: 'value',

                boundaryGap: [0, 0.01]

            },

            yAxis: {

                type: 'category',

                data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号']

            },

            series: [{

                    name: '2012年',

                    type: 'bar',

                    itemStyle: {

                        normal: {

                            color: '#a8bcd4'

                        }

                    },

                    data: [10, 20, 31, 14, 11, 67]

                }

            ]

        });

    </script>

</html>

1：标题颜色属性修改

将图标主标题颜色修改成红色，只需要在 title:里面添加 textStyle: {color: 'red' }即可


 title: {

                text: '平均耗时（分钟）',

             textStyle: {

                color: 'red'

            },

            },

2：x和y轴坐标颜色修改


x轴坐标：

 xAxis: {

                type: 'value',

                boundaryGap: [0, 0.01],

                axisLine:{

            lineStyle:{

                color:'#e33b38',

                width:1,//这里是为了突出显示加上的

            }

        }

            },

y轴坐标：

 yAxis: {

                type: 'category',

                data: ['SA服务', '洗车', '总检', '喷漆', '钣金', '机修', '等号'],

                splitLine: {

                lineStyle: {

                    // 使用深浅的间隔色

                    color: ['#e33b38']

                }

            },

            nameTextStyle: {

                color: ['#e33b38']

                },

            axisLine:{

                lineStyle:{

                    color:'#e33b38',

                    width:1,//这里是为了突出显示加上的

                }

            }

            },

3：柱状图实现不同颜色


    itemStyle: {

                normal: {

                color: function(params) {

                var colorList = [

                '#569afb','#ff6347','#561afb','#ff2347','#269afb','#fq6347'

                ];

                return colorList[params.dataIndex]

                },

                label: {

                show: false

                }

                }

                },

4：柱状图粗细属性控制

  barWidth : 20,


5：echarts处理图形与title之间的距离
参考链接
http://echarts.baidu.com/option.html#title

注：

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

【前端统计图】echarts实现属性修改的更多相关文章

  1. 前端统计图 echarts 实现简单柱状图

    前端统计图   echarts实现简单柱状图 1. 引入 ECharts <!DOCTYPE html> <html> <head> <meta charse ...

  2. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  3. 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图

    [源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...

  4. ECSHOP筛选属性修改title标题

    发现百度蜘蛛爬行网站时会爬行属性链接,而且会进行收录.可是ecshop系统制作的网站,在分类页点击属性筛选出产品时,网页title不会改变.这样就会造成大量title一样的页面,不利于优化.为此,在网 ...

  5. java并发编程（十四）----(JUC原子类)对象的属性修改类型介绍

    今天我们介绍原子类的最后一个类型--对象的属性修改类型: AtomicIntegerFieldUpdater,AtomicLongFieldUpdater,AtomicReferenceFieldUp ...

  6. Linux用户和组管理命令-用户属性修改usermod

    用户属性修改 usermod 命令可以修改用户属性 格式: usermod [OPTION] login 常见选项: -u UID: 新UID -g GID: 新主组 -G GROUP1[,GROUP ...

  7. 【前端统计图】echarts改变颜色属性的demo

    一:柱状图改变颜色 图片.png 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. 【前端统计图】echarts实现简单柱状图

    图片.png <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. 【前端统计图】echarts多条折线图和横柱状图实现

    参考链接:echarts官网:http://echarts.baidu.com/ 原型图(效果图): 图片.png 代码: <!DOCTYPE html> <html> < ...

随机推荐

  1. Ubuntu16.04 “有线未托管”有线网络不可用问题解决

    Ubuntu16.04 “有线未托管”问题解决 电脑上安装的Ubuntu16.04 是通过先安装Ubuntu Server后在通过命令 sudo tasksel 安装的Gnome桌面环境,安装完成后发 ...

  2. Flex之文件目录浏览器实例

    Flex之文件目录浏览器实例 Flex的AIR项目 <?xml version="1.0" encoding="utf-8"?> <mx:Wi ...

  3. 今日SGU 5.16

    SGU 119 题意:给你N.A0.B0,然后问所有X.Y,若A0X+B0Y能被N整除,则AX+BY也能被N整除,求所有的A.B.(0<=A.B<N) 收获:枚举 因为a0x+b0y=k1 ...

  4. Linux学习总结（6）——CenterOS7安装mysql5.5的方法

    首先centos7 已经不支持mysql,因为收费了你懂得,所以内部集成了mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb,以下为卸载mariadb,安 ...

  5. RvmTranslator6.3 is released

    RvmTranslator6.3 is released eryar@163.com RvmTranslator can translate the RVM file exported by AVEV ...

  6. vim-缓存区中打开另外一个文件的方法

    现在有这么一种情况:    我现在在ubuntu用户根目录下--    我根目录下有一个文件夹blogs,这个文件夹下面有两个文件:text1,text2.    我现在从-目录下进行如下操作    ...

  7. js插件---tree（多级文件）插件如何使用

    js插件---tree(多级文件)插件如何使用 一.总结 一句话总结:还是一般的引入js和css后js调用的方式, 只不过tree调用的时候必须设置一个 HTML 模板(就是调用的那段html代码,别 ...

  8. mvc4 视图中的form如何获取

    public ActionResult Index(FormCollection form)         {             var Name = form["字段名" ...

  9. C#开发 —— 基础知识

    C# 用于开发可以运行在 .Net 平台上的应用程序,C# 本身只是一种语言,尽管它是用于生成面向 .Net 环境的代码,但它本身不是 .Net 的一部分 Console.WriteLine 命名空间 ...

  10. thuwc9102划水记

    thuwc9102划水记 Day -2 时隔两个月之后终于回一次家,心情非常愉悦,开始浪. Day 0 晚上回到学校,然而机房里并没多少人,大佬们明天才回来.╮(╯▽╰)╭ Day 1 中午饭菜挺好吃 ...