echart 饼状图设置渐变色

84 阅读 0 评论 56 点赞

我是靠谱客的博主幸福方盒，这篇文章主要介绍echart 饼状图设置渐变色，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const getLinearColor = function(color1, color2, pos) {
  const p = Object.assign({ x: 0.5, y: 0, x2: 0.5, y2: 1 }, pos)
  return {
    type: 'linear',
    ...p,
    colorStops: [
      {
        offset: 0,
        color: color1
      },
      {
        offset: 1,
        color: color2
      }
    ],
    global: false
  }
}



export default{
data(){
return{
xxxxx:饼状图值
data里的写法：[
               {
                 value: 250,
                 name: 'xxxxx',
                 itemStyle: {
                   color: getLinearColor(
                     'rgba(202, 181, 35, 1)',
                     'rgba(253, 245, 191, 1)'
                   )
                 }
]
}
}