<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>第一个 ECharts 实例</title>

    <!-- 引入 echarts.js -->

    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 800px;height:400px; background: #fff;"></div>

    <script type="text/javascript">

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

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

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

        var option = {

            title: {

                text: '第一个 ECharts 实例'

            },

            tooltip: {},

            legend: {

                data: ['销量']

            },

            xAxis: {

                data: ["土地、房屋及建筑物", "遇用设备", "遇用设备", "裤子", "家具、用具、装具及动植物", "袜子"],

                axisLabel : {//坐标轴刻度标签的相关设置。

                    interval:0,

                    rotate:"45", //表示的角度倾斜45度

                    // 更改x轴文字颜色的配置

                    textStyle: {

                        color: '#ffb6c1 ',//处理x轴的文字颜色【粉色】

                    }

                },

                // 更改x轴线的颜色

                axisLine:{

                    lineStyle:{

                        color:'#d9d9d9',

                        width:1, //x轴线的宽度

                    }

                }

            },

            yAxis: {

                // 更改y轴线的颜色

                // axisLine:{

                //     lineStyle:{

                //     color:'#d9d9d9',

                //     width:1, //x轴线的宽度

                //     }

                // }

                // 将y轴的线去除掉

                // axisLine:{

                //     show:false

                // },

            },

            series: [{

                name: '销量',

                type: 'bar',

                itemStyle: {

                    normal: {

                        // 这里就可以实现，配置柱状图的颜色

                        color: function (params) {

                            var colorList = [ '#ccc', '#c101c1', '#FCCE10', '#E87C25', '#27727B', '#D7504B'];

                            return colorList[params.dataIndex]

                        },

                    }

                },

                data: [5, 20, 36, 10, 10, 20]

            }]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

    </script>

</body>

</html>

echarts更改x和y轴的颜色的更多相关文章

  1. matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色

    1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...

  2. 第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数，超出显示"..."

    起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的 ...

  3. echarts图表x，y轴的设置

    https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...

  4. echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影

    上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始放大,很丑,这个时候我们可以设置其宽高来解决问题,给其设置宽高后,切换的奇怪效果即可消 ...

  5. echarts Y轴名称显示不全（转载）

    转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...

  6. vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题

    1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...

  7. MeteoInfoLab脚本示例：多Y轴图

    数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...

  8. Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置

    // 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...

  9. echarts x轴或y轴文本字体颜色改变

    1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axi ...

  10. echarts修改X,Y轴上的颜色

     分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...

随机推荐

  1. WebService autoconfigure.web.servlet.DispatcherServletPath

    SpringBoot WebService 源代码:https://gitee.com/VipSoft/VipWebService SpringBoot 整合 WebService cxf 报错 Co ...

  2. FB08、F.80凭证冲销校验增强

    1业务场景 当使用FB08和F.80在前台冲销会计凭证时,需要限制三种不同的会计凭证类型,并报消息到相应的程序中处理这三种会计凭证类型. 2技术实现 在BADI和二代中均未找到合适的增强点,因此根据在 ...

  3. SSL 证书过期巡检脚本

    哈喽大家好,我是咸鱼 我们知道 SSL 证书是会过期的,一旦过期之后需要重新申请.如果没有及时更换证书的话,就有可能导致网站出问题,给公司业务带来一定的影响 所以说我们要每隔一定时间去检查网站上的 S ...

  4. 【Boost】CMake中引用Boost库

    概述 在macOS开发时常常使用Boost库,若项目使用CMake进行组织管理和编译,需要掌握在CMake中实现Boost库的引用的基本语法.本片博客结合自己在实际使用过程中的经验进行总结,以期回顾和 ...

  5. JSP | 指令详解以及实例

    原作者为 RioTian@cnblogs, 本作品采用 CC 4.0 BY 进行许可,转载请注明出处. 本篇学习自:C语言中文网,部分内容转载仅供学习使用. 前文 JSP 中有一个关键的知识点:指令; ...

  6. Function--jdk8用法

    Lambda表达式.首先是参数部分,接着是->,可以视为产出,->之后的内容都是方法体. 当只有一个参数时,可以不需要括号(): 正常情况使用()包裹参数,为了保持一致性,也可以使用括号( ...

  7. Serverless 架构开发手册 — “人人都是 Serverless 架构师”先导篇

    摘要:本篇实战将介绍如何以超低成本构建动态的 Web 站点,并且实现灵活扩展,限流等效果,最后再跟大家聊一聊"现代应用"的相关概念. 相信很多同学都有过想要拥有自己的 Web 站点 ...

  8. 如何实现纯网页语音视频聊天和桌面分享？（附源码，PC版+手机版）

    在网页里实现文字聊天是比较容易的,但若要实现视频聊天,就比较麻烦了.本文将实现一个纯网页版的视频聊天和桌面分享的Demo,可直接在浏览器中运行,不需要安装任何插件. 一. 主要功能及支持平台 1.本D ...

  9. 面向对象C++学习总结

    洛谷日记3 2023.5 面向对象C++ : 运算符重载 1.运算符重载 (1)n定义重载运算符和定义普通函数类似,只是该函数的名字是operator@,@表示要重载的运算符. MinInt oper ...

  10. channel 是怎么走上死锁这条路的

    本篇文章接着 hello world 的并发实现一文介绍 Go 的 channel 类型,同时进一步介绍 channel 的几种死锁情况,这些都是代码中很容易遇到的,要重点摘出来讲,防止一不留神程序就 ...