echarts疑难杂症

1.调整柱状图、饼图的大小

//柱状图主要根据grid属性中的top/bottom/left/right属性调整大小
let option = {
    grid: {
          left: 25,
          right: 25,
          bottom:25,
          top:25,
          containLabel: true, // 保证label不会被挤掉
        },
}

//饼图调整主要根据radius调整饼图的大小(官方描述：数组的第一项是内半径，第二项是外半径),
//调整位置依旧可以按照上下左右以及center属性
//radius[0](案例中的40%，数值越大则越细，反之越粗),
//radius[1](案例中的70%，数值越大则图越大，反之越小)
let option = {
    series: [
              {
                type: "pie",
                left: 25,
                right: 25,
                bottom:25,
                top:25, 
                radius: ["40%", "70%"],
                center: ["50%", "50%"],
                avoidLabelOverlap: false,
              }
			]
		}
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

2.嵌套饼图且颜色保持一致

链接: 可以参考该博主

3.并排展示饼图且中间展示文字

//并排展示饼图需要注意center属性，具体摆放位置可以自己调

//展示文字主要取决于formatter属性，如果里面文字过多或者多行文字，
//可以通过"{aaa|我叫aaa}"+"\n"+"{bbb|我叫bbb}",则下面可以通过rich属性去给前面设置的aaa或bbb设置单独样式
let option = {
        series: [
          {
            type: "pie",
            center: ["12.5%", "50%"],
            radius: ["75%", "90%"],
            data: [
              {
                value: 28,
                name: "Quoted",
                label: {
                  position: "center",
                  formatter: "{proportion|13/15}" + "\n" + "{title|Quoted}",
                  rich: {
                    proportion: {
                      fontSize: 12,
                      fontFamily: "微软雅黑",
                      fontWeight: 700,
                      color: "#000",
                      lineHeight: 20,
                    },
                    title: {
                      fontSize: 10,
                      fontFamily: "微软雅黑",
                      color: "#7e7e7e",
                    },
                  },
                },
                itemStyle: {
                  color: "#00af50",
                },
              },
              {
                value: 13,
                name: "",
                label: {
                  show: false,
                },
                itemStyle: {
                  color: "#a6a6a7",
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["37.5%", "50%"],
            radius: ["75%", "90%"],
            data: [
              {
                value: 26,
                name: "Shortlist",
                label: {
                  position: "center",
                  formatter: "{proportion|11/15}" + "\n" + "{title|Shortlist}",
                  rich: {
                    proportion: {
                      fontSize: 12,
                      fontFamily: "微软雅黑",
                      fontWeight: 700,
                      color: "#000",
                      lineHeight: 20,
                    },
                    title: {
                      fontSize: 10,
                      fontFamily: "微软雅黑",
                      color: "#7e7e7e",
                    },
                  },
                  textStyle: {
                    color: "#000",
                    fontSize: 12,
                  },
                },
                itemStyle: {
                  color: "#c00000",
                },
              },
              {
                value: 15,
                name: "",
                label: {
                  show: false,
                },
                itemStyle: {
                  color: "#a6a6a7",
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["62.5%", "50%"],
            radius: ["75%", "90%"],
            data: [
              {
                value: 26,
                name: "Sampling",
                label: {
                  position: "center",
                  formatter: "{proportion|11/15}" + "\n" + "{title|Sampling}",
                  rich: {
                    proportion: {
                      fontSize: 12,
                      fontFamily: "微软雅黑",
                      fontWeight: 700,
                      color: "#000",
                      lineHeight: 20,
                    },
                    title: {
                      fontSize: 10,
                      fontFamily: "微软雅黑",
                      color: "#7e7e7e",
                    },
                  },
                },
                itemStyle: {
                  color: "#bc9200",
                },
              },
              {
                value: 11,
                name: "",
                label: {
                  show: false,
                },
                itemStyle: {
                  color: "#a6a6a7",
                },
              },
            ],
          },
          {
            type: "pie",
            center: ["87.5%", "50%"],
            radius: ["75%", "90%"],
            data: [
              {
                value: 2,
                name: "Ordered",
                label: {
                  position: "center",
                  formatter: "{proportion|2/15}" + "\n" + "{title|Ordered}",
                  rich: {
                    proportion: {
                      fontSize: 12,
                      fontFamily: "微软雅黑",
                      fontWeight: 700,
                      color: "#000",
                      lineHeight: 20,
                    },
                    title: {
                      fontSize: 10,
                      fontFamily: "微软雅黑",
                      color: "#7e7e7e",
                    },
                  },
                  //   textStyle: {
                  //     color: "#000",
                  //     fontSize: 12,
                  //   },
                },
                itemStyle: {
                  color: "#92d14f",
                },
              },
              {
                value: 17,
                name: "",
                label: {
                  show: false,
                },
                itemStyle: {
                  color: "#a6a6a7",
                },
              },
            ],
          },
        ],
      };
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

4.折线图（柱状图）双y轴

5.使用echarts5

//安装
npm i echarts5 -S
//引用
import * as echarts5 from "echarts5";
//添加图表后使用
const pieItem = echarts5.init(this.$refs.pieItem);
pieItem.setOption(option);
1
2
3
4
5
6
7

注意：在vue中使用echarts时，一定得放到mounted生命周期，必须得dom元素挂载后再去渲染，如果是react中则放到useEffect中

6.图形不展示的问题

1.可能是放错了生命周期，例如在vue中，放到了created钩子中，必须放到dom挂载后
2.宽高没有设置，如果不展示，可以先审查元素，如果canvas中的height或width为0也不展示
1
2

按需引入等具体配置请