方法汇总

更改柱子颜色(渐变)

# 统一更改
import * as echarts from 'echarts';
// ....
itemStyle: {
  color: new echarts.graphic.LinearGradient(
    0, 1, 0, 0,
    [
      { offset: 0, color: '#ff7c7c' },
      { offset: 1, color: '#ff0000' }
    ]
  )
}

# 定制化每根柱子不同颜色
series: [{
  type: 'bar',
  data: [
    {
      value: 120,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 1, x2: 0, y2: 0,
          colorStops: [
            { offset: 0, color: '#42E695' },
            { offset: 1, color: '#3BB2B8' }
          ]
        }
      }
    },
    {
      value: 200,
      itemStyle: {
        color: {
          type: 'linear',
          x: 0, y: 1, x2: 0, y2: 0,
          colorStops: [
            { offset: 0, color: '#FAD961' },
            { offset: 1, color: '#F76B1C' }
          ]
        }
      }
    }
  ]
}]

标题

title: {
  text: '访问量统计',
  subtext: '单位：人',
  left: 'center',
  textStyle: {
    color: '#fff',
    fontSize: 16
  }
}

提示框

tooltip: {
  trigger: 'axis', // item | axis
  backgroundColor: 'rgba(0,0,0,0.7)',
  borderColor: '#333',
  textStyle: {
    color: '#fff'
  }
}

图例

legend: {
  top: 10,
  textStyle: {
    color: '#ccc'
  }
}

图表边距

grid: {
  left: '10%',
  right: '10%',
  top: '15%',
  bottom: '10%',
  containLabel: true
}

坐标轴

# xAxis
xAxis: {
  type: 'category',
  data: ['一月', '二月', '三月'],
  axisLine: {
    //  线样式
    lineStyle: { color: '#999' }
    //  是否显示线
    show: false
  },
  axisLabel: {
    color: '#9CA3AF', // 字体颜色
    fontSize: 12,     // 字体大小
    fontWeight: 'normal'
  },
  // 去除刻度线
  axisTick: { show: false },
}
# yAxis
yAxis: {
  type: 'value',
  splitLine: {
    lineStyle: {
      type: 'dashed',
      color: '#444'
    },
    // 去掉 Y 轴网格线
    show: false
  },
  axisLabel: {
    color: '#ccc'
  },
  axisLine: {
    show: false
  }
}

坐标轴字体旋转

axisLabel: {
  rotate: 30
}

图表类型

series.type
柱状图: bar
折线图: line
饼图: pie
雷达: radar
散点: scatter

柱状图常改项

series: [{
  type: 'bar',
  barWidth: 20,
  itemStyle: {
    borderRadius: [6, 6, 0, 0],
    color: '#3B82F6'
  },
  label: {
    show: true,
    position: 'top'
  }
}]

折线图常改项

series: [{
  type: 'line',
  smooth: true,
  symbol: 'circle',
  symbolSize: 6,
  lineStyle: {
    width: 2
  },
  areaStyle: {} // 变成面积图
}]

饼图常改项

series: [{
  type: 'pie',
  radius: ['40%', '60%'],
  center: ['50%', '50%'],
  label: {
    formatter: '{b}: {d}%'
  }
}]