前言

今天雞米花給大家帶來的是在uni里面使用echarts，能夠完美支持和PC端一樣的效果，我這邊的工程是uni轉為微信小程序，用的是vue3+vite來寫的，然后實現了豎屏和橫屏的展示方式，好了獻上效果圖。

---

效果圖

---

一、引入插件

這里我們需要去到插件市場下載支持echarts的插件，附上鏈接。注意：由于微信小程序對主包大小有限制，所以可以去到echarts中的在線定制，按照您的需要去下載定制。以下是我項目中的目錄，其中echarts.min.js就是我們在線定制的echarts資源。

---

二、引入組件

以下是我項目中的引入方式，大家可以作為參考：

<template><div class="eChartsCom"><l-echart@finished="init"ref="chart":custom-style="{height: '100vh',width: '100vw',}"></l-echart></div>
</template><script>
// 這里是下載的echarts.min.js
import * as echarts from "@/components/lime-echart/static/echarts.min";
// 這里是您下載的插件地址
import LEchart from "@/components/lime-echart/components/l-echart/l-echart.vue";export default {components: {LEchart,},data() {return {eChartsOption: {},};},mounted() {// 這里是您的echarts的option，我這里是做了一個通用的組件，將配置放到全局，使用的時候直接跳轉路由this.eChartsOption = this.$store.state.eChartsOption;this.$refs.chart.init(echarts, (chart) => {chart.setOption(this.eChartsOption);});},methods: {async init() {const chart = await this.$refs.chart.init(echarts);chart.setOption(this.eChartsOption);},},
};
</script>

由于以上組件是針對橫向圖表的一個全屏展示，所以需要在pages.json中配置一下橫屏顯示的代碼，關鍵屬性為"pageOrientation": "landscape"

{"path": "componentPages/eChartsCom/index","style": {"navigationBarTitleText": "圖表詳情","pageOrientation": "landscape"}
}

---

三、完整代碼

以下為完整代碼，大家可以做一個參考

<template><div class="eChartLine"><l-echart @finished="init" ref="chart"></l-echart></div>
</template>
<script>
import * as echarts from "@/components/lime-echart/static/echarts.min";
import LEchart from "@/components/lime-echart/components/l-echart/l-echart.vue";
export default {components: {LEchart,},data() {return {chartData: null,show: false,isArea: true,isPopupArea: true,};},mounted() {this.initChart();},methods: {async init() {const chart = await this.$refs.chart.init(echarts);chart.setOption(this.eChartsOption);},initChart() {let data = [];for (let index = 0; index < 10; index++) {let value = indexlet obj = {value,name: "數據"+index,};data.push(obj);}this.eChartsOption = {title: {text: `數量統計圖`,top: 50,left: "center",},tooltip: {trigger: "item",},legend: {top: 80,left: "center",},series: [{name: "數量",type: "pie",radius: ["40%", "70%"],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: "#fff",borderWidth: 2,},label: {show: false,position: "center",},emphasis: {label: {show: true,fontSize: 40,fontWeight: "bold",},},labelLine: {show: false,},data,},],};this.$refs.chart.init(echarts, (chart) => {chart.setOption(this.eChartsOption);});},},
}
</script>

---

結語

以上就是雞米花分享的全部內容啦，如果在使用中有任何問題，歡迎在評論區交流溝通！