<!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. 云图说｜每个成功的业务系统都离不开APIG的保驾护航

    摘要:华为云API网关(APIG)是为企业开发者及合作伙伴提供的高性能.高可用.高安全的API托管服务, 帮助企业轻松构建.管理和部署不同规模的API. 本文分享自华为云社区<[云图说]第243 ...

  2. 什么？语音合成开源代码不会跑，follow me！

    摘要:本文描述的深度神经网络模型结构:: Natural TTS synthesis by conditioning Wavenet on MEL spectogram predictions. 本文 ...

  3. ImproperlyConfigured('SQLite 3.8.3 or later is required Centos升级SQLite

    遇到这个错误可以选择给django降级,不建议 这里选择升级SQLite 1.查看版本 sqlite3 --version 2.Centos7安装最新的sqlite3 wget https://www ...

  4. Selenium八大元素定位(元素定位，元素等待)

    Selenium WebDriver查找页面元素及元素操作 元素常用方法定位方法 通过id定位元素:find_element_by_id('id_value') 通过name定位元素:find_ele ...

  5. 【mongodb】pymongo使用

    pymongo基本使用 import pymongo from bson.objectid import ObjectId # 连接方式1 client = pymongo.MongoClient(h ...

  6. GitLab--简单使用

    1 创建项目组 项目组说明 Private 私有 只有所有者 组内成员或已分配的用户有查看权限(同GitHub收费版的私有仓库) Internal 内部 拥有GitLab账号的成员可以查看 无账号用户 ...

  7. Java ZIP文件解压

    Java ZIP文件解压 备忘笔记 代码: private byte[] unZip(byte[] data) { byte[] bArr = null; try { ByteArrayInputSt ...

  8. Spring Boot 2.x ：日志框架@Slf4j的使用和logback文件配置

    为什么是SLF4J? 默认情况下,Spring Boot会用SLF4J + Logback来记录日志,并用INFO级别输出到控制台. 怎么使用SLF4J? 如果我们在一个Spring Boot 的程序 ...

  9. springboot 实现接收前端发来的图片和视频以及在页面上展示图片和视频

    springboot 实现接收前端发来的图片和视频以及在页面上展示图片和视频 一.效果: 1.上传图片 2.显示上传的图片 3.上传的视频 4.显示上传的视频 二.代码 没依赖特殊的包,引入sprin ...

  10. 十五、跨主机通信overlay网络

    系列导航 一.docker入门(概念) 二.docker的安装和镜像管理 三.docker容器的常用命令 四.容器的网络访问 五.容器端口转发 六.docker数据卷 七.手动制作docker镜像 八 ...