关于修改Echarts X轴/Y轴/字体颜色/标题颜色样式/小图标以及宽高百分比自适应的各种问题

一：修改x/y轴的字体颜色

 xAxis/yAxis : [{
    type : 'category',
    axisLabel: {
        show: true,
        textStyle: {
        color: '#fff'
            }
        } 
    }]

二：修改x/y轴的颜色

  xAxis/yAxis : [{
        type : 'category',
        axisLine: {
            lineStyle: {
            color: '#fff', // 颜色
            width: 3 // 粗细
            }
          }
    }]

三:修改字体颜色

legend: {
              textStyle:{
                      fontSize: 18,//字体大小
                      color: '#ffffff'//字体颜色
                    }

四:修改标题样式

var option = {
        //标题
        title : {
            show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: '主标题',//主标题文本，'\n'指定换行
            backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
            borderColor: '#ccc',//标题边框颜色,默认'#ccc'
            x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | 
            {number}（x坐标，单位px）
            y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number} 
           （y坐标，单位px）

            borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框)
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": 
             "#333"}
               color:'#fff'
            },
  }

五:修改图标样式/个数

toolbox={

        show : true,        //是否展示
        itemSize:10,        //icon图标大小
        itemGap:10,         //icon图标间距
        showTitle:true,     //鼠标经过title是否展示                                          
        right,'20%'         // 设置位置,单位百分比/方位名词
        top:"top",                                  
        right:"auto",                               
        bottom:"auto",                         
        width:"10%",        //设置宽                         
        height:"10%",       //设置高

        
    }

六:修改宽高百分比,

1:将echarts的父盒子和自己宽高设置为百分比,代码如下

2:只需在option对象的末尾添加监听屏幕大小变化时候的事件即可,代码如下

 

 window.onresize = function () {
        myChart.resize();
      };

3:函数的意思为当屏幕大小变化时,将重新计算echarts的大小,如果没有变化建议重跑服务器或者刷新页面