echarts设置渐变

116 阅读 0 评论 77 点赞

我是靠谱客的博主热心翅膀，这篇文章主要介绍echarts设置渐变，现在分享给大家，希望可以做个参考。

echarts设置渐变

记录下下，这个是那一个环形图做饼图的变框发现的

复制代码

{
          type: 'pie',
          clockWise: true,
          hoverAnimation: false,
          radius: ['53%', '57%'],
          center: ['50%', '50%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
            //   在这里改你边宽的颜色
              itemStyle:{
                  color: 'red',
              }
            //   发现一个好玩的东西，原来图表可以通过这个玩意设置渐变色的，居然还可以改变渐变的角度，赶紧拿小本本记下来
            //   itemStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
            //         {
            //           offset: 0,
            //           color: 'rgba(54, 72, 71, 1)',
            //         },
            //         {
            //           offset: 1,
            //           color: 'rgba(170, 192, 178, 1)',
            //         },
            //       ]),
            //     },
            //   },
            },
          ],
        },

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
40
{
          type: 'pie',
          clockWise: true,
          hoverAnimation: false,
          radius: ['53%', '57%'],
          center: ['50%', '50%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
            //   在这里改你边宽的颜色
              itemStyle:{
                  color: 'red',
              }
            //   发现一个好玩的东西，原来图表可以通过这个玩意设置渐变色的，居然还可以改变渐变的角度，赶紧拿小本本记下来
            //   itemStyle: {
            //     normal: {
            //       color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
            //         {
            //           offset: 0,
            //           color: 'rgba(54, 72, 71, 1)',
            //         },
            //         {
            //           offset: 1,
            //           color: 'rgba(170, 192, 178, 1)',
            //         },
            //       ]),
            //     },
            //   },
            },
          ],
        },