柱状图示例

shuishen

2024-01-25 1d4d204897ac811bc58fe4bf564cc1cfefeb69ce

柱状图示例

 src/views/propertySupervision/houseHoldSupervision.vue

@@ -13,8 +13,8 @@
    </div>

    <div class="cur-from-box">
      <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud" v-model="form"
        :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
            <avue-crud :option="option" :search.sync="search" :table-loading="loading" :data="data" ref="crud"
                v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave"
        :before-open="beforeOpen" :page.sync="page" @search-change="searchChange" @search-reset="searchReset"
        @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
        @refresh-change="refreshChange" @on-load="onLoad">
@@ -53,8 +53,8 @@

    <el-dialog title="标签管理" append-to-body :visible.sync="labelFlag" center width="600px">
      <div id="" class="grid-container2">
        <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData" :key="index"
          @click="changLabel(item)">
                <div class="grid-item" :style="{ backgroundColor: item.color }" v-for="(item, index) in labelData"
                    :key="index" @click="changLabel(item)">
          {{ item.name }}
        </div>
      </div>
@@ -883,12 +883,9 @@
      },

      setBarEchartsOption(data) {
        console.log(JSON.stringify(data))
        var chartDom = document.getElementById('bar-echarts')
        var myChart = echarts.init(chartDom)
        var option

        option = {
            var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
@@ -901,41 +898,75 @@
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
                xAxis: {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }],
          yAxis: [{
                },
                yAxis: {
            type: 'value'
          }],
          series: [{
            name: '数量',
            type: 'bar',
            barWidth: '50%',
            data: []
          }]
                },
                series: []
        }

        // option && myChart.setOption(option)

        for (let i = 0, ii = data.length; i < ii; i++) {
          option.xAxis[0].data.push(data[i].name)
          option.series[0].data.push(data[i].counts)
          option && myChart.setOption(option)
            // for (let i = 0, ii = data.length; i < ii; i++) {
            //     option.xAxis[0].data.push(data[i].name)
            //     option.series[0].data.push(data[i].counts)
            //     option && myChart.setOption(option)
            // }

            const rawData = [
                [100, 302, 301, 334, 390, 330, 320],
                [320, 132, 101, 134, 90, 230, 210],
                [220, 182, 191, 234, 290, 330, 310],
                [150, 212, 201, 154, 190, 330, 410],
                [820, 832, 901, 934, 1290, 1330, 1320]
            ]
            const totalData = []
            for (let i = 0; i < rawData[0].length; ++i) {
                let sum = 0
                for (let j = 0; j < rawData.length; ++j) {
                    sum += rawData[j][i]
        }
                totalData.push(sum)
            }

            let xData = [
                'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'
            ]

            let typeData = ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine']

            option.xAxis.data = xData

            option.series = typeData.map((name, sid) => {
                return {
                    name,
                    type: 'bar',
                    stack: 'total',
                    barWidth: '60%',
                    label: {
                        show: true,
                        formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
                    },
                    data: rawData[sid].map((d, did) =>
                        totalData[did] <= 0 ? 0 : d / totalData[did]
                    )
                }
            })

            myChart.setOption(option)

        myChart.on('click', (params) => {
          console.log(params)
          this.query.neiName = params.data.name
          this.onLoad(this.page, this.query)
        })


      }


    }
  }
</script>