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,
              }
			]
		}

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",
                },
              },
            ],
          },
        ],
      };

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

5.使用echarts5

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

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

6.图形不展示的问题

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

按需引入等具体配置请