柱状图颜色渐变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import echarts from 'echarts'
...
series: [
  {
    type: 'bar',
    // 图形样式
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#178ffc' },
        { offset: 1, color: '#ffffff' },
      ]),
    },
    emphasis: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: '#178ffc'},
        {offset: 1, color: '#ffffff'}
      ])
    }
  },
],

横坐标值显示不全（自动隐藏）

echarts中，横轴数据如果非常多，会自动隐藏一部分数据，我们可以通过属性 interval 来进行调整。

1
2
3
4
5
6
7
xAxis: {
  type: 'category',
  data: labels,
  axisLabel: {
    interval: 0,
  },
},