echarts柱状图修改x轴和y轴以及字体颜色

小小1992

已于 2023-08-03 11:40:47 修改

阅读量7.9k

点赞数 3

文章标签： echarts javascript 前端

于 2023-08-02 13:48:45 首次发布

本文链接：https://blog.csdn.net/u014645827/article/details/132060360

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .con{
               position: absolute;
               width: 505px;
               height:260px;
               /* background-color: aquamarine; */
           }
           .con-po{
               position: absolute;
               width: 2px;
               height: 134px;
               background-color: #cecece;
               top: 39px;
               right: 157px;
           }
           .con-r{
               position: absolute;
               top: 2px;
               left: 148px;
               color: #717171;
           }
           .con-num{
               position: relative;
               top: 39px;
               left: 148px;
               color: #717171;
               font-size: 14px;
           }
           .con-bg{
               position: relative;
               background-color: aqua;
               width: 90%;
               height: 90%;
               top: 0px;
               left: 0px;
               right: 0px;
               bottom: 0px;
           }

       </style>
   </head>
   <body>
       <div class="con">

           <div id="main" style="width:100%;height: 100%;"></div>
       </div>
       <script src="js/echarts.min.js"></script>
       <script>
           var chartDom = document.getElementById('main');
           var myChart = echarts.init(chartDom);
           var option;

           option = {
               tooltip: {
               trigger: 'axis',
               axisPointer: {
               type: 'shadow'
               }
               },
               color:['#006FFF'],
           xAxis: {
           type: 'category',
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
               axisLine:{
                   lineStyle:{
                       show:true,//是否显示坐标轴轴线，
                       color:'#E5E5E5',//x轴轴线的颜色
                       width:1,//x轴粗细
                   }
               },
               axisTick:{
                   show:true,//是否显示刻度
                    lineStyle:{color:'#E5E5E5'}    // x轴刻度的颜色
                },
axisLabel: {
                   color: '#808080',// x轴字体颜色
                   interval:0//轴显示所有的数据
               },

           },
           yAxis: {
           type: 'value',
               axisLine:{
                   show:true,
                   lineStyle:{
                       show:true,//是否显示坐标轴轴线，
                       color:'#E5E5E5',//x轴轴线的颜色
                       width:1,//x轴粗细
                   }
               },
               splitLine: { show: false },
               axisTick:{
                   show:true,//是否显示刻度
                     lineStyle:{color:'#'},    // x轴刻度的颜色

                 },
axisLabel: {
                       color: '#808080',// x轴字体颜色
                       interval:0//轴显示所有的数据
                   },

           },
           series: [
           {
           data: [120, 200, 150, 80, 70, 110, 130],
           type: 'bar',
                 markPoint: {
                    itemStyle: {
                        //通常情况下：
                        normal: {
                            color:'#fff',
                            label:{
                                color:'#006FFF',
                            }
                        },
                    },
                      data: [{
                        type: "max"
                      }],
                      symbol: "pin"
                    },
           }
           ]
           };
           option && myChart.setOption(option);
       </script>
   </body>
</html>

小小1992

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts柱状图修改x轴和y轴以及字体颜色

lineStyle:{color:'#E5E5E5'} // x轴刻度的颜色。lineStyle:{color:'#'}, // x轴刻度的颜色。color:'#E5E5E5',//x轴轴线的颜色。color:'#E5E5E5',//x轴轴线的颜色。color: '#808080',// x轴字体颜色。color: '#808080',// x轴字体颜色。width:1,//x轴粗细。width:1,//x轴粗细。show:true,//是否显示刻度。show:true,//是否显示刻度。
复制链接

扫一扫