vue3 uni app端使用uCharts

uni-modules引入组件方法

在插件市场找到组件,直接引入项目

秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

引入后在uni-modules的目录如下

在页面使用时

 

<div id="app">
		    <!-- 必须要有父元素包裹 -->
		    <div class="charts-box">
		      <qiun-data-charts
		        type="line"
		        :opts="opts"
		        :chartData="chartData"
		      />
		    </div>
		  </div>

此处组件名称要和引入的组件名称保持一致

<script setup lang="ts">

	 import { onShow , onLoad } from "@dcloudio/uni-app"


	onShow(() => {

 getServerData();
	})


const chartData = ref({});
const opts = ref({
          color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [15,15,0,5],
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 30,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        });

// onMounted(() => {
//     getServerData();
// })

function getServerData() {
  //模拟从服务器获取数据时的延时
  setTimeout(() => {
    //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    let res = {
        categories: ["2016","2017","2018","2019","2020","2021"],
        series: [
          {
            name: "目标值",
            data: [35,36,31,33,13,34]
          },
          {
            name: "完成量",
            data: [18,27,21,24,6,28]
          }
        ]
      };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
}

</script> 
<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  border:1px solid red;
}
.charts-box{
  width: 50%;
  min-width: 375px !important;
  height: 400rpx;
  margin-left: auto;
  margin-right: auto;
    border:1px solid blue;
}

<style>