<!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. 【终极教程】Cocos2dx服务端重构（优化cocos2dx服务端）

    [终极教程]Cocos2dx服务端重构(优化cocos2dx服务端) 文章目录 概述 问题概述1. 代码混淆代码加密具体步骤测试和配置阶段IPA 重签名操作步骤2. 缺乏文档3. 缺乏推荐的最佳实践4 ...

  2. 【教程】app备案流程简单三部曲即可完成

    ​ [教程]app备案流程简单三部曲即可完成 APP备案流程包括以下步骤: 1. 开发者实名认证:在提交备案申请之前,开发者需要通过移动应用开发平台进行实名认证.这个步骤需要提供身份证号码.姓名.联系 ...

  3. PPT 工作计划PPT 应该怎么样改

    收集素材 页面处理 丰富细节 PPT 工作计划PPT 应该怎么样做

  4. SQL Server 2016 自动备份、收缩数据库

    一般策略为:Oracle: 周一.二 增量备份,周三差异备份,周四.五.六增量备份,周日完整备份(建多计划) MsSQL: 周一.六差异备份,周日完整备份(建多计划) 打开SQL server配置管理 ...

  5. Flutter 自定义组件实战之Cupertino（iOS）风格的复选框

    继上一篇Flutter自定义组件的视频短课(视频地址: https://www.bilibili.com/video/BV1ap4y1U7UB/ )后,我们继续来聊自定义组件.视频中我为大家详解了Cu ...

  6. three.js 视频融合

    MixVideo.js代码: //视频融合 import * as THREE from '../build/three.module.js'; import { API } from '../js. ...

  7. Problem B - Card Constructions （构造）

    题意: 你可以用图示的方法建造金字塔,但是每一次都要建最大的金字塔,问最后能建几个金字塔. 思路: 我们可以发现对于每一个金字塔都是两边增加了两天边,然后中间行数− 1 -1−1个三角形,所以就可以求 ...

  8. KYOCERA Programming Contest 2021（AtCoder Beginner Contest 200）（AB水题，C思维，D搜索，E DP）

    补题链接:Here A - Century 整除 \(200\) 并且判断能否整除完全 B - 200th ABC-200 按题意即可 C - Ringo's Favorite Numbers 2 求 ...

  9. 『NexT』，一款 NexT 风格的 Typora 主题

    很喜欢 Hexo 中的 Next 主题,便想要在 Typora 中书写时获得和在 Hexo 中一样的预览效果,翻了一下Typora的theme仓库发现已经有dalao (知乎@Bill Chen)写了 ...

  10. WebGPU光追引擎基础课：使用WebGPU绘制三角形

    大家好~我开设了"WebGPU光追引擎基础课"的线上课程,从0开始,在课上带领大家现场写代码,使用WebGPU开发基础的光线追踪引擎 课程重点在于基于GPU并行计算,实现BVH构建 ...