首页 > 其他分享 >Echarts中柱状图的基本设置

Echarts中柱状图的基本设置

时间:2023-07-25 15:57:32浏览次数:36  
标签:轴线 颜色 color 柱状图 设置 type Echarts

Echarts - 去掉图表横纵坐标轴刻度线

效果图

去掉前:

去掉后:

axisTick: {
   show: false
}

X轴Y轴文字颜色和大小的设置

axisLabel:{
    textStyle:{
        color:"#f9f9f9",
            fontSize:12
    }
}

X轴Y轴刻度线的颜色和宽度的设置:

axisLine:{
    show:true,//是否显示
    lineStyle:{
        color:"#1a80b0",//轴线的颜色
        width:1,//轴线的宽度
        type:"solid"//轴线的类型
    }    
}

轴线的设置:

设置轴线时,需先设置刻度线文字的颜色

 splitLine: { //y轴的颜色
                lineStyle: {
                  type: "dashed", //虚线
                  color: '#004e86' //颜色
            },

x轴文字无法显示全,需设置角度

 axisLabel:{
                color: 'white',
                fontSize:10,
                interval:0,
                rotate:-40,
                textStyle:{
                  color: "#f9fafc",//x轴文字的颜色
                  fontSize:10
                }
              },

y轴单位颜色

              type:'value',
              name:'单位:万元',
              nameTextStyle:{
                color:"#fff",
              },

echarts formatter鼠标悬停显示信息

 tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },

 

标签:轴线,颜色,color,柱状图,设置,type,Echarts
From: https://www.cnblogs.com/dlx609/p/17580056.html

相关文章

  • 2023-07-25 uview1.0的u-number-box组件在渲染时会触发change,如何才能避免事件影响?==
    前言:购物车用到加减购物车数量的一个步进器组件,使用的是uview组件1.0版本的u-number-box。该组件设置了一个@change事件,该事件会在页面渲染的时候触发一次,如果你在里面调用了接口,比如增加/减少购物车数量,那么每次一刷新购物车该事件就会被触发,从而导致不必要的报错。解决方案:在......
  • WPF设置字体和字号
    最简单在MainWindow.xaml设置,字体FontFamily,字号FontSize<Windowx:Class="TestWpf.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"......
  • mRemoteNG 设置共享账号
    FoldersandInheritance—mRemoteNGdocumentation可以通过在文件夹设置账号和密码,然后文件夹下的Connection继承账号和密码Rightnownothinghaschangedandnothingwillbeinherited.Toenableinheritanceswitchtotheinheritanceviewbyclickingthededicated......
  • 网站通过nginx设置黑/白名单IP限制、国家城市IP访问限制
    网站通过nginx设置黑/白名单IP限制、国家城市IP访问限制 一、黑/白名单IP限制访问配置nginx配置黑白名单有好几种方式,这里只介绍常用的两种方法。1、第一种方法:allow、denydeny和allow指令属于ngx_http_access_module,nginx默认加载此模块,所以可直接使用。这种方式,最简单,最直......
  • echarts 实时动态修改markline
    效果图: 如果要固定显示markline的值就写在series.markLine.data数组里。 我这里的markline的值是通过websocket返回的,数据发生变化时,markline的值也跟着变化监听到websocket返回值时:leto=myChart.getOption()//mychart是创建的echarts实例getOption获取当前实例......
  • CentOS7 DNS 设置
    CentOS7,手工设置/etc/resolv.conf里的DNS,重启网络服务,系统会重新覆盖,一般采用以下办法修改DNS配置。1.使用命令行工具nmcli设置#显示当前网络连接nmcliconnectionshowNAMEUUIDTYPEDEVICEcni0ac5d429e-cbc2-......
  • Cortex M4 中断向量设置
    CortexM4中断向量表设置Keywords:CortexM4CM4Vectortable中断前言本文叙述了因Vectortable设置错误导致进入hardfault中断的问题,现象就是APP运行卡死。起因今天同事在app最前面加了固定大小的校验,然后将新的程序烧录之后,bootloader无法正常启动app,我对此问题比较感......
  • Visual Studio 启动调试程序 以管理员运行的设置(相比右键管理员运行生成好的exe文件优
    在解决方案文件上,选择添加=>新项目=>应用程序清单文件然后在C#上打开它。在应用程序清单文件上,将“asInvoker”重命名为“requireAdministrator”。生成解决方案。可以管理员权限打开所有应用程序。......
  • session设置源码
    setting中的SessionMiddleware必须设置 查看中间件源码 如果后面在试图函数使用request.session=像 SessionStore()这个函数中传递了Cookie如果视图函数定义了如下方法 执行clear清空_session_cache 至此process_request结束查看process_response下面两......
  • FLEX里的CSS样式设置教材
    FLEX3中应用CSS完全详解手册!编辑完这个FLEX下的CSS说明后,我基本已经兵临崩溃边缘了。在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个FLEX下的CSS使用方法的详细说明(好像我这份还不够详细,望大家补充)。AIRIA真的是一个不错的网站,很高......