devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

VUE3：统计分析页面布局+自适应页面参考_vue3自适应布局

作者：黑客灵魂 | 2024-06-21 06:10:51

赞

踩

vue3自适应布局

一、布局

  1. <template>
  2.     <div class="container1">
  3.         <div class="form white">
  4.             <el-form :inline="true" :rules="rules" :model="queryParams" label-width="80px" ref="querParmRef">
  5.                 <el-form-item label="城市" prop="cityId">
  6.  
  7.                     <el-select v-model="queryParams.cityId" clearable filterable placeholder="请选择城市" style="width: 169px">
  8.                         <el-option v-for="item in citylists" :key="item.english" :label="item.english"
  9.                             :value="item.chinese">
  10.                         </el-option> </el-select>
  11.  
  12.                 </el-form-item>
  13.                 <el-form-item label="公司" prop="companyId">
  14.  
  15.                     <el-select v-model="queryParams.companyId" clearable filterable placeholder="请选择公司"
  16.                         style="width: 169px">
  17.                         <el-option v-for="item in citylists" :key="item.english" :label="item.english"
  18.                             :value="item.chinese">
  19.                         </el-option> </el-select>
  20.  
  21.                 </el-form-item>
  22.                 <el-form-item label="日期" prop="date">
  23.                     <el-date-picker v-model="queryParams.date" value-format="YYYY-MM-DD" style="width: 169px" type="date"
  24.                         placeholder="" />
  25.  
  26.                 </el-form-item>
  27.  
  28.                 <el-form-item label="对比日期" prop="date">
  29.                     <el-date-picker v-model="queryParams.date" value-format="YYYY-MM-DD" style="width: 169px" type="date"
  30.                         placeholder="" />
  31.  
  32.                 </el-form-item>
  33.                 <el-form-item>
  34.                     <el-button @click="resetQuery">重置</el-button>
  35.                     <el-button type="primary" @click="btntop()" class="btnClick">搜索</el-button>
  36.                 </el-form-item>
  37.  
  38.                 <!-- <el-form-item label="起止时间">
  39.                     <el-date-picker style="width: 358px" v-model="queryParams.timeValue" type="datetimerange"
  40.                         range-separator="-" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
  41.                         end-placeholder="结束时间" :size="size" />
  42.                 </el-form-item> -->
  43.                 <div>
  44.                 </div>
  45.             </el-form>
  46.         </div>
  47.  
  48.         <div class="echartsBot white">
  49.             <el-tabs v-model="activeName" class="tabs">
  50.                 <el-tab-pane label="1" name="first"></el-tab-pane>
  51.                 <el-tab-pane label="2" name="second">2</el-tab-pane>
  52.                 <el-tab-pane label="3" name="third">3</el-tab-pane>
  53.             </el-tabs>
  54.             <!-- 上部分 -->
  55.             <div class="top">
  56.                 <!-- 左边 -->
  57.                 <div class="left">
  58.                     <div class="chart chart1"></div>
  59.                     <div class="chart chart2"></div>
  60.                 </div>
  61.                 <!-- 中间 -->
  62.                 <div class="middle">
  63.                     <div class="chart chart3"></div>
  64.                 </div>
  65.                 <!-- 右边 -->
  66.                 <div class="right">
  67.                     <div class="chart chart4"></div>
  68.                 </div>
  69.             </div>
  70.             <!-- 下部分 -->
  71.             <div class="bottom">
  72.                 <div class="chart chart5"></div>
  73.                 <div class="chart chart6"></div>
  74.                 <div class="chart chart7"></div>
  75.                 <div class="chart chart8"></div>
  76.             </div>
  77.         </div>
  78.     </div>
  79. </template>
  80.  
  81. <style scoped lang="scss">
  82. .container1 {
  83.     padding: calc(100vw * 15 / 1920);
  84.     display: flex;
  85.     flex-direction: column;
  86.     /* 设置垂直方向排列 */
  87.     height: 100%;
  88.     width: 100%;
  89.     background-color: #F7F8FA;
  90.  
  91. }
  92.  
  93. .white {
  94.     background-color: #fff;
  95. }
  96.  
  97. .echartsBot {
  98.     flex: 1;
  99.     width: 100%;
  100.     padding: 0 calc(100vw * 15 / 1920) calc(100vw * 15 / 1920);
  101.     margin-top: calc(100vw * 10 / 1920);
  102. }
  103.  
  104. .titles1 {
  105.     width: 100%;
  106.     height: calc(100vw * 20 / 1920);
  107.     font-size: calc(100vw * 14 / 1920);
  108.     font-weight: 600;
  109.     color: #1d2129;
  110.     line-height: calc(100vw * 20 / 1920);
  111.     padding-left: 1vh;
  112. }
  113.  
  114.  
  115. /* 上部分 */
  116. .echartsBot .top {
  117.     display: flex;
  118.     height: calc(65% - 50px)
  119. }
  120.  
  121. /* 左边 */
  122. .echartsBot .left {
  123.     width: 46%;
  124.     display: flex;
  125.     flex-direction: column;
  126.     margin-right: calc(100vw * 15 / 1920);
  127.  
  128. }
  129.  
  130. /* 中间 */
  131. .echartsBot .middle {
  132.     width: 27%;
  133.     background-color: #5be948;
  134.     margin-right: calc(100vw * 15 / 1920);
  135.  
  136. }
  137.  
  138. /* 右边 */
  139. .echartsBot .right {
  140.     width: 27%;
  141.     background-color: #1e7f97;
  142.  
  143. }
  144.  
  145. /* 柱状图 */
  146. .echartsBot .chart {
  147.     /* 修改为需要的宽度和高度 */
  148.     // width: 300px;
  149.     // height: 200px;
  150. }
  151.  
  152. /* 左边的柱状图 */
  153. .echartsBot .left .chart1 {
  154.     /* 样式设置 */
  155.     flex:1;
  156.     margin-bottom: calc(100vw * 15 / 1920);
  157.     background-color: #64b959;
  158.  
  159. }
  160.  
  161. .echartsBot .left .chart2 {
  162.     /* 样式设置 */
  163.     flex:1;
  164.     background-color: #8d2424;
  165.  
  166. }
  167.  
  168. /* 中间的柱状图 */
  169. .echartsBot .middle .chart3 {
  170.     /* 样式设置 */
  171. }
  172.  
  173. /* 右边的柱状图 */
  174. .echartsBot .right .chart4 {
  175.     /* 样式设置 */
  176. }
  177.  
  178. /* 下部分 */
  179. .echartsBot .bottom {
  180.     display: flex;
  181.     // height: 40%;
  182.     margin-top: calc(100vw * 15 / 1920); // height: calc(50%- 10px);
  183.     height: calc(35% - calc(100vw * 19 / 1920));
  184. }
  185.  
  186. /* 底部柱状图 */
  187. .echartsBot .bottom .chart {
  188.     /* 修改为需要的宽度和高度 */
  189.     // width: 200px;
  190.     // height: 150px;
  191. }
  192.  
  193. .echartsBot .bottom .chart5 {
  194.     /* 样式设置 */
  195.     flex: 1;
  196.     background-color: #ecd2d2;
  197.     height: 100%;
  198.     margin-right: calc(100vw * 15 / 1920);
  199.  
  200.  
  201. }
  202.  
  203. .echartsBot .bottom .chart6 {
  204.     /* 样式设置 */
  205.     flex: 1;
  206.     margin-right: calc(100vw * 15 / 1920);
  207.  
  208.     background-color: #b6c789;
  209.     height: 100%;
  210.  
  211. }
  212.  
  213. .echartsBot .bottom .chart7 {
  214.     /* 样式设置 */
  215.     flex: 1;
  216.     margin-right: calc(100vw * 15 / 1920);
  217.  
  218.     background-color: #a7a2e0;
  219.     height: 100%;
  220.  
  221. }
  222.  
  223. .echartsBot .bottom .chart8 {
  224.     /* 样式设置 */
  225.     flex: 1;
  226.  
  227.     background-color: #dba6d0;
  228.     height: 100%;
  229.  
  230. }
  231. </style>

 上面效果图的代码，用的flex布局，宽高边距都用了动态的，浏览器窗口大小改变也会自适应

二、分完模块优化

最终效果图如上

完整版代码

 

  1. <template>
  2.     <div class="container1">
  3.         <div class="form white">
  4.             <el-form :inline="true" :rules="rules" :model="queryParams" label-width="80px" ref="querParmRef">
  5.                 <el-form-item label="城市" prop="cityId">
  6.  
  7.                     <el-select v-model="queryParams.cityId" clearable filterable placeholder="请选择城市" style="width: 169px">
  8.                         <el-option v-for="item in citylists" :key="item.english" :label="item.english"
  9.                             :value="item.chinese">
  10.                         </el-option> </el-select>
  11.  
  12.                 </el-form-item>
  13.              
  14.                 <el-form-item label="公司" prop="companyId">
  15.  
  16.                     <el-select v-model="queryParams.companyId" clearable filterable placeholder="请选择公司"
  17.                         style="width: 169px">
  18.                         <el-option v-for="item in citylists" :key="item.english" :label="item.english"
  19.                             :value="item.chinese">
  20.                         </el-option> </el-select>
  21.  
  22.                 </el-form-item>
  23.                 <el-form-item label="日期" prop="date">
  24.                     <el-date-picker v-model="queryParams.date" value-format="YYYY-MM-DD" style="width: 169px" type="date"
  25.                         placeholder="" />
  26.  
  27.                 </el-form-item>
  28.  
  29.                 <el-form-item label="对比日期" prop="date">
  30.                     <el-date-picker v-model="queryParams.date" value-format="YYYY-MM-DD" style="width: 169px" type="date"
  31.                         placeholder="" />
  32.  
  33.                 </el-form-item>
  34.                 <el-form-item>
  35.                     <el-button @click="resetQuery">重置</el-button>
  36.                     <el-button type="primary" @click="btntop()" class="btnClick">搜索</el-button>
  37.                 </el-form-item>
  38.  
  39.                 <!-- <el-form-item label="起止时间">
  40.                     <el-date-picker style="width: 358px" v-model="queryParams.timeValue" type="datetimerange"
  41.                         range-separator="-" value-format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
  42.                         end-placeholder="结束时间" :size="size" />
  43.                 </el-form-item> -->
  44.                 <div>
  45.                 </div>
  46.             </el-form>
  47.         </div>
  48.  
  49.         <div class="echartsBot white">
  50.             <el-tabs v-model="activeName" class="tabs">
  51.                 <el-tab-pane label="1" name="first"></el-tab-pane>
  52.                 <!-- <el-tab-pane label="冷热能效耗能排名总览" name="first"></el-tab-pane> -->
  53.                 <el-tab-pane label="2" name="second">2</el-tab-pane>
  54.                 <el-tab-pane label="3" name="third">3</el-tab-pane>
  55.             </el-tabs>
  56.             <!-- 上部分 -->
  57.             <div class="top">
  58.                 <!-- 左边 -->
  59.                 <div class="left">
  60.                     <div class="chart chart1">
  61.                         <div class="titles1">面积排名</div>
  62.                         <Echarts1 :echartList="echartList1" />
  63.  
  64.                     </div>
  65.                     <div class="chart chart2">
  66.                         <div class="titles1">运营天数排名</div>
  67.  
  68.                         <Echarts2 :echartList="echartList2" />
  69.  
  70.                     </div>
  71.                 </div>
  72.                 <!-- 中间 -->
  73.                 <div class="middle">
  74.                     <div class="titles1">COP排名</div>
  75.                     <Echarts3 :echartList="echartList3" />
  76.  
  77.                     <!-- <div class="chart chart3"></div> -->
  78.  
  79.                 </div>
  80.                 <!-- 右边 -->
  81.                 <div class="right">
  82.                     <div class="titles1">SCOP排名</div>
  83.                     <Echarts4 :echartList="echartList4" />
  84.                 </div>
  85.             </div>
  86.             <!-- 下部分 -->
  87.             <div class="bottom">
  88.                 <div class="chart chart5">
  89.                     <div class="titles1">热单耗排名</div>
  90.  
  91.                     <Echarts5 :echartList="echartList5" />
  92.  
  93.                 </div>
  94.                 <div class="chart chart6">
  95.                     <div class="titles1">热单耗排名</div>
  96.  
  97.                     <Echarts6 :echartList="echartList6" />
  98.                 </div>
  99.                 <div class="chart chart7">
  100.                     <div class="titles1">热单耗排名</div>
  101.  
  102.                     <Echarts7 :echartList="echartList7" />
  103.                 </div>
  104.                 <div class="chart chart8">
  105.                     <div class="titles1">热单耗排名</div>
  106.  
  107.                     <Echarts8 :echartList="echartList8" />
  108.                 </div>
  109.             </div>
  110.         </div>
  111.     </div>
  112. </template>
  113. <script setup>
  114. import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
  115. import Echarts1 from "./echarts/echarts1.vue";
  116. import Echarts2 from "./echarts/echarts2.vue";
  117. import Echarts3 from "./echarts/echarts3.vue";
  118. import Echarts4 from "./echarts/echarts4.vue";
  119. import Echarts5 from "./echarts/echarts5.vue";
  120. import Echarts6 from "./echarts/echarts6.vue";
  121. import Echarts7 from "./echarts/echarts7.vue";
  122. import Echarts8 from "./echarts/echarts8.vue";
  123. const { proxy } = getCurrentInstance();
  124. import { parseTime } from "@/utils/ruoyi";
  125. import { useRoute } from "vue-router";
  126.  
  127. const echartList1 = ref([
  128.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  129.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  130.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  131.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  132.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  133.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  134.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  135. ]);
  136. const echartList2 = ref([
  137.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  138.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  139.  
  140.  
  141. ]);
  142. const echartList3 = ref([
  143.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  144.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  145.  
  146.  
  147. ]);
  148. const echartList4 = ref([
  149.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }
  150.  
  151.  
  152. ])
  153. const echartList5 = ref([
  154.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 },
  155.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }
  156.  
  157.  
  158. ])
  159. const echartList6 = ref([
  160.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }
  161.  
  162.  
  163. ])
  164. const echartList7 = ref([
  165.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }
  166.  
  167.  
  168. ])
  169. const echartList8 = ref([
  170.     { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }, { cityName: '济南', parkArea: 12 }
  171.  
  172.  
  173. ])
  174. const activeName = ref('first')
  175. </script>
  176. <style scoped lang="scss">
  177. .container1 {
  178.     padding: calc(100vw * 15 / 1920);
  179.     display: flex;
  180.     flex-direction: column;
  181.     /* 设置垂直方向排列 */
  182.     height: 100%;
  183.     width: 100%;
  184.     background-color: #F7F8FA;
  185.  
  186. }
  187.  
  188. .white {
  189.     background-color: #fff;
  190. }
  191.  
  192. .echartsBot {
  193.     flex: 1;
  194.     width: 100%;
  195.     padding: 0 calc(100vw * 15 / 1920) ;
  196.     margin-top: calc(100vw * 10 / 1920);
  197. }
  198.  
  199. .titles1 {
  200.     width: 100%;
  201.     height: calc(100vw * 20 / 1920);
  202.     font-size: calc(100vw * 14 / 1920);
  203.     font-weight: 600;
  204.     color: #1d2129;
  205.     line-height: calc(100vw * 20 / 1920);
  206.     padding-left: 1vh;
  207. }
  208.  
  209.  
  210. /* 上部分 */
  211. .echartsBot .top {
  212.     display: flex;
  213.     height: calc(63% - 50px)
  214. }
  215.  
  216. /* 左边 */
  217. .echartsBot .left {
  218.     width: 46%;
  219.     display: flex;
  220.     flex-direction: column;
  221.     margin-right: calc(100vw * 15 / 1920);
  222.  
  223. }
  224.  
  225. /* 中间 */
  226. .echartsBot .middle {
  227.     width: 27%;
  228.     // padding: calc(100vw * 15 / 1920);
  229.  
  230.     margin-right: calc(100vw * 15 / 1920);
  231.     border-radius: 4px 4px 4px 4px;
  232.     border: 1px solid rgba(61, 61, 61, 0.1);
  233. }
  234.  
  235. /* 右边 */
  236. .echartsBot .right {
  237.     width: 27%;
  238.     // padding: calc(100vw * 15 / 1920);
  239.  
  240.     border-radius: 4px 4px 4px 4px;
  241.     border: 1px solid rgba(61, 61, 61, 0.1);
  242. }
  243.  
  244. /* 柱状图 */
  245. .chart {
  246.     /* 修改为需要的宽度和高度 */
  247.     // width: 300px;
  248.     // height: 200px;
  249.     // padding: calc(100vw * 15 / 1920);
  250.  
  251. }
  252.  
  253. /* 左边的柱状图 */
  254. .echartsBot .left .chart1 {
  255.     /* 样式设置 */
  256.     height: calc(50% - calc(100vw * 16 / 1920));
  257.     margin-bottom: calc(100vw * 10 / 1920);
  258.     border-radius: 4px 4px 4px 4px;
  259.     border: 1px solid rgba(61, 61, 61, 0.1);
  260. }
  261.  
  262. .echartsBot .left .chart2 {
  263.     /* 样式设置 */
  264.     flex: 1;
  265.     border-radius: 4px 4px 4px 4px;
  266.     border: 1px solid rgba(61, 61, 61, 0.1);
  267. }
  268.  
  269. /* 中间的柱状图 */
  270. .echartsBot .middle .chart3 {
  271.     /* 样式设置 */
  272. }
  273.  
  274. /* 右边的柱状图 */
  275. .echartsBot .right .chart4 {
  276.     /* 样式设置 */
  277. }
  278.  
  279. /* 下部分 */
  280. .echartsBot .bottom {
  281.     display: flex;
  282.     // height: 40%;
  283.     margin-top: calc(100vw * 15 / 1920); // height: calc(50%- 10px);
  284.     height: calc(35% - calc(100vw * 19 / 1920));
  285. }
  286.  
  287. /* 底部柱状图 */
  288. .echartsBot .bottom .chart {
  289.     /* 修改为需要的宽度和高度 */
  290.     // width: 200px;
  291.     // height: 150px;
  292. }
  293.  
  294. .echartsBot .bottom .chart5 {
  295.     /* 样式设置 */
  296.     flex: 1;
  297.     height: 100%;
  298.     margin-right: calc(100vw * 15 / 1920);
  299.     border-radius: 4px 4px 4px 4px;
  300.     border: 1px solid rgba(61, 61, 61, 0.1);
  301.  
  302. }
  303.  
  304. .echartsBot .bottom .chart6 {
  305.     /* 样式设置 */
  306.     flex: 1;
  307.     margin-right: calc(100vw * 15 / 1920);
  308.  
  309.     height: 100%;
  310.     border-radius: 4px 4px 4px 4px;
  311.     border: 1px solid rgba(61, 61, 61, 0.1);
  312. }
  313.  
  314. .echartsBot .bottom .chart7 {
  315.     /* 样式设置 */
  316.     flex: 1;
  317.     margin-right: calc(100vw * 15 / 1920);
  318.  
  319.     height: 100%;
  320.     border-radius: 4px 4px 4px 4px;
  321.     border: 1px solid rgba(61, 61, 61, 0.1);
  322. }
  323.  
  324. .echartsBot .bottom .chart8 {
  325.     /* 样式设置 */
  326.     flex: 1;
  327.  
  328.     height: 100%;
  329.     border-radius: 4px 4px 4px 4px;
  330.     border: 1px solid rgba(61, 61, 61, 0.1);
  331. }
  332. </style>

具体echarts图

第一个

  1. <template>
  2.   <div id="echarts1"></div>
  3. </template>
  4.  
  5. <script setup>
  6. import * as echarts from "echarts";
  7. const emit = defineEmits();
  8.  
  9. const props = defineProps({
  10.   echartList: {
  11.     default: [],
  12.   },
  13. });
  14. const initChart = () => {
  15.   let xdata = [];
  16.   let ydata1 = [];
  17.   let xdataid = [];
  18.   props.echartList.forEach((item) => {
  19.     xdata.push(item.cityName);
  20.     xdataid.push(item.cityId);
  21.     ydata1.push(item.parkArea);
  22.   });
  23.   const machart = echarts.init(document.getElementById("echarts1"));
  24.   var defaultShowNum = 10; // 默认显示的数据条数
  25.  
  26.   var start = 0;
  27.   var end = Math.min(defaultShowNum, xdata.length) / xdata.length * 100;
  28.   var option = {
  29.     tooltip: {
  30.       trigger: "axis",
  31.       formatter: '{c}', // 修改为只显示名称和数值
  32.  
  33.       backgroundColor: 'rgba(255,255,255,0.8)', // 气泡框背景颜色
  34.       textStyle: {
  35.         color: '#333', // 文字颜色
  36.         fontSize: 14 // 文字大小
  37.       },
  38.       position: function (pos, params, el, elRect, size) {
  39.         return { left: pos[0], top: pos[1] };
  40.       }, // 设置气泡框的位置在鼠标悬浮的地方
  41.       padding: [10, 10, 10, 10], // 设置气泡框的内边距
  42.       extraCssText: 'width: auto; height: auto; text-align: center; line-height: 30px;', // 设置气泡框的宽度、高度、文本居中显示
  43.  
  44.     },
  45.     dataZoom: [
  46.       {
  47.         type: 'slider', // 缩放条类型为滑动条
  48.         show: true, // 显示缩放条
  49.         start: start, // 根据数据计算的开始位置
  50.         end: end, // 根据数据计算的结束位置
  51.         bottom: '5%', // 距离底部的距离
  52.         height: 5, // 设置高度
  53.       },
  54.       {
  55.         type: 'inside', // 内置缩放条
  56.         start: start,
  57.         end: end,
  58.       },
  59.     ],
  60.     calculable: true,
  61.     // legend: {
  62.     //   // data: ["xxx"],
  63.     //   left: "left",s
  64.     //   x: "left",
  65.     //   top: "0%",
  66.     //   left: "2%",
  67.     //   icon: "roundRect",
  68.     //   itemWidth: 10, // 设置宽度
  69.     //   itemHeight: 10, // 设置高度
  70.     // },
  71.     color: ["#579AFF", "#B1B1F0", "#F7BEBE", '#BDF6E6'],
  72.     grid: {
  73.       top: "14sss%",
  74.       bottom: "10%",
  75.       left: "1%",
  76.       right: "1%",
  77.       containLabel: true,
  78.     },
  79.     xAxis: [
  80.       {
  81.         type: "category",
  82.         data: xdata,
  83.         axisTick: {
  84.           show: false, // 不显示刻度
  85.         },
  86.  
  87.       },
  88.     ],
  89.     yAxis: [
  90.       {
  91.         type: "value",
  92.  
  93.       },
  94.     ],
  95.  
  96.     series: [
  97.       {
  98.         // name: "城市占比",
  99.         type: "bar",
  100.         data: ydata1,
  101.         barWidth: "35%",
  102.         //   label: { // 添加标签配置
  103.         //   show: true, // 显示标签
  104.         //   position: 'top', // 标签位置为柱子顶部
  105.         //   formatter: '{c} ', // 标签内容格式为数据加单位
  106.         // },
  107.       },
  108.  
  109.     ],
  110.   };
  111.   machart.setOption(option);
  112.   setTimeout(() => {
  113.     window.addEventListener("resize", resizeFn);
  114.   }, 100);
  115.   const resizeFn = () => {
  116.     return machart.resize();
  117.   };
  118.   machart.on("click", (params) => {
  119.     if (params.componentType === "series") {
  120.       const dataIndex = params.dataIndex;
  121.       const yValue = xdata[dataIndex]; // 获取对应柱子的y值
  122.       const cidtyid = xdataid[dataIndex]; // 获取对应柱子的y值
  123.       emit("changedi", yValue, cidtyid);
  124.  
  125.       // 在这里你可以对获取到的y值进行其他操作，比如弹窗显示等
  126.     }
  127.   });
  128. };
  129. setTimeout(() => {
  130.   initChart();
  131. }, 800);
  132. defineExpose({
  133.   initChart,
  134. });
  135. onBeforeUnmount(() => {
  136.   // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  137.   window.removeEventListener("resize", initChart);
  138. });
  139. </script>
  140.  
  141. <style scoped>
  142. #echarts1 {
  143.   width: 100%;
  144.   height: 95%;
  145.   /* height:    calc(30vh- 10px); */
  146. }
  147. </style>

右边两个

  1. <template>
  2.   <div id="echarts3"></div>
  3. </template>
  4.  
  5. <script setup>
  6. import * as echarts from "echarts";
  7. const emit = defineEmits();
  8.  
  9. const props = defineProps({
  10.   echartList: {
  11.     default: [],
  12.   },
  13. });
  14. const initChart = () => {
  15.   let xdata = [];
  16.   let ydata1 = [];
  17.   let xdataid = [];
  18.   props.echartList.forEach((item) => {
  19.     xdata.push(item.cityName);
  20.     xdataid.push(item.cityId);
  21.     ydata1.push(item.parkArea);
  22.   });
  23.   const machart = echarts.init(document.getElementById("echarts3"));
  24.   var defaultShowNum = 10; // 默认显示的数据条数
  25.  
  26.   var start = 0;
  27.   var end = Math.min(defaultShowNum, xdata.length) / xdata.length * 100;
  28.   var option = {
  29.     tooltip: {
  30.       trigger: "axis",
  31.       formatter: '{c}', // 修改为只显示名称和数值
  32.  
  33.       backgroundColor: 'rgba(255,255,255,0.8)', // 气泡框背景颜色
  34.       textStyle: {
  35.         color: '#333', // 文字颜色
  36.         fontSize: 14 // 文字大小
  37.       },
  38.       position: function (pos, params, el, elRect, size) {
  39.         return { left: pos[0], top: pos[1] };
  40.       }, // 设置气泡框的位置在鼠标悬浮的地方
  41.       padding: [10, 10, 10, 10], // 设置气泡框的内边距
  42.       extraCssText: 'width: auto; height: auto; text-align: center; line-height: 30px;', // 设置气泡框的宽度、高度、文本居中显示
  43.  
  44.     },
  45.     dataZoom: [
  46.       {
  47.         type: 'slider',
  48.         orient: 'vertical', // 设置为垂直方向
  49.         show: true,
  50.         start: start,
  51.         end: end,
  52.         right: 0, // 距离右侧的距离
  53.         width: 10, // 设置宽度
  54.       },
  55.       {
  56.         type: 'inside', // 内置缩放条
  57.         start: start,
  58.         end: end,
  59.       },
  60.     ],
  61.     calculable: true,
  62.     // legend: {
  63.     //   // data: ["xxx"],
  64.     //   left: "left",s
  65.     //   x: "left",
  66.     //   top: "0%",
  67.     //   left: "2%",
  68.     //   icon: "roundRect",
  69.     //   itemWidth: 10, // 设置宽度
  70.     //   itemHeight: 10, // 设置高度
  71.     // },
  72.     // color: ["#579AFF", "#B1B1F0", "#F7BEBE", '#BDF6E6'],
  73.     grid: {
  74.       top: "5%",
  75.       bottom: "1%",
  76.       left: "1%",
  77.       right: "8%",
  78.       containLabel: true,
  79.     },
  80.     yAxis: [
  81.       {
  82.         type: "category",
  83.         data: xdata.reverse(),
  84.         axisLine: {
  85.           show: false, // 隐藏坐标轴线
  86.         },
  87.         axisTick: {
  88.           show: false, // 不显示刻度线
  89.         },
  90.         axisLabel: {
  91.           show: true, // 显示坐标轴标签
  92.         },
  93.       },
  94.     ],
  95.     xAxis: [
  96.       {
  97.         type: "value",
  98.         show: false, // 不显示x轴
  99.       },
  100.     ],
  101.  
  102.     series: [
  103.       {
  104.         // name: "城市占比",
  105.         type: "bar",
  106.         data: ydata1.reverse(),
  107.         barWidth: "35%",
  108.         itemStyle: {
  109.           color: function (params) {
  110.             if (params.dataIndex >= xdata.length - 3) {
  111.               // 最后三条数据
  112.               if (params.dataIndex === xdata.length - 1) {
  113.                 return '#E96163'; // 设置最后一条数据的颜色
  114.               } else if (params.dataIndex === xdata.length - 2) {
  115.                 return '#FEA935'; // 设置倒数第二条数据的颜色
  116.               } else {
  117.                 return '#F0DC5A'; // 设置倒数第三条数据的颜色
  118.               }
  119.             } else {
  120.               return '#579AFF'; // 其他数据的颜色
  121.             }
  122.           }
  123.         },
  124.  
  125.       },
  126.  
  127.     ],
  128.   };
  129.   machart.setOption(option);
  130.   setTimeout(() => {
  131.     window.addEventListener("resize", resizeFn);
  132.   }, 100);
  133.   const resizeFn = () => {
  134.     return machart.resize();
  135.   };
  136.   machart.on("click", (params) => {
  137.     if (params.componentType === "series") {
  138.       const dataIndex = params.dataIndex;
  139.       const yValue = xdata[dataIndex]; // 获取对应柱子的y值
  140.       const cidtyid = xdataid[dataIndex]; // 获取对应柱子的y值
  141.       emit("changedi", yValue, cidtyid);
  142.  
  143.       // 在这里你可以对获取到的y值进行其他操作，比如弹窗显示等
  144.     }
  145.   });
  146. };
  147. setTimeout(() => {
  148.   initChart();
  149. }, 800);
  150. defineExpose({
  151.   initChart,
  152. });
  153. onBeforeUnmount(() => {
  154.   // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  155.   window.removeEventListener("resize", initChart);
  156. });
  157. </script>
  158.  
  159. <style scoped>
  160. #echarts3 {
  161.   width: 100%;
  162.   height: 95%;
  163.   /* height:    calc(30vh- 10px); */
  164. }
  165. </style>

最下面的

  1. <template>
  2.   <div id="echarts8"></div>
  3. </template>
  4.  
  5. <script setup>
  6. import * as echarts from "echarts";
  7. const emit = defineEmits();
  8.  
  9. const props = defineProps({
  10.   echartList: {
  11.     default: [],
  12.   },
  13. });
  14. const initChart = () => {
  15.   let xdata = [];
  16.   let ydata1 = [];
  17.   let xdataid = [];
  18.   props.echartList.forEach((item) => {
  19.     xdata.push(item.cityName);
  20.     xdataid.push(item.cityId);
  21.     ydata1.push(item.parkArea);
  22.   });
  23.   const machart = echarts.init(document.getElementById("echarts8"));
  24.   var defaultShowNum = 10; // 默认显示的数据条数
  25.  
  26.   var start = 0;
  27.   var end = Math.min(defaultShowNum, xdata.length) / xdata.length * 100;
  28.   var option = {
  29.     tooltip: {
  30.       trigger: "axis",
  31.       formatter: '{c}', // 修改为只显示名称和数值
  32.  
  33.       backgroundColor: 'rgba(255,255,255,0.8)', // 气泡框背景颜色
  34.       textStyle: {
  35.         color: '#333', // 文字颜色
  36.         fontSize: 14 // 文字大小
  37.       },
  38.       position: function (pos, params, el, elRect, size) {
  39.         return { left: pos[0], top: pos[1] };
  40.       }, // 设置气泡框的位置在鼠标悬浮的地方
  41.       padding: [10, 10, 10, 10], // 设置气泡框的内边距
  42.       extraCssText: 'width: auto; height: auto; text-align: center; line-height: 30px;', // 设置气泡框的宽度、高度、文本居中显示
  43.  
  44.     },
  45.     dataZoom: [
  46.       {
  47.         type: 'slider', // 缩放条类型为滑动条
  48.         show: true, // 显示缩放条
  49.         start: start, // 根据数据计算的开始位置
  50.         end: end, // 根据数据计算的结束位置
  51.         bottom: 10, // 距离底部的距离
  52.         height: 5, // 设置高度
  53.       },
  54.       {
  55.         type: 'inside', // 内置缩放条
  56.         start: start,
  57.         end: end,
  58.       },
  59.     ],
  60.     calculable: true,
  61.     // legend: {
  62.     //   // data: ["xxx"],
  63.     //   left: "left",s
  64.     //   x: "left",
  65.     //   top: "0%",
  66.     //   left: "2%",
  67.     //   icon: "roundRect",
  68.     //   itemWidth: 10, // 设置宽度
  69.     //   itemHeight: 10, // 设置高度
  70.     // },
  71.     color: ["#579AFF", "#B1B1F0", "#F7BEBE", '#BDF6E6'],
  72.     grid: {
  73.       top: "8%",
  74.       bottom: "8%",
  75.       left: "1%",
  76.       right: "1%",
  77.       containLabel: true,
  78.     },
  79.     xAxis: [
  80.       {
  81.         type: "category",
  82.         data: xdata,
  83.         axisTick: {
  84.           show: false, // 不显示刻度
  85.         },
  86.  
  87.       },
  88.     ],
  89.     yAxis: [
  90.       {
  91.         type: "value",
  92.  
  93.       },
  94.     ],
  95.  
  96.     series: [
  97.       {
  98.         // name: "城市占比",
  99.         type: "bar",
  100.         data: ydata1,
  101.         barWidth: "35%",
  102.         itemStyle: {
  103.           color: function (params) {
  104.             // 判断是否为最上面的三个柱子，分别设置为红色、橘色、黄色
  105.             if (params.dataIndex <= 2) {
  106.               return params.dataIndex === 0 ? '#E96163' : params.dataIndex === 1 ? '#FEA935' : '#F0DC5A';
  107.             } else {
  108.               return '#D9D9D9'; // 设置其他柱子的颜色
  109.             }
  110.           }
  111.         },
  112.       },
  113.  
  114.     ],
  115.   };
  116.   machart.setOption(option);
  117.   setTimeout(() => {
  118.     window.addEventListener("resize", resizeFn);
  119.   }, 100);
  120.   const resizeFn = () => {
  121.     return machart.resize();
  122.   };
  123.   machart.on("click", (params) => {
  124.     if (params.componentType === "series") {
  125.       const dataIndex = params.dataIndex;
  126.       const yValue = xdata[dataIndex]; // 获取对应柱子的y值
  127.       const cidtyid = xdataid[dataIndex]; // 获取对应柱子的y值
  128.       emit("changedi", yValue, cidtyid);
  129.  
  130.       // 在这里你可以对获取到的y值进行其他操作，比如弹窗显示等
  131.     }
  132.   });
  133. };
  134. setTimeout(() => {
  135.   initChart();
  136. }, 800);
  137. defineExpose({
  138.   initChart,
  139. });
  140. onBeforeUnmount(() => {
  141.   // 离开页面必须进行移除，否则会造成内存泄漏，导致卡顿
  142.   window.removeEventListener("resize", initChart);
  143. });
  144. </script>
  145.  
  146. <style scoped>
  147. #echarts8 {
  148.   width: 100%;
  149.   height: 95%;
  150.   /* height:    calc(30vh- 10px); */
  151. }
  152. </style>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/742266
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号