<!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. centos8 测地卸载php5.6 与卸载php7

    centos8 yum php 默认安装 php7.1.2 我想卸载php7 ,安装php5.6 yum remove php 无法彻底卸载干净.必须强制删除,使用下面命令查看全部php软件包 rpm ...

  2. 大端、小端，& 与、 | 或、 ~ 反、 << 左移 >> 右移

    小端存储:较低的有效字节存放在较低的存储器地址,较高的字节存放在较高的存储器地址: 大端存储:较低的有效字节存放在较高的存储器地址,较高的字节存放在较低的存储器地址. & 计算操作数的逻辑按位 ...

  3. 多线程 ThreadPoolTaskExecutor 应用

    1.如何判断线程池所有任务是否执行完毕 package com.vipsoft.web; import org.junit.jupiter.api.Test; import org.slf4j.Log ...

  4. AliSSR 语音超分算法：让在线会议语音更明亮更自然

    超分让在线会议语音更明亮,在线会议已成为日常工作中较为普遍的沟通交流方式,接入会议的方式也呈现多样化,比如电脑入会.手机入会又或是电话入会. 雪雅.曜辰|作者 众所周知,高采样率且高带宽的音频信号富含 ...

  5. 《对线面试官》| 高频 Python 面试题 pt.1

    1.聊聊 python 中的值传递和引用传递吧 值传递: 值传递意味着在函数调用时,将实际参数的值复制一份传递给函数的形式参数 在函数内部,形式参数将作为局部变量使用,对形式参数的修改不会影响原始变量 ...

  6. Windows 端使用 C++ 服务操作类

    #pragma once #include <windows.h> #include <string> // #include <iostream> class S ...

  7. AtCoder Beginner Contest 242（C~E）

    AB 水题 C - 1111gal password 题意:给出 N(\(2\le N\le 1e6\))求满足以下条件的 \(X\) 的数量,需除以模 (\(998244353\)) $X $ 是 ...

  8. AtCoder Beginner Contest 214 （D并查集，E反悔贪心，F公共子序列DP）

    题目链接:Here ABC水题, D - Sum of Maximum Weights 上图中最大权 \(9\) 对答案的贡献是这条边两边的连通块的 size 的乘积再乘以 9 受到上面的启发,我们可 ...

  9. 第六届蓝桥杯C++C组 A~F题题解

    蓝桥杯历年国赛真题汇总:Here 1. 分机号 X老板脾气古怪,他们公司的电话分机号都是3位数,老板规定,所有号码必须是降序排列,且不能有重复的数位.比如: 751,520,321 都满足要求,而, ...

  10. Codeforces Round #715 (Div. 2) (A~D 补题记录)

    补题链接:Here 经典手速场 1509A. Average Height 题意:要找出最大不平衡对序列 先输出奇数,然后输出偶数 void solve() { int n; cin >> ...