项目加工进度图表实现（echarts）

最新推荐文章于 2024-06-23 13:00:46 发布

小白鸽hc

最新推荐文章于 2024-06-23 13:00:46 发布

阅读量121

点赞数

文章标签：前端 javascript 机器学习

本文链接：https://blog.csdn.net/weixin_47438730/article/details/135029991

版权

let color = [
  {
    type: 'linear',
    colorStops: [
      {
        offset: 0,
        color: '#316BCF' // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#20E1FD' // 100% 处的颜色
      }
    ]
  },
  {
    type: 'linear',
    colorStops: [
      {
        offset: 0,
        color: '#1DAD9C' // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#66F5F5' // 100% 处的颜色
      }
    ]
  },
  {
    type: 'linear',
    colorStops: [
      {
        offset: 0,
        color: '#3C5CBF' // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#5098F4' // 100% 处的颜色
      }
    ]
  },
  {
    type: 'linear',
    colorStops: [
      {
        offset: 0,
        color: '#0D2872' // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#0350AF' // 100% 处的颜色
      }
    ]
  }
];

let label = {
  show: true,
  position: 'insideRight',
  textStyle: {
    color: '#fff'
  }
};
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  title: {
    text: '项目加工进度'
  },
  color,
  legend: {
    right: '2%',
    bottom: '5%',
    orient: 'vertical',
    selectedMode: false
  },
  grid: {
    left: '3%',
    right: '15%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: [
      '项目一',
      '项目二',
      '项目三',
      '项目四',
      '项目五',
      '项目六',
      '项目七'
    ],
    axisTick: false
  },
  series: [
    {
      name: '出货',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      data: [120, 162, 161, 194, 150, 230, 210],
      label
    },
    {
      name: '涂装',
      type: 'bar',
      stack: 'total',
      label,
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '铆焊',
      type: 'bar',
      stack: 'total',
      emphasis: {
        focus: 'series'
      },
      label,
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: '下料',
      type: 'bar',
      stack: 'total',
      label,
      emphasis: {
        focus: 'series'
      },
      data: [345, 647, 467, 456, 675, 856, 579]
    }
  ]
};