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-', ...
随机推荐
- Axure 页面交互
- .Net Core EF 日志打印 SQL 语句
Startup.cs public class Startup { public static readonly ILoggerFactory efLogger = LoggerFactory.Cre ...
- Intellij 查找排除JAR包的依赖关系（Maven Helper）
Intellij 查找排除JAR包的依赖关系(Maven Helper) 安装插件 Windows 类似
- SQL Server 附加数据库，报只读文件，无权修改其中某些文件
MSSQL 默认安装在 C盘下,由于C盘没空间了,迁到D盘,这时候在附件数据库是报了错误:附加数据库 因为它是只读的,它具有只读文件,无权修改其中某些文件 如果是可以附加,显示(只读)这时候不能删除 ...
- 本地安装mysql （zip）
下载 https://downloads.mysql.com/archives/community/ 解压到文件夹且添加系统环境变量 C:\Dinstall\Dmysql\mysql-8.2.0-wi ...
- Safari 14.0 的功臣 Webp？
俗话说:一图胜千言.在网上,图片虽然可以让用户更加简单明了地看到更多信息,但是图片体积也可以抵过上千字节甚至更多.研究表明,打开一个 HTTP 网页,其中图片平均占比为 64%.在图片占比如此高的情况 ...
- 语音顶会 ICASSP 2022 成果分享：基于时频感知域模型的单通道语音增强算法
近日,阿里云视频云音频技术团队与新加坡国立大学李海洲教授团队合作论文 <基于时频感知域模型的单通道语音增强算法 >(Time-Frequency Attention for Monaura ...
- Invalid options object. Sass Loader has been initialized using an options obj
https://blog.csdn.net/liwan09/article/details/106981239
- Proxifier 2023年11月时最新版 激活教程
前言 Proxifier 是一款功能非常强大的socks5客户端,可以让不支持通过代理服务器工作的网络程序能通过HTTPS或SOCKS代理或代理链.支持64位系统支持Xp,Vista,Win7,支持s ...
- chage详解：liunx账户密码过期时处理
公司安装elasticSearcher7.10.2版本时提示账户密码过期,可以做以下的处理方式: 一.查看账户的使用情况 chage -l baikang [root@localhost ~]# ch ...