国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue3+ts打開echarts的正確方式

這篇具有很好參考價(jià)值的文章主要介紹了vue3+ts打開echarts的正確方式。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

實(shí)例項(xiàng)目使用 vite5 + vue3 + ts,項(xiàng)目地址 vite-vue3-charts,預(yù)覽地址 https://weizwz.com/vite-vue3-charts

準(zhǔn)備工作

1. 注冊為百度地圖開發(fā)者

第1步和第2步是為了在echarts里使用百度地圖,如果你不想使用,或者使用高德地圖,可忽略
官網(wǎng)地址,然后在 應(yīng)用管理 -> 我的應(yīng)用 里,創(chuàng)建應(yīng)用,創(chuàng)建好后復(fù)制 AK
vue3+ts打開echarts的正確方式

2. 在根目錄的 index.html 里引入百度地圖

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>xxx</title>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你復(fù)制好的AK"></script>
</head>

head 里引入,是為了提前加載進(jìn)來

3. 安裝 echarts

npm i echarts -S

封裝

1. 增加ts對百度地圖的支持

修改 .eslintrc.cjs,加入對百度地圖的支持

module.exports = {
  // 其他省略
  globals: {
    BMap: true
  }
}

2. 全局注冊 echarts

修改 main.ts

// 引入 echarts
import * as echarts from 'echarts'
import themeJSON from '@/assets/weizwz.json'
echarts.registerTheme('weizwz', themeJSON)

const app = createApp(App)
// 全局掛載 echarts
app.config.globalProperties.$echarts = echarts

3. 封裝 echarts

src/components 下新建 chart 文件夾,并在其下新建 index.vue,封裝如下

<script setup lang="ts">
import { onMounted, getCurrentInstance, defineExpose, ref } from 'vue'

defineOptions({
  name: 'WChart'
})
// defineExpose 讓父組件可調(diào)用此方法
defineExpose({
  setData
})

// 組件傳參
const props = defineProps({
  width: {
    type: String, //參數(shù)類型
    default: '100%', //默認(rèn)值
    required: false //是否必須傳遞
  },
  height: {
    type: String,
    default: '10rem',
    required: true
  },
  option: {
    type: Object,
    default: () => {
      return {}
    },
    required: true
  },
  // 初始化之前的工作,比如加載百度地圖相關(guān)數(shù)據(jù)
  initBefore: {
    type: Function,
    required: false
  },
  // 初始化之后的工作,比如添加百度地址控件
  initAfter: {
    type: Function,
    required: false
  }
})

let chart: { setOption: (arg0: Record<string, any>) => void; resize: () => void }
const wchart = ref(null)

//聲明周期函數(shù),自動(dòng)執(zhí)行初始化
onMounted(() => {
  init()
  // 監(jiān)控窗口大小,自動(dòng)適應(yīng)界面
  window.addEventListener('resize', resize, false)
})

//初始化函數(shù)
function init() {
  // 基于準(zhǔn)備好的dom,初始化echarts實(shí)例
  const dom = wchart.value
  // 通過 internalInstance.appContext.config.globalProperties 獲取全局屬性或方法
  let internalInstance = getCurrentInstance()
  let echarts = internalInstance?.appContext.config.globalProperties.$echarts

  chart = echarts.init(dom, 'weizwz')
  // 渲染圖表
  if (props.initBefore) {
    props.initBefore(chart).then((data: Record<string, any>) => {
      setData(data)
      if (props.initAfter) props.initAfter(chart)
    })
  } else {
    chart.setOption(props.option)
    if (props.initAfter) props.initAfter(chart)
  }
}

function resize() {
  chart.resize()
}
// 父組件可調(diào)用,設(shè)置動(dòng)態(tài)數(shù)據(jù)
function setData(option: Record<string, any>) {
  chart.setOption(option)
}
</script>

<template>
  <div ref="wchart" :style="`width: ${props.width} ; height: ${props.height}`" />
</template>

<style lang="scss" scoped></style>

使用

1. 使用 echarts 普通圖表

示例:使用玫瑰環(huán)形圖

<script setup lang="ts">
import WChart from '@comp/chart/index.vue'

defineOptions({
  name: 'ChartLoop'
})
// 正常 echarts 參數(shù)
const option = {
  grid: {
    top: '20',
    left: '10',
    right: '10',
    bottom: '20',
    containLabel: true
  },
  series: [
    {
      name: '人口統(tǒng)計(jì)',
      type: 'pie',
      radius: [50, 120],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      label: {
        formatter: '\n{c} 萬人'
      },
      data: [
        { value: 2189.31, name: '北京' },
        { value: 1299.59, name: '西安' },
        { value: 1004.79, name: '長沙' }
      ]
    }
  ]
}
</script>

<template>
  <WChart width="100%" height="300px" :option="option" />
</template>

<style lang="scss" scoped></style>

vue3+ts打開echarts的正確方式

2. 結(jié)合百度地圖

示例:西安熱力圖

<script setup lang="ts">
import { reactive } from 'vue'
import WChart from '@comp/chart/index.vue'
// 注意需要引入 bmap,即 echarts 對百度地圖的支持?jǐn)U展
import 'echarts/extension/bmap/bmap'
// 熱力數(shù)據(jù),內(nèi)容如:{ features: [ { geometry: { coordinates: [ [ [x, y] ] ] } } ]}
// 為什么這么復(fù)雜,因?yàn)槭俏覐陌⒗锏乩頂?shù)據(jù)下載的,地址 https://datav.aliyun.com/portal/school/atlas/area_selector
import xianJson from '@/assets/xian.json'

defineOptions({
  name: 'ChartMap'
})

const option = {
  animation: false,
  backgroundColor: 'transparent',
  bmap: {
    // 地圖中心點(diǎn)
    center: [108.93957150268, 34.21690396762],
    zoom: 12,
    roam: true
  },
  visualMap: {
    show: false,
    top: 'top',
    min: 0,
    max: 5,
    seriesIndex: 0,
    calculable: true,
    inRange: {
      color: ['blue', 'blue', 'green', 'yellow', 'red']
    }
  },
  series: [
    {
      type: 'heatmap',
      coordinateSystem: 'bmap',
      data: reactive([] as any[]),
      pointSize: 5,
      blurSize: 6
    }
  ]
}

const initBefore = () => {
  return new Promise((resolve) => {
    // 處理數(shù)據(jù)
    const arr = []
    for (const item of xianJson.features) {
      const positions = item.geometry.coordinates[0][0]
      for (const temp of positions) {
        const position = temp.concat(Math.random() * 1000 + 200)
        arr.push(position)
      }
    }
    option.series[0].data = arr
    resolve(option)
  })
}

const initAfter = (chart: {
  getModel: () => {
    (): any
    new (): any
    getComponent: { (arg0: string): { (): any; new (): any; getBMap: { (): any; new (): any } }; new (): any }
  }
}) => {
  // 添加百度地圖插件
  var bmap = chart.getModel().getComponent('bmap').getBMap()
  // 百度地圖樣式,需要自己去創(chuàng)建
  bmap.setMapStyleV2({
    styleId: 'bc05830a75e51be40a38ffc9220613bb'
  })
  // bmap.addControl(new BMap.MapTypeControl())
}
</script>

<template>
  <WChart width="100%" height="500px" :option="option" :initBefore="initBefore" :initAfter="initAfter" />
</template>

<style lang="scss" scoped></style>

vue3+ts打開echarts的正確方式文章來源地址http://www.zghlxwxcb.cn/news/detail-760578.html

到了這里,關(guān)于vue3+ts打開echarts的正確方式的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 項(xiàng)目

    使用 Vite + Vue3 + Element-Plus + Pinia + Ts 搭建 Vue3 項(xiàng)目

    Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依賴更高的 Node 版本才能正常運(yùn)行,當(dāng)你的包管理器發(fā)出警告時(shí),請注意升級(jí)你的 Node 版本。 首先 npm 輸入: Project name :項(xiàng)目名稱 Select a framework :選擇一個(gè)框架 Select a variant :選擇 ts 或者 js 輸入項(xiàng)目名稱后選擇 vue 選擇

    2024年02月09日
    瀏覽(27)
  • Vue3項(xiàng)目中使用ECharts圖表并實(shí)現(xiàn)自適應(yīng)效果

    Vue3項(xiàng)目中使用ECharts圖表并實(shí)現(xiàn)自適應(yīng)效果

    在項(xiàng)目中輸入如下代碼: 安裝完成可以在package.json中看到: 創(chuàng)建ECharts圖表的文件barCharts.vue,將它引入并在父組件中使用。在使用setup時(shí),我們把組件直接引入進(jìn)來,就可以直接使用了,不用像Vue2那樣需要注冊了。 在父組件中創(chuàng)建一個(gè)有寬高的容器,里面放ECharts組件,ECh

    2024年02月03日
    瀏覽(32)
  • 在vue3+ts項(xiàng)目里使用query和params傳參

    在vue3+ts項(xiàng)目里使用query和params傳參

    一 query 傳參 (類似get請求) query 傳參方式① 傳遞方組件 home.vue 看下 router/index.ts 文件 有兩個(gè)注意點(diǎn) ① ref定義響應(yīng)式基本類型數(shù)據(jù)后,修改和賦值要帶上 .value ② query是一個(gè)對象類型 所以我們定義的基本類型數(shù)據(jù)不能直接賦值 要給對象式寫法 {} 像以下兩種寫法都是報(bào)錯(cuò)的

    2024年01月17日
    瀏覽(20)
  • uniapp導(dǎo)入echarts類庫 開發(fā)圖表類小程序vue3+ts+vite

    uniapp導(dǎo)入echarts類庫 開發(fā)圖表類小程序vue3+ts+vite

    微信小程序和抖音小程序等都支持: 使用步驟如下 第一步:下載插件包 下載echarts插件包,并導(dǎo)入到項(xiàng)目中,然后使用插件中的組件創(chuàng)建容器,并導(dǎo)入數(shù)據(jù)就可以了。 echarts插件包地址:echarts - DCloud 插件市場 如果你是使用hbuilder寫的,可以直接導(dǎo)入,如果你是vscode寫的,就

    2024年01月21日
    瀏覽(37)
  • vite+vue3+ts搭建項(xiàng)目八(打包性能優(yōu)化三:使用CDN)

    vite+vue3+ts搭建項(xiàng)目八(打包性能優(yōu)化三:使用CDN)

    使用vite-plugin-cdn-import 下載npm包 官方github:https://github.com/MMF-FE/vite-plugin-cdn-import 開發(fā)環(huán)境使用本地的npm包,cdn是打包時(shí)候才生效 在vite.config.ts中通過importToCDN引入 注意事項(xiàng) :網(wǎng)上很多教程,還需要在 build 的 rollupOptions 添加對應(yīng)的 external ,如上注釋所示,其實(shí)是不需要的,

    2024年02月02日
    瀏覽(98)
  • Vue3項(xiàng)目(Vite+TS)使用Web Serial Api全記錄

    Vue3項(xiàng)目(Vite+TS)使用Web Serial Api全記錄

    之前寫了一個(gè)vue+django的一個(gè)通過串口控制的上位機(jī)系統(tǒng)。但是實(shí)際生產(chǎn)中,不如部署到服務(wù)器上,這樣可以更好的節(jié)約成本。但是這樣就需要弄一個(gè)客戶端來控制處理串口信息。那我就在想能不能通過網(wǎng)頁直接拿到客戶端的串口信息。所以問了萬能的chatgpt,得到了以下答案

    2024年02月02日
    瀏覽(30)
  • 使用VS Code創(chuàng)建編寫uniapp項(xiàng)目(vue3+ts 微信小程序)

    使用VS Code創(chuàng)建編寫uniapp項(xiàng)目(vue3+ts 微信小程序)

    uni-create-view :用于快速創(chuàng)建 uni-app 頁面 uni-helper uni-app :代碼提示 uniapp 小程序擴(kuò)展 :鼠標(biāo)懸停查文檔 1.在types屬性中添加屬性名?@types/wechat-miniprogram 和 ?@uni-helper/uni-app-types. 2.添加vueCompilerOptions選項(xiàng) ①在VS Code中找到設(shè)置 ②在設(shè)置中搜索文件關(guān)聯(lián) ③添加這兩個(gè)文件名,值為

    2024年04月27日
    瀏覽(103)
  • 使用vue3 + TS + Pinia + Vant4 + vite搭建商城H5項(xiàng)目框架

    使用vue3 + TS + Pinia + Vant4 + vite搭建商城H5項(xiàng)目框架

    本文主要將如何利用搭建一個(gè)初始化的商城H5項(xiàng)目框架。初始化階段使用的技術(shù)棧有:vue3.2、vue-router、?TS 、 Pinia 、 Vant4、Less、vite ????????????????????????node -v 檢測是否有安裝node.js,未安裝請先去官網(wǎng)安裝node.js ? ? ? ? 終端輸入:?npm?init vite ????????自定

    2024年02月12日
    瀏覽(96)
  • 基于Vue3 + ts + echarts(版本5.X)實(shí)現(xiàn)中國地圖下鉆、地圖打點(diǎn)、地圖熱力圖功能

    基于Vue3 + ts + echarts(版本5.X)實(shí)現(xiàn)中國地圖下鉆、地圖打點(diǎn)、地圖熱力圖功能

    寫在前面: 實(shí)現(xiàn)效果圖 ? 1.比較重要的部分用 紅字 標(biāo)出 ?2.安裝echats:? ? ? ? ?3.由于echarts5版本的已經(jīng)沒有自帶地圖數(shù)據(jù)了,所以地圖數(shù)據(jù)需要到專門的GEO數(shù)據(jù)網(wǎng)站中下載。這里提供一個(gè)阿里的下載地址:DataV.GeoAtlas地理小工具系列?對于這個(gè)工具網(wǎng)站,有一個(gè)重點(diǎn)需要說一

    2024年02月09日
    瀏覽(20)
  • 使用模板創(chuàng)建【vite+vue3+ts】項(xiàng)目出現(xiàn) “找不到模塊‘vue‘或其相應(yīng)的類型聲明” 的解決方案

    使用模板創(chuàng)建【vite+vue3+ts】項(xiàng)目出現(xiàn) “找不到模塊‘vue‘或其相應(yīng)的類型聲明” 的解決方案

    項(xiàng)目前臺(tái)需要使用Vue3+Ts來寫一個(gè)H5應(yīng)用,然后我用模板創(chuàng)建 創(chuàng)建完后進(jìn)入 HelloWorld.vue ,兩眼一黑 然后在 tsconfig.json 的 \\\"compilerOptions\\\" 中添加 修改 \\\"moduleResolution\\\" 值為 \\\"node\\\"

    2024年02月17日
    瀏覽(26)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包