关于echarts:echarts多型柱状图配置

45次阅读

共计 1316 个字符，预计需要花费 4 分钟才能阅读完成。

1. 电脑系统 windows10 专业版
2. 代码如下:

let bottom2cx: any = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发无效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {data: ["打算加工数", "理论加工数", "合格数", "产线节奏"],
          itemWidth: 30,
          itemHeight: 20,
          top: "5%",
          textStyle: {
            fontSize: 16, // 字体大小
            color: "wheat", // 字体色彩
          },
        },
        grid: {
          top: "14%",
          left: "3%",
          right: "4%",
          // bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
        },
        yAxis: {
          type: "category",
          data: [
            "拆卸一线",
            "拆卸二线",
            // "拆卸三线",
            // "拆卸四线",
            // "拆卸五线",
            // "拆卸六线",
            // "拆卸七线",
            // "拆卸八线",
            // "拆卸九线",
            // "拆卸十线",
            // "拆卸十一线",
            // "拆卸十二线",
            // "拆卸十三线",
            // "拆卸十四线",
            // "拆卸十五线",
            // "拆卸十六线",
            // "拆卸十七线",
            // "拆卸十八线"
          ],
          axisLabel: {
            // 管制 y 轴刻度显示
            show: true,
            textStyle: {color: "wheat",},
          },
          // data: [
          //   "拆卸一线",
          //   "拆卸二线",
          //   "拆卸三线",
          //   "拆卸四线",
          //   "拆卸五线",
          //   "拆卸六线",
          //   "拆卸七线",
          //   "拆卸八线",
          //   "拆卸九线",
          //   "拆卸十线",
          //   "拆卸十一线",
          //   "拆卸十二线",
          //   "拆卸十三线",
          //   "拆卸十四线",
          //   "拆卸十五线",
          //   "拆卸十六线",
          //   "拆卸十七线",
          //   "拆卸十八线",
          //   "拆卸十九线",
          //   "拆卸二十线",
          // ],
        },
        series: [
          {
            name: "打算加工数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [320, 302, 301, 334, 390, 330, 320, 415, 300, 360],
            data: [320, 302],
          },
          {
            name: "理论加工数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [120, 132, 101, 134, 90, 230, 210, 600, 400, 500],
            data: [120, 132],
          },
          {
            name: "合格数",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            // data: [150, 212, 201, 154, 190, 330, 410, 670, 301, 340],
            data: [150, 212],
          },
        ],
      };

3. 成果如如下:

4. 本期的教程到了这里完结啦!

正文完