1、y轴配置项说明

yAxis: {
        type: 'value',
        axisLine:{       //y轴
          show:false
        },
        axisTick:{       //y轴刻度线
          show:false
        },
        splitLine: {     //网格线
          show: false
        }
    },
1
2
3
4
5
6
7
8
9
10
11
12

2、Echarts 柱状图上方显示值

3、echarts面积图渐变色

4、显示百分比

 //按百分比
      option.yAxis.axisLabel.formatter = function(value, index) {
        return (value * 100).toFixed(2) + '%';
      };
      option.tooltip.formatter = function(params) {
        var res = params[0].name + '
';
        for (let i = 0; i < params.length; i++) {
          res +=
            params[i].marker +
            params[i].seriesName +
            ':' +
            (params[i].value * 100).toFixed(2) +
            '%' +
            '
';
        }
        return res;
      };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5、饼状图和环形图中部显示两行文字

1、环形图
series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          color: ['#00a67e', '#10265a'],
          label: {
            normal: {
              show: true,
              position: 'center',
              formatter:
                `{total|${obj.value.rate}%}` +
                '\n\r' +
                `{active|${obj.value.pre}/${obj.value.total}}`,
              rich: {
                total: {
                  fontSize: 22,
                  fontFamily: '微软雅黑',
                  color: '#00a67e',
                  lineHeight: 30,
                },
                active: {
                  fontFamily: '微软雅黑',
                  fontSize: 14,
                  color: '#9bc1d2',
                },
              },
            },
            emphasis: {
              //中间文字显示
              show: true,
            },
          },
          // center: ['50%', '50%'],
          emphasis: {
            label: {
              show: true,
              fontSize: '40',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: Data,
          // data: [
          //   { value: obj.value.pre, name: 'Search Engine' },
          //   { value: obj.value.total - obj.value.pre, name: 'Direct' },
          // ],
        },
      ],


2.饼状图
 series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '70%',
          color: ['#008bd9', '#10265a'],
          data: Data,
          // [
          //   { value: obj.value.pre, name: 'Search Engine' },
          //   { value: obj.value.total - obj.value.pre, name: 'Direct' },
          // ],
          label: {
            normal: {
              show: true,
              position: 'center',
              color: '#09a0ff',
              fontSize: 15,
              formatter:
                `{total|${obj.value.rate}%}` +
                '\n\r' +
                `{active|${obj.value.pre}/${obj.value.total}}`,
              rich: {
                total: {
                  fontSize: 22,
                  fontFamily: '微软雅黑',
                  color: 'white',
                  lineHeight: 30,
                },
                active: {
                  fontFamily: '微软雅黑',
                  fontSize: 14,
                  color: '#e8faea',
                },
              },
            },
            emphasis: {
              //中间文字显示
              show: true,
            },
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

6、柱状图奇偶项颜色不同，坐标轴深色背景

option = {
      // title: {
      //   text: INIT_DATA.titleList[1],
      //   left: 'left',
      //   textStyle: {
      //     color: '#535353',
      //     fontSize: 16,
      //   },
      // },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%',
      },
      // color: barColor, //['#46bff5', '#8692ca'],
      grid: {
        top: '10%',
        left: '5%',
        right: '5%',
        bottom: '20%',
        // left: 'center',
      },
      xAxis: [
        {
          type: 'category',
          axisTick: {
            show: false, //坐标轴上刻度
          },
          boundaryGap: true, // 不留白，从原点开始
          // name: getIntlValue('时间', 'PartiManage.custom.random1641540950456'),
          data: xAxisData,
          axisPointer: {
            type: 'shadow',
          },
          axisLabel: {
            textStyle: {
              color: '#9cc4e5', //坐标值得具体的颜色
              fontSize: 16,
            },
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#02447e', //左边线的颜色
              width: '1', //坐标线的宽度
            },
          },
        },
      ],
      yAxis: [
        {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false, //坐标轴上刻度
          },
          type: 'value',
          // name: getIntlValue('数量', 'PartiManage.custom.random1634289111922'),
          min: 0,
          minInterval: 1,
          axisLabel: {
            textStyle: {
              color: '#9cc4e5', //坐标值得具体的颜色
              fontSize: 16,
            },
            formatter: '{value}%',
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#02447e', //左边线的颜色
              width: '1', //坐标线的宽度
            },
          },
        },
      ],
      // color: ['#007ed4', '#009d75'],
      series: [
        {
          type: 'bar',
          data: seriesData,
          barWidth:'30%',
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'top',
                formatter: '{c}%',
                textStyle: {
                  color: '#9cc4e5',
                  fontSize: 16,
                },
              },
              color: function(params) {
                let colorList = ['#007ed4', '#009d75'];
                let x = '';
                params.dataIndex % 2 == 0 ? (x = 1) : (x = 2);
                if (x == 1) {
                  return colorList[0];
                }
                if (x == 2) {
                  return colorList[1];
                }
              },
            },
          },
        },
      ],
      // series: seriesData,
    };
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

7、区域内滚动

dataZoom: [
          {
            type: "inside"
          }
        ],
1
2
3
4
5

8、当echarts的legend字数过多的时候变成省略号