echarts 的使用

<template>

// option 通过id行绑定

    <div id="myRangChart" style="width: 100%;height:300px;">

    </div>

</template>

<script setup>

// option 引入全部

import * as echarts from "echarts"

import { onMounted, ref, watch } from "vue"

//地图json文件

//高德DataV.GeoAtlas地理小工具系列 (aliyun.com)下载

//引入地图文件

import china from '../components/ditu.json'

 

// 默认加载

onMounted(() => {

 //高版本 echarts 使用地图需要引入

  echarts.registerMap('china', china);

 

    setTimeout(() => {

//一秒后加载

        initRang()

    }, 1000)

})

 

const initRang = () => {

// 绑定id

    let myRangChart = echarts.init(document.getElementById("myRangChart"));

    myRangChart.setOption({

   // option中的值;

    })

    window.onresize = function () { // 自适应大小

        myRangChart.resize();

    };

}

 

</script>

<style lang="scss" scoped>

 

</style>