Echarts柱状图下方带表格

最新推荐文章于 2024-11-30 15:51:08 发布
ZPY1020
最新推荐文章于 2024-11-30 15:51:08 发布
阅读量2.7k
点赞数
CC 4.0 BY-SA版权
文章标签： echarts javascript 前端
本文链接：https://blog.csdn.net/weixin_49155050/article/details/127246021
本文介绍了一个结合柱状图和表格的Echarts应用案例，通过详细配置展示了如何在同一视图中展示多个数据系列，并实现了交互式的数据查看功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
Echarts柱状图下方带表格

在这里插入图片描述
<div  style="width: 100%;height: 100%" id="ruleCharts"></div>

import {problemOrderDetail} from "@/views/overallSituation/api/index"
import {houseFormat,} from "@/mixins";

  data(){
    return{
      allNumber:"",//问题总计
      checkedNumber:"",//已整改
      checkingNumber:"",//整改中
      orgNameList:[],//单位
      orgNoList:[],
      problemCheckedNumberList:[],//已整改
      problemCheckProList:[],//已整改占比
      problemCheckProList2:[],//已整改占比
      problemNumberList:[],//问题总计
      problemCheckingNumberList:[],//整改中
      nameList:[],
    }
  },

async getEcharts(){
      let axisData={}
      await problemOrderDetail(
          {
            // beginTime: "2020-09-23",
            // endTime: "2023-09-23",
            // orgNo: "33101",
            beginTime:this.oneParams.startTime,
            endTime:this.oneParams.endTime,
            orgNo:this.oneParams.org
          }
      ).then(res => {
        // console.log(res, "res")
        this.allNumber=res.data.allNumber
        this.checkedNumber=res.data.checkedNumber
        this.checkingNumber=res.data.checkingNumber
        this.nameList = res.data.list;
        this.orgNameList=[]
        this.orgNoList=[]
        this.problemCheckedNumberList=[]
        this.problemCheckProList=[]
        this.problemCheckProList2=[]
        this.problemNumberList=[]
        this.problemCheckingNumberList=[]

        res.data.list.forEach(item=>{
          this.orgNameList.push(item.orgName)
          this.orgNoList.push(item.orgNo)
          this.problemCheckedNumberList.push(item.problemCheckedNumber)
          this.problemCheckProList.push(item.problemCheckPro)
          this.problemCheckProList2.push(Number(item.problemCheckPro.replace(/%/g,'')))
          this.problemNumberList.push(item.problemNumber)
          this.problemCheckingNumberList.push(item.problemCheckingNumber)
        })
        if(res.data.list){
          axisData= houseFormat(this.problemNumberList,this.problemCheckProList2)
        }
        // console.log(this.problemCheckProList2,66)
      })
      let myChart  = this.$echarts.init(document.getElementById("ruleCharts"))
      let option = {
        darkMode: true,
        grid: {
          x: 150,
          // y:45,
          x2: 50,
          y2: 210
          // borderWidth:1
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
            crossStyle: {
              color: "#999"
            }
          }
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        legend: {
          align: "left",
          itemGap: 30,
          orient: "vertical",
          textStyle: { color: "#000" },
          bottom: 10,
          left: 0,
          // data: [ "问题总计", "已整改","整改中", "已整改占比",],
          data:[{name:'问题总计',icon:'none'},{name:'已整改',icon:'stack'},{name:'整改中',icon:'stack'},{name:'已整改占比',icon:'stack'}],
          selected:{ //默认不显示
            '问题总计':false,
            // "已整改占比":false
          },
          // show: false,
          // icon:"none"
          // selectedMode:false,//取消图标点击事件
        },
        xAxis: [
          {
            type: "category",
            triggerEvent:true,
            axisLabel: {
              interval:0,
              rotate:15,
              show: true,
              textStyle: {
                fontSize: "14px"
              }
            },
            data:this.orgNameList,
            axisPointer: {
              type: "shadow"
            },
            axisLine:{
              onZero:false,
            },
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 45, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // axisLine: {
            //   show: false // 隐藏分组x轴的轴线
            // },
            axisTick: {
              length: -200, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
              // interval: function(index, value) {
              //   return index === 0 || index === 2 || index === 5; // 在0、5、6处各画一条刻度线
              // }
              // interval: 1,
            },
            // min: -30,
            // max: 11,
            interval: 1,
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: [""]
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 36, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // max: 12,
            // interval: Math.ceil(12) / 12,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            }
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 75, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // max: 12,
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: this.problemNumberList//问题总计
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 120, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // max: 12,
            // interval: Math.ceil(12) / 12,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: this.problemCheckedNumberList//已整改
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 160, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // max: 12,
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: this.problemCheckingNumberList//整改中
          },
          {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 200, // 向下偏移，使分组文字显示位置不与原x轴重叠
            // max: 12,
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" } // 非必须，仅为了演示，明显标示出分组刻度线
            },
            axisLabel: {
              inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
              interval: 0 // 强制显示全部刻度名
            },
            data: this.problemCheckProList//已整改占比
          }
        ],
        yAxis: [
          {
            type: "value",
            min: axisData.ymin,
            max: axisData.ymax,
            interval:axisData.yinterval,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                // color: "#f4f4f4",
                fontSize: "14px"
              }
            }
          },
          {
            type: 'value',
            name: '',
            min: axisData.xmin,
            max: axisData.xmax,
            interval:axisData.xinterval,
            axisLabel: {
              formatter: '{value} %'
            }
          },
        ],
        // yAxis: [
        //   {
        //     type: "value",
        //     // name: "数量：吨",
        //     // min: 0,
        //     // max: Math.ceil(115),
        //     // interval: Math.ceil(115) / 5,
        //     minInterval:1,//设置成1 ，保证纵轴显示为整数
        //     axisLabel: {
        //       formatter: "{value}",
        //       textStyle: {
        //         // color: "#f4f4f4",
        //         fontSize: "14px"
        //       }
        //     }
        //   },
        //   {
        //     type: "value",
        //     show:false,
        //     // name: "价格：元/吨",
        //     // min: 0,
        //     // max: Math.ceil(22500),
        //     // splitNumber: 6,
        //     // interval: Math.ceil(22500) / 5,
        //     axisLabel: {
        //       formatter: "{value}"
        //     }
        //   }
        // ],
        series: [
          {
            name: "整改中",
            type: "bar",
            unit: "吨",
            stack: 'sum',
            // groupName: "整改中/已整改占比",
            data: this.problemCheckingNumberList,
            itemStyle: {
              color:"#36a2f9"
            },
          },
          {
            name: '已整改占比',
            type: 'line',
            data: this.problemCheckProList2,
            yAxisIndex: 1,
            color:"#3aa1ff",
          },
          // {
          //   name: "已整改占比",
          //   type: "line",
          //   unit: "吨",
          //   // groupName: "整改中/已整改占比",
          //   data: this.problemCheckProList2,
          //   itemStyle: {
          //     color: "#3aa1ff",
          //     // width:10,//线宽为0,就不会显示了
          //   },
          //   axisLine:{
          //     lineStyle:{
          //       width:10,
          //       color: "#3aa1ff",
          //     }
          //   },
          //   showSymbol:true,
          //   // symbolSize:0,
          // },
          {
            name: "问题总计",
            type: "line",
            // yAxisIndex: 1,
            unit: "元/吨",
            data: this.problemNumberList,
            lineStyle: {
              color: "rgb(0, 0, 0)",
              width:0,//线宽为0,就不会显示了
            },
            showSymbol:false,
            symbolSize:0,
          },
          {
            name: "已整改",
            type: "bar",
            // yAxisIndex: 1,
            stack: 'sum',
            unit: "元/吨",
            data: this.problemCheckedNumberList,
            itemStyle: {
              color: "#00ffff"
            },
            lineStyle: {
              width: 5,
              type: [10, 10],
              dashOffset: 5
            }
          }
        ]
      };
      myChart.setOption(option)
      myChart.on('click',(params)=>{
        // console.log(params)
        let clickOrgNo = '';
        let clickOrgName=''
        if ((params.componentType=='xAxis')){
          this.nameList.forEach(i=>{
            if(params.value == i.orgName){
              clickOrgNo = i.orgNo;
              clickOrgName=i.orgName
            }
          })
          // console.log(clickOrgNo,clickOrgName)
          let aa={clickOrgNo,clickOrgName}
          let newParams=Object.assign(this.oneParams,aa)
          newParams.bb = "1"
          // console.log(newParams)
          // window.localStorage.setItem('getnewParams',JSON.stringify(newParams));
          this.$router.push({
            path:"/genmgt/selfinspectcompresuper/rectificationDetails",
            query: newParams
          })
          // window.open('http://localhost:9090/genmgt/selfinspectcompresuper/rectificationDetails')
        }
      })
      window.addEventListener('resize',()=>{
        myChart.resize()
      })
    }