2022-09-15 折线图 2条线 间隔整数 没有小数

折线图显示

image.png

数据结构

[
    {
        "countTime": "2:00",
        "doneCount": 1,
        "todoCount": 0
    },
    {
        "countTime": "4:00",
        "doneCount": 0,
        "todoCount": 0
    },
    {
        "countTime": "6:00",
        "doneCount": 0,
        "todoCount": 0
    },
    {
        "countTime": "8:00",
        "doneCount": 1,
        "todoCount": 0
    },
    {
        "countTime": "10:00",
        "doneCount": 0,
        "todoCount": 0
    }
]

    handleSetMonitorChart() {
      this.monitorChart = echarts.init(this.$refs.monitorChart)
      this.monitorChart.setOption({
        title: {
            text: '单据处理报表'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['待处理', '已处理'],
            icon: "circle",
            right: "5%",
            align: "left",
            itemGap: 50,
            itemWidth: 10, // 设置宽度
            itemHeight: 10, // 设置高度
            symbolKeepAspect: false,
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xData.map(item=>item.countTime)
          },
          yAxis: {
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false
              },
              splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#F5F7F9'
                  }
              },
              axisLabel: {
                  show: true,
                  textStyle: { 
                  color: '#000000a6',//字体颜色
                  fontSize: 12 //字体大小
                }
              },
                  type: 'value',
                  minInterval: 1 , // 只显示整数             
          },
          series: [
            {
              name: '待处理',
              type: 'line',
              data: this.xData.map(item=>item.todoCount)
            },
            {
              name: '已处理',
              type: 'line',
              data: this.xData.map(item=>item.doneCount)
            }
          ],
          color: ['#1495EB', '#00CC66']
      })
    },

截图

image.png
image.png

    handleSetMonitorChart(documentType) {
      let legendData=[]
      let dataList=[]
      let falgSeleted={} //主要是这个参数一定写上
      if(documentType == "exceptionOrder"){//异常单只有待处理的数据
        legendData=['待处理'];
        dataList=[{
              name: '待处理',
              type: 'line',
              data: this.xData.map(item=>item.todoCount)
            }]
            falgSeleted={
              '待处理':true,
              '已处理':false,
            }
      }else{
        legendData=['待处理', '已处理'];
        dataList=[{
              name: '待处理',
              type: 'line',
              data: this.xData.map(item=>item.todoCount)
            },{
              name: '已处理',
              type: 'line',
              data: this.xData.map(item=>item.doneCount)
            }]
            falgSeleted={
              '待处理':true,
              '已处理':true,
            }
      }
      this.monitorChart = echarts.init(this.$refs.monitorChart)
      this.monitorChart.setOption({
        title: {
            text: '单据处理报表'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: legendData,
            icon: "circle",
            right: "5%",
            align: "left",
            itemGap: 50,
            itemWidth: 10, // 设置宽度
            itemHeight: 10, // 设置高度
            symbolKeepAspect: false,
            selected:falgSeleted //是否隐藏那个折线
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.xData.map(item=>item.countTime)
          },
          yAxis: {
              axisTick: {
                  show: false,
              },
              axisLine: {
                  show: false
              },
              splitLine: {
                  show: true,
                  lineStyle: {
                    color: '#F5F7F9'
                  }
              },
              axisLabel: {
                  show: true,
                  textStyle: { 
                  color: '#000000a6',//字体颜色
                  fontSize: 12 //字体大小
                }
              },
                  type: 'value',
                  minInterval: 1 , // 只显示整数             
          },
          series: dataList,
          color: ['#1495EB', '#00CC66']
      })
    },