博客

1、安装

npm install echarts --save

2、在main.js中导入

import * as echarts from 'echarts'
const app = createApp(App)
app.config.globalProperties.$echarts = echarts
app.use(store).use(router).use(ElementPlus).mount('#app')

3、在vue页面使用

<div id="myCharts" class="myCharts" ref="myChart"></div>

<script>
    let myChart = this.$echarts.init(
                this.$refs.myChart
            );
            myChart.setOption({
                title: { text: "总用户量" },
                tooltip: {},
                xAxis: {
                    data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
                },
                yAxis: {},
                series: [
                    {
                    name: "用户量",
                    type: "line",
                    data: [5, 20, 36, 10, 10, 20],
                    },
                ],
            });
</script>




mounted () {
        
        setTimeout(this.barEchart,500)
    }

注意:

引入echarts5的方式与之前的版本方式不一样

// echarts5.0以前的版本
import echarts from 'echarts'
 
// echarts5.0
import * as echarts from 'echarts'