echarts折线图柱状图的坐标轴的颜色及样式的设置

基本用法请查看echarts官网。

一、图例legend的设置。

1.字体和颜色的设置

textStyle:{
                fontSize:15,
                color:'#fff'
            }

2.样式的设置

legend: {
           data:systemName,
           itemWidth:40,
           itemHeight:20,
           textStyle:{
               fontSize:15,
               color:'#fff'
           }
       }

可以根据需求自己设置。

 二、工具箱toolbox的设置

三、tooltip悬浮提示框

{
    trigger: 'axis',
　  axisPointer: { // 坐标轴指示器，坐标轴触发有效
　　　type: 'line', // 默认为直线，可选为：'line' | 'shadow'
　　　lineStyle: { 
　　　　　color: 'rgb(248,175,18)' // 线的颜色
　　　}
　　},
   textStyle:{
      color:'#fff'
   },    
   formatter: function (params) {  // 自定义显示          
       var value = params.name + ': ' + params.value;
       return value
    }                  
}

三、x轴坐标xAxis的字体颜色大小，坐标线颜色，以及网格线的设置

xAxis : [
            {
                type: 'category',
　　　　　　　　　　name: '分钟',
　　　　　　　　　nameGap: 4, // 坐标轴名称与轴线之间的距离
                boundaryGap: false,
                data: time,
                splitLine:{show: false},//去除网格线
                splitArea : {show : true},//保留网格区域
                axisTick: {
                axisTick: {
                    show: false, //隐藏刻度线
                 },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff',//坐标线的颜色
                        width:'2'//坐标线的宽度
                    }
                },
                axisLabel: {
                    textStyle: {
　　　　　　　　　　　　　　show:true,//不显示坐标轴的数字
                        color: '#fff',//坐标值得具体的颜色
 　　　　　　　　　　　　　　formatter:function(value){
　　　　　　　　　　　　　　　if (value < 0) { //横坐标的负半轴的  "坐标轴" 上显示是正数
　　　　　　　　　　　　　　　　return -value;
　　　　　　　　　　　　　　}else {
　　　　　　　　　　　　　　　　return value;
　　　　　　　　　　　　　}
                    }
                }
            }
        ]

四、yAsix的设置相同

yAxis : [
           {
               type : 'value',
               splitLine:{show: false},//去除网格线
               splitArea : {show : true},//保留网格区域
               axisLine: {
                   lineStyle: {
                       type: 'solid',
                       color:'#fff',
                       width:'2'
                   }
               },
               axisLabel: {
                   textStyle: {
                       color: '#fff'
                   }
               }
           }
       ]

五、series的设置

series: [
            {
                name: '支出',
                type: 'bar',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        /*
                        *处理横坐标负半轴这边的  "柱状"  显示的数
                        *后台传过来是负数，显示时是正数
                          */
                        formatter: function (value) {
                            if(value.data < 0){
                                return -value.data;
                            }
                        },
                    }
                },
                data: [-120, -132, -101, -134, -190, -230, -210]
            },
            {
                name: '收入',
                type: 'bar',
                stack: '总量',
                label: {
                    show: true
                },
                data: [200, 170, 240, 244, 200, 220, 210]
            }
        ]

 

原文链接：https://www.cnblogs.com/my-freedom/p/6699271.html