<!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. 全文手敲代码，教你用Java实现扫雷小游戏

    摘要:本程序共封装了五个类,分别是主类GameWin类,绘制底层地图和绘制顶层地图的类MapBottom类和MapTop类,绘制底层数字的类BottomNum类,以及初始化地雷的BottomRay类和 ...

  2. 华为云MVP周峥：气象预报是个技术活，大数据、超算、AI，缺一不可

    摘要:在这样一个关乎民生的行业里,人工智能.大数据.超算这些技术,可发挥的潜力也是无限的,华为云MVP周峥就是其中的技术践行者,他正带领着团队为国内气象行业带来一股温柔而不失力量的春风. 本文分享自华 ...

  3. 当物联网遇上云原生：K8s向边缘计算渗透中

    摘要:K8s正在向边缘计算渗透,它为边缘侧的应用部署提供了便利性,在一定程度上转变了边缘应用与硬件之间的关系,将两者的耦合度降低. 本文分享自华为云社区<云原生在物联网中的应用[拜托了,物联网! ...

  4. 干货来了！阿里发布近300页Flink实战电子书

    近300页实用干货总结,帮你解决 Flink 实战应用难题!<Apache Flink电子书合辑>收录来自bilibili.美团点评.小米.OPPO.快手.Lyft.Netflix等一线大 ...

  5. 报错 PEP 8: expected 2 blank lines, found 1

    PyCharm 提示:PEP 8: expected 2 blank lines, found 1 类或方法前需要空两行 解决方法:Ctrl+Alt+L 格式化一下就OK了.或者手动在前面敲一行

  6. Jenkins + SVN

    安装插件 Localization: Chinese (Simplified) Subversion 配置国内源 http://mirror.tuna.tsinghua.edu.cn/jenkins/ ...

  7. python版本升级到3.8以及安装虚拟环境

    linux系统升级python版本看起来复杂,如果知道其中步骤也不会觉得很困难.下面记录在deepin系统 15.11和ubuntu16.04系统下将python从2.7升级到3.8过程 升级pyth ...

  8. 【每日一题】10.树（DFS 序）

    补题链接:Here DFS序列 (非树形DP),这道题成功被骗... 贴一下学姐讲解: 这个题表面上看起来像是个 树上dp,但是你会发现,当xy同色的时候要求x到y的路径上所有点颜色一样这个事情非常难 ...

  9. STM32CubeMX教程18 DAC - DMA输出自定义波形

    1.准备材料 开发板(正点原子stm32f407探索者开发板V2.4) STM32CubeMX软件(Version 6.10.0) 野火DAP仿真器 keil µVision5 IDE(MDK-Arm ...

  10. Vue和Android交互，Android回调Vue的方法

    https://blog.csdn.net/Zhizhiwei/article/details/80425204 Android webview 与 js(Vue) 交互 https://blog.c ...