echarts常见样式速查(修改频率最高的几种样式)

echarts 最常见的几种样式（可能是修改频率最高的），欢迎补充~

柱状图柱宽度

series:{
    barWidth: '8px',
}

坐标轴字体颜色

// yAxis/xAxis attr
axisLabel: {
  textStyle: {
    color: '#938258'
  }
}

隐藏坐标轴刻度线

// yAxis/xAxis attr
axisLine : {show: false},

图表位置设定

grid: {
  left: '3%',
  right: '4%',
  bottom: '3%',
  containLabel: true // 外框包含刻度数据
}

网格线样式

// yAxis/xAxis 属性
  splitLine: {
    lineStyle: {
      color: 'rgba(255,255,255,0.1)'
    }
  },

折线图点样式

series : [ {
symbol:'circle'
}]
支持的类型
ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

折线图下方区域渐变

  areaStyle: {
    color: new this.$echarts.graphic.LinearGradient(
      0, 0, 0, 1,
      [
        { offset: 0, color: 'rgba(7, 128, 182, 0.5)' }, // 柱图渐变色
        { offset: 0.5, color: 'rgba(7, 128, 182, 0.3)' }, // 柱图渐变色
        { offset: 1, color: 'rgba(7, 128, 182, 0)' } // 柱图渐变色
      ]
    )
  }

柱状图圆角及宽度

series: [
            {
                name: '数量',
                type: 'bar',
                data: barData,
                barWidth: 14, // 柱宽度
                itemStyle: {
                    normal: {
                        barBorderRadius: 7 // 圆角
                    }
                }
        ]

柱状图渐变

下方的前四个参数设置为0, 0, 1, 0可以实现从左到右渐变. 设置为0,0,0,1可以实现从上到下渐变。

srties: [
            itemStyle: {
                normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 0, color: '#3977E6'},
                            {offset: 1, color: '#37BBF8'}

                        ]
                    )
                }
            }
        ]

legend文字颜色

legend: {
  textStyle: {
    color: 'white'
  },
}

END