echarts的属性使用说明

axisLine：坐标轴轴线相关设置。

axisTick：坐标轴刻度相关设置。

axisLabel：坐标轴刻度标签的相关设置。

splitLine： 坐标轴在 grid 区域中的分隔线设置。

splitArea ：坐标轴在 grid 区域中的分隔区域，默认不显示。

grid:{  // 布局
        show:true,   // 是否显示直角坐标系网格
        left:50%,      // 图表离容器左侧的距离
        top:50%,      // 图表离容器顶部的距离
        right:50%,    // 图表离容器右侧的距离
        bottom:100, // 图表离容器底部的距离
        backgroundColor:'#ccc',   // 网格背景色
        borderColor:'#333',           // 网格的边框颜色
        borderWidth:2                   // 网格的边框线宽
}

xAxis : [

        show: true,    // 是否显示x轴
        position: 'top',    // x轴的位置（top/bottom） 
        type: 'category',    // 坐标轴类型，值category/value，与y轴呼应，若x轴配置category则y轴配置value
        nameRotate: 10,    // 坐标轴名字旋转，角度值
        inverse: false,    // 是否是反向坐标轴
        boundaryGap: ['20%', '20%'],    // 坐标轴两边留白策略，也可以使用布尔值，true居中
        splitNumber: 5,    // 坐标轴的分割段数（预估值）
       axisLine: {
        show: true,    // 是否显示坐标轴轴线
        symbol: ['none', 'arrow'],     // 轴线两端箭头，两个值，none表示没有箭头，arrow表示有箭头
        symbolSize: [10, 15],     // 轴线两端箭头大小，数值一表示宽度，数值二表示高度
        lineStyle: {
            color: '#333',    // 坐标轴线线的颜色
            width: '5',    // 坐标轴线线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        },
    },
    axisTick: {
        show: true,    // 是否显示坐标轴刻度
        inside: true,     // 坐标轴刻度是否朝内，默认朝外
        length: 5,    // 坐标轴刻度的长度
        lineStyle: {
            color: '#FFF',     // 刻度线的颜色
            width: 10,    // 坐标轴刻度线宽
            type: 'solid',    // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
        },
    },
    axisLabel: {
        show: true,     // 是否显示刻度标签
        interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        inside: true,   // 刻度标签是否朝内，默认朝外
        rotate: 90,   // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
        margin: 10,    // 刻度标签与轴线之间的距离
        // formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        color: '#FFF',     // 刻度标签文字的颜色
        fontStyle: 'normal',    // 字体的风格（normal无样式；italic斜体；oblique倾斜字体） 
        // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700）
        fontWeight: 'normal',    
        fontSize: '20',    // 文字字体大小
        align: 'left',     // 文字水平对齐方式，默认自动（left/center/right）
        verticalAlign: 'left',    // 文字垂直对齐方式，默认自动（top/middle/bottom)
        lineHeight: '50',    // 行高
        backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
    },
    splitLine: {
        show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
        interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        // color分隔线颜色，可设置单个颜色，也可设置颜色数组，分隔线会按数组中颜色顺序依次循环设置颜色
        color: ['#ccc'],    
        width: 3, // 分隔线线宽
        type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
    },
    splitArea: {
        show: true, // 是否显示分隔区域
        interval: '0', // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            // color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], 
            opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
        },
    },
    data: {
        textStyle: {
            color: '#FFF', // 文字的颜色
            fontStyle: 'normal', // 文字字体的风格（normal无样式；italic斜体；oblique倾斜字体）
            // 字体的粗细（normal无样式；bold加粗；bolder加粗再加粗；lighter变细；数字定义粗细也可以取值范围100至700） 
            fontWeight: 'normal', 
            fontSize: '20', // 文字字体大小
            align: 'left', // 文字水平对齐方式，默认自动（left/center/right）
            verticalAlign: 'left', // 文字垂直对齐方式，默认自动（top/middle/bottom）
            lineHeight: '50',  // 行高
            backgroundColor: 'red', // 文字块背景色，例：#123234, red, rgba(0,23,11,0.3)
        },
    },

]

yAxis:[{
    min:0, //y轴的最小值
    max:100, //y轴最大值
    interval:20, //值之间的间隔
    //上面的三个值可以根据自己需求随意设置                                                                                type:'value',
　//  'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。  'log' 对数轴。适用于对数数据。
    splitLine:{show:false}, //去除网状线 默认为true
    axisLabel:{  //用于设置y轴的字体
            show:true,  //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle:{   //textStyle里面写y轴下的字体的样式
               color:'#333',
               fontSize:13
            }
       },
    axisLine:{   //用于设置y轴的那一条线
           show:true,  //这里的show用于设置是否显示y轴那一条线 默认为true
           lineStyle:{ //lineStyle里面写y轴那一条线的样式
             color:'#6FC6F3',
             width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
           }
       }
}]

鼠标悬停

tooltip{
   trigger:'item',   //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
   triggerOn:"mousemove",   //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
   showContent:true,                      //是否显示提示框浮层
   alwaysShowContent:true,          //是否永远显示提示框内容
   showDelay:0,                             //浮层显示的延迟，单位为 ms
   hideDelay:100,                           //浮层隐藏的延迟，单位为 ms
   enterable:false,                          //鼠标是否可进入提示框浮层中
   confine:false,                             //是否将 tooltip 框限制在图表的区域内
   transitionDuration:0.4,   //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
   position:['50%','50%'],    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧
   formatter:"{b0}: {c0}
{b1}: {c1}",      //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
   backgroundColor:"transparent",             //标题背景色
   borderColor:"#ccc",                                //边框颜色
   borderWidth:0,                                       //边框线宽
   padding:5,                                              //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
   textStyle:mytextStyle,                             //文本样式

  position: function (point, params, dom, rect, size) {  //  size为当前窗口大小
      if ((size.viewSize[0] / 2) >= point[0]) {
        //其中point为当前鼠标的位置
        return [point[0] + 50, '10%'];
      } else {
        //其中point为当前鼠标的位置
        return [point[0] - 200, '10%'];
      }
    }
}

图标
legend: {
    top:'2%',
    data:['全部','火电','水电','风电','光伏','核电'],
    textStyle: { color:'#fff' },
    selectedMode:'single'  // 只展示一条数据，参数可有：single、multiple、false
}