Echarts饼状图设置

最近公司在做一个PC端的项目，其中有一个统计的页面，说是统计其实就是几个图表放上去好看的，因为数据需要甲方传过来太麻烦，甲方也不会弄这玩意，所以我随便在官网找了几个demo放上去了。但是其中的一个饼状图，因为容器大小的原因导致它的饼状图和标题重合了，这肯定不行的，但是我发现使用grid设置无效，所以我查了一下，发现饼状图不能设置grid，而是center

 option1: {
          legend: {},
          tooltip: {
            trigger: "axis",
            showContent: false,
          },
          dataset: {
            source: [
              ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
              ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: "category" },
          yAxis: { gridIndex: 0 },
          grid: { top: "55%" },
          series: [
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "line",
              smooth: true,
              seriesLayoutBy: "row",
              emphasis: { focus: "series" },
            },
            {
              type: "pie",
              id: "pie",
              radius: "30%",
              center: ["50%", "25%"],
              emphasis: { focus: "data" },
              label: {
                formatter: "{b}: {@2012} ({d}%)",
              },
              encode: {
                itemName: "product",
                value: "2012",
                tooltip: "2012",
              },
            },
          ],
        },
        option2: {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c}%",
          },
          toolbox: {
            show: true,
            orient: "vertical",
            top: "center",
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {},
            },
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: ["产品A", "产品B", "产品C", "产品D", "产品E"],
          },

          series: [
            {
              name: "金字塔",
              type: "funnel",
              width: "60%",
              height: "45%",
              left: "20%",
              top: "30%",
              sort: "ascending",
              funnelAlign: "center",

              center: ["25%", "75%"], // for pie

              data: [
                { value: 60, name: "产品C" },
                { value: 30, name: "产品D" },
                { value: 10, name: "产品E" },
                { value: 80, name: "产品B" },
                { value: 100, name: "产品A" },
              ],
            },
          ],
        },
        option3: {
          legend: {
            data: ["实际订单增长率", "预计订单增长率"],
          },
          xAxis: [
            {
              data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            },
          ],
          yAxis: {},
          series: [
            {
              name: "实际订单增长率",
              type: "line",
              data: [68, 77, 92, 86, 45, 64, 98, 89, 79, 80, 76, 91],
            },
            {
              name: "预计订单增长率",
              type: "bar",
              data: [60, 70, 82, 78, 60, 76, 98, 81, 76, 73, 71, 81],
            },
          ],
        },
        option4: {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "5%",
            left: "center",
          },
          color: [
            "#1e3124",
            "#f52443",
            "#0b2d64",
            "#7b8c7c",
            "#7d7d00",
            "#015437",
            "#c69c57",
            "#bda29a",
            "#6e7074",
            "#546570",
            "#c4ccd3",
          ],
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["30%", "70%"],
              center: ["50%", "60%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2,
              },

              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "16",
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: 1048, name: "搜索引擎" },
                { value: 735, name: "直接访问" },
                { value: 580, name: "邮件营销" },
                { value: 484, name: "联盟广告" },
                { value: 300, name: "视频广告" },
              ],
            },
          ],
        },

上面就是我用的四个图标设置项，更详细的可以参考这位博主的Echarts配置示例，其实还是挺想吐槽一下的，找的我是真累，再也不想看文档了。