原图：


原代码：

<!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. mpvue 开发小程序

    转换成vue语法, 小程序中原生的事件用@ 原生的属性用:

  2. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  3. 学习参考《TensorFlow深度学习》高清中文版PDF+英文版PDF+源代码

    我们知道,TensorFlow是比较流行的深度学习框架,除了看手册文档外,推荐大家看看<Tensorflow深度学习>,共分5方面内容:基础知识.关键模块.算法模型.内核揭秘.生态发展.前 ...

  4. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  5. 编程里的API是什么意思？

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...

  6. hdparm

    https://www.douban.com/note/244813504/ http://blog.sina.com.cn/s/blog_413d250e0101jtr7.html http://m ...

  7. cogs 1446. [Commando War,Uva 11729]突击战

    1446. [Commando War,Uva 11729]突击战 ★   输入文件:commando.in   输出文件:commando.out   简单对比时间限制:1 s   内存限制:64 ...

  8. 《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境

    我×.. . 最终好了,大概3 4个小时吧...各种毛刺问题.终究还是闯过来了.. .. ubuntu2@ubuntu:~/Downloads/linux-0.00-050613/linux-0.00 ...

  9. Codeforces 429D Tricky Function 近期点对

    题目链接:点击打开链接 暴力出奇迹. 正解应该是近期点对.以i点为x轴,sum[i](前缀和)为y轴,求随意两点间的距离. 先来个科学的暴力代码: #include<stdio.h> #i ...

  10. Linq查询案例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...