vue3 ts 引入echarts

1. 在main.ts中引入

import * as echarts from 'echarts'

 const app = createApp(App);

app.config.globalProperties.$echarts = echarts

2.vue界面代码

<template>
    <main>
        <Back />
        <el-row justify="center" style="background:none;">
            <el-col>
                <h3>echarts测试</h3>
            </el-col>
        </el-row>
        <div id='showEcharts' style='width:400px; height:400px'></div>
    </main>
</template>
   
<script lang="ts">
import { ref, onMounted, defineComponent } from "vue";
import * as echarts from 'echarts';
onMounted(
    () => {
        init()
    }
)
export default defineComponent({
    title: "echarts测试",
    //   name:
    path: '/doctor/echarts',
    data() {
        return {
            name: ['一', '二', '三', '四', '五', '六', '七'],
            val: [150, 230, 224, 218, 135, 147, 260],
        }
    },
    methods: {
        showorders() {
            // 基于准备好的dom，初始化echarts实例
            var chartDom = document.getElementById('showEcharts');
            var myChart = echarts.init(chartDom);
            myChart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                //   # x轴
                xAxis: {
                    type: 'category',
                    data: this.name
                },
                axisTick: {
                    alignWithLabel: true
                },
                //   # y 轴
                yAxis: {
                    type: 'value'
                },
                //   # 类型
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: this.val
                    }
                ]

            })
            // 指定图表的配置项和数据
            //   var option;

            //   option = {
            //     //   # x轴
            //       xAxis: {
            //           type: 'category',
            //           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            //       },
            //     //   # y 轴
            //       yAxis: {
            //           type: 'value'
            //       },
            //     //   # 类型
            //       series: [
            //           {
            //           data:[150, 230, 224, 218, 135, 147, 260],
            //           type: 'bar'
            //           }
            //       ]
            //   };
            //   option && myChart.setOption(option);
        },

    },
    mounted() {
        this.showorders()
    },

})
</script>
   
<style>

</style>

这是个简单的柱状图。 defineComponent可以删除，并不影响功能。