• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

echarts多型柱状图配置

互联网 diligentman 6天前 9次浏览

echarts多型柱状图配置

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.效果如如下:
echarts多型柱状图配置
4.本期的教程到了这里结束啦!


喜欢 (0)