Vue3 中使用 Echarts

安装 echarts 最新版
npm install -S echarts

使用方式一

<template>
    <div id='main' style='width: 100%; height: 400px'> </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue'
    import * as echarts from 'echarts'
    
    onMounted(() => { init() })
    
    function init() {
        // 基于准备好的 dom, 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'))
        var option = {
            title: {
                text: 'ECharging Chart'
            },
            tooltip: {},
            legend: { data: ['voltage', 'current', 'energy'] },
            xAxis: {
                type: 'category',
                data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',  '10:00', '11:00', '12:00', '13:00', '14:00','15:00', '16:00', '17:00',  '18:00',  '19:00', '20:00', '21:00', '22:00',  '23:00', '24:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'voltage',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                },
                {
                    name: 'current',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                },
                {
                    name: 'enerty',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                }
                
            ]
        }
    }
    
    myChart.setOption(option)
    
</script>

使用方式二（推荐使用）

<template>
    <div ref="main" style="width: 100%; height: 400px;" ></div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue'
// 按需引入 echarts
import * as echarts from 'echarts'
const main = ref()

onMounted(() => { init() })

function init() {
    var myChart = echarts.init(main.value)
    var option = {
            title: {
                text: 'ECharging Chart'
            },
            tooltip: {},
            legend: { data: ['voltage', 'current', 'energy'] },
            xAxis: {
                type: 'category',
                data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00',  '10:00', '11:00', '12:00', '13:00', '14:00','15:00', '16:00', '17:00',  '18:00',  '19:00', '20:00', '21:00', '22:00',  '23:00', '24:00']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: 'voltage',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                },
                {
                    name: 'current',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                },
                {
                    name: 'enerty',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, ...]
                }
                
            ]
        }
        
        myCgart.setOption(option)
    
}
</script>

异步组件的数据加载

import { getMapDataApi } from '/@/api'

const [err, data: mapData ] = await getMapDataApi()

function init() {
    series: [
        data: mapData
    ]
}

echarts 时自适应失效问题

一般自适应失效，分两种情况， 一种是当前页面有多个 echarts， resize 失效， 将一下代码替换成下面的代码即可

    myCharts.setOption(option)
    window.onresize = myCharts.resize

替换成

    myCharts.setOption(option)
    window.addEventListener('resizee', () => { myCharts.resize() })

而是引用了 echarts 组件， 循环展示了多个 echarts 实例， 子组件中的 window.onresize 只获取到最后一个 echarts

<EchartList :id ='"myEchart_"+index' :key='index' :list='list' ref='echartsName'></EchartList>
//vue页面  在mounted()里写
window.addEventListener('resize',()=>{
     if(this.$refs && this.$refs.echartsName != undefined){
         this.$refs.echartsName.map(v =>{
             v.charts.resize();
         })
     }
 })