echarts图表的常用属性介绍

图形统一的样式

grid: {  //图表的上下左右的位置距离
          left: 70,
          top: 28,
          right: 10,
          bottom: 10
        }，
xAxis: [{
          axisLabel: {
            interval: 'auto',  //x坐标数据间距 自动
            align: 'center'，  //x轴文字距中线对齐
            rotate: -45 ,    //x轴文字旋转
          }
        }],
 yAxis: {
      splitNumber: 3,  //y轴刻度线个数
      splitLine: {  
        show: true,
        // 改变轴线颜色
        lineStyle: {
          // 使用深浅的间隔色
          color: ['rgba(238, 238, 238, 1)'],
          type: 'dashed'
        }
      }
    },

1、柱状图的柱子宽度和距离：

series: [
          {
            barWidth: 16，  // 柱图宽度
            itemStyle: {
              barBorderRadius: [2, 2, 0, 0]，   // 柱子的圆角
             normal: {  //渐变色
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: '#7AC1FF'
                }, {
                  offset: 1,
                  color: '#5396FF' // 100% 处的颜色
                  }], false)
              }
            }
          }
        ]

2、线性面积图的渐变颜色

series: [
          {
            lineStyle: {
              color: 'rgba(255, 64, 105, 1)'   //折线的颜色
            },
            areaStyle: {   //面积的渐变色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(255, 64, 105, .2)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 64, 105, .5)' // 100% 处的颜色
                  }
                ]
              }
            },
            symbol: 'circle',  // 拐点样式
            symbolSize: 0   // 拐点大小
          }
        ]