echarts更改x和y轴的颜色
<!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轴的颜色的更多相关文章
- matlab画二维直方图以及双y轴坐标如何修改另一边y轴的颜色
1.首先讲一下如何用hist画二维直方图 x=[- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ...
- 第三方工具 - echarts中 设置x||y轴文案、提示文字等为固定字数，超出显示"..."
起初看到这种需求的时候,我是这个状态 对,我是拒绝的,人家echats画出来就是一个canvas,你让我怎么加... 但是,作为一个"有点追求的"前端,我得想招试试总结下来,唯一的 ...
- echarts图表x，y轴的设置
https://www.cnblogs.com/cjh-strive/p/11065005.html xAxis属性代表echarts图表的x轴设置代码如下 xAxis : [ { type : 'c ...
- echarts系列-带图教你调整左右位置x轴样式网格虚线刻度居中双轴Y轴滚动上下移动文字旋转改分割线颜色部分字体改色折注混合，X轴的颜色，X轴字体颜色，调整柱子颜色，调整小图标图例的大小和位置,鼠标hover时候的样式，用纵向阴影
上面先说注意事项 1.如果使用show hidden控制图表显示隐藏,某些切换效果很奇怪,比如饼图,会从左上角开始放大,很丑,这个时候我们可以设置其宽高来解决问题,给其设置宽高后,切换的奇怪效果即可消 ...
- echarts Y轴名称显示不全（转载）
转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...
- vue中使用v-chart改变柱状图颜色以及X轴Y轴的文字颜色和大小以及标题
1.html部分 <ve-histogram :tooltip-visible="true" :x-axis="xAxis" :y-axis=" ...
- MeteoInfoLab脚本示例：多Y轴图
数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...
- Echarts X轴 Y轴 线的类型、颜色、及标签字体颜色 设置
// 人均效能 var initRjxnChart = function () { var rjxnChart = echarts.init(document.getElementById(" ...
- echarts x轴或y轴文本字体颜色改变
1:x轴文本字体颜色改变 xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-','>=70'], axi ...
- echarts修改X,Y轴上的颜色
分为2.0和3.0 一.2.0 修改的代码: x轴: xAxis : [ { type : 'category', data : ['<30','30-','40-','50-','60-', ...
随机推荐
- 游戏“外挂”？—— AI生成游戏最强攻略
作为一名快乐的肥宅,玩游戏是居家必备,无论是王者荣耀.吃鸡.原神这些大热游戏,还是跳一跳.合成大西瓜.2048.这些风靡一时得小游戏,咱都有涉及.但是为了成为一个"头号玩家",我总 ...
- 【辅助工具】Apifox
注意事项 需要刷新权限 请求方式需要对应
- vue setup响应式变量
setup响应式变量 一.非响应式变量 1 效果 开发中发现setup()中的变量居然不是响应式的,值得内容变成1了但是页面上还是0 2.源码 二.响应式变量 1.效果 使用ref()可以声明响应式的 ...
- 七、java操作swift对象存储（动态大对象）
系列导航 一.swift对象存储环境搭建 二.swift添加存储策略 三.swift大对象--动态大对象 四.swift大对象--静态态大对象 五.java操作swift对象存储(官网样例) 六.ja ...
- webgl创建一个点
- Invalid options object. Sass Loader has been initialized using an options obj
https://blog.csdn.net/liwan09/article/details/106981239
- springboot2.0+dubbo-spring-boot-starter聚合项目打可执行的jar包
springboot2.0+dubbo聚合项目打可执行的jar包 springboot2.0+dubbo-spring-boot-starter项目服务方打包和以前老版本的dubbo打包方式不一样,不 ...
- C#查找算法1：二分查找
二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法.但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列. 原理:将n个元素分成个数大致相同的两半,取 ...
- 08-Shell计算命令
1.expr命令 expr (evaluate expressions 的缩写),译为"表达式求值".Shell expr 是一个功能强大,并且比较复杂的命令,它除了可以实现整数计 ...
- 【ThreadX】Azure RTOS ThreadX概述
Azure RTOS ThreadX是Microsoft的高级工业级实时操作系统(RTOS),专门用于深度嵌入式,实时和IoT应用程序.Azure RTOS ThreadX提供了高级计划,通信,同步, ...