vue3.0 安装使用echarts

1、安装 ， 控制台输入, 默认echarts 5版本

npm i echarts -S     或
npm install echarts --save

2、项目中使用echarts

        引入：
             import * as echarts from 'echarts'

        （1）初始化：
                var myChart = echarts.init(document.querySelector('#main'))   //  #main是放置图表的容器，可自定义，设置容器时一定要设置宽高，不设置会导致图表不显示走入误区。

        （２）定义option，根据自己需求定义，可在echarts官方网站
Apache EChartshttps://echarts.apache.org/zh/index.html        上查找自己需要的实例

                var option＝　｛
                      xAxis: {

                                type: 'category',

                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

                      },

                      yAxis: {

                                type: 'value'

                      },

                      series: [

                                {

                                      data: [150, 200, 210, 218, 135, 147, 245],

                                      type: 'line'

                                    }

                        ］

                 ｝

        （3）设置数据

                myChart.setOption(option)

        即可看到自己设置的图表

实例：

<template>

    <div id="main" style="width: 500px;height: 500px">

    </div>

</template>

<script>

    import {defineComponent, reactive, onMounted} from 'vue'

    import * as echarts from 'echarts'

    export default defineComponent({

        setup () {

            const state = reactive({

                option: {

                    xAxis: {

                        type: 'category',

                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

                    },

                    yAxis: {

                        type: 'value'

                    },

                    series: [

                        {

                            data: [150, 230, 224, 218, 135, 147, 260],

                            type: 'line'

                        }

                    ]

                }

            })

            onMounted (() => {

                const myChart = echarts.init(document.querySelector('#main'))

                myChart.setOption(state.option)

            })

            return {

                state

            }

        }

    })

</script>