Uniapp小程序使用uchart Vue3天气预报折线图

天气预报 uchart

uniapp中使用ucharts实现天气预报折线图 - 博客园

导入插件

插件地址: uCharts官网 - 秋云uCharts跨平台图表库

按照官网使用组件方式, HbuilderX导入 或 手动导入

0. 由于没有安装HbuilderX, 这里手动进行导入

   gitee: uCharts-组件/qiun-data-charts(非uniCloud)

   在gitee按照要求导入对应文件

1. 1、请将static目录下文件复制到根目录的static文件夹下

   2、qiun-title-bar文件夹可删除

   3、其他的都不要动，直接原样复制到您项目中的components目录

测试插件 使用 Vue3 画天气折线图

 <template>
   <view class="charts-box">
     <qiun-data-charts
         type="line"
         :opts="opts"
         :chartData="chartData"
     />
   </view>
 </template>
 ​
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 ​
 const chartData = ref({});
 const opts = ref({
   color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
   padding: [15, 0, 5, 0],
   enableScroll: false,
   legend: {
     show: false // 隐藏折线图例
   },
   xAxis: {
     disabled: true,  // 隐藏x轴
     disableGrid: false,  // 左右两点之间用细线分隔
     axisLine: false // 去除x轴
   },
   yAxis: {
     disabled: true,
     disableGrid: true,
     axisLine: false, // 去除y轴
     data: [{
       format: 'yAxisDemoMix'
     }]
   },
   extra: {
     line: {
       type: "straight",
       width: 2,
       activeType: "hollow"
     }
   }
 });
 ​
 onMounted(() => {
   getServerData();
 });
 ​
 const getServerData = () => {
   setTimeout(() => {
     let res = {
       // categories: ["2018","2019","2020","2021","2022","2023"],
       series: [
         {
           name: "最高温",
           data: [22,23,18,20,23,22,23]
         },
         {
           name: "最低温",
           data: [17,16,14,15,18,17,17]
         }
       ]
     };
     chartData.value = JSON.parse(JSON.stringify(res));
   }, 500);
 };
 </script>
 ​
 <style scoped>
 .charts {
   width: 750rpx;
   height: 500rpx;
 }
 ​
 .chart {
   width: 100%;
   height: 100%;
 }
 </style>

​ 如图可以看到最后一个点跑出页面之外, 无论怎么调整 css 都无法显示

这时可以修改 opts 中的 padding 内边距, 折线图自然显示

最终效果如下: