一、安装echarts

npm install echarts --save

二、在需要的页面引入

import * as echarts from "echarts"

1、模板1：vue2+javascript

<template><div><div class="echart_size" :id="id"></div></div>
</template>
<script>
import * as echarts from 'echarts'
export default {props: {// 接收的参数id: {type: String,default: ''},datas: {type: Array,default: () => []}},data() {return {// 变量}},created() {this.$nextTick(() => {this.barBtn()})},methods: {barBtn() {let myCharts = echarts.init(document.getElementById(this.id))let option = {// 某图表}myCharts.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myCharts.resize()})}}
}
</script>
<style lang="scss" scoped>
.echart_size{width: 500px;height: 500px;
}
</style>

2、模板2：vue3+javascript

<template><div class="echart_size" :id="props.id"></div>
</template><script setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
const props = defineProps({id: {type: String,required: true},datas:{type: Array,required: true}
})let person=reactive({// 初始变量
})onMounted(()=>{GetEchar()
})const GetEchar = () => {const myCharts = ref()nextTick(() => {myCharts.value = echarts.init(document.getElementById(props.id))let option = {// 某图表};myCharts.value.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myCharts.value.resize()})})
}</script><style lang="scss" scoped>
.echart_size {width: 100%;height: 100%;
}
</style>

3、模板3：vue3+typescript

<template><div class="echart_size" :id="props.id"></div>
</template><script lang="ts" setup>
import { reactive, ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'
let person: any = reactive({// 初始变量
})
type Props = {id: string
}
const props = withDefaults(defineProps<Props>(), {})onMounted(()=>{GetEchar()
})
const GetEchar = () => {const myChart = ref<HTMLElement>()const myCharts = ref<any>()nextTick(() => {const chartDom = document.getElementById(props.id)!myCharts.value = echarts.init(chartDom)let option = {};myCharts.value.setOption(option)// 让图表跟随屏幕自动的去适应window.addEventListener('resize', function () {myCharts.value.resize()})})
}</script><style lang="scss" scoped>
.echart_size {width: 500px;height: 500px;
}
</style>

四、页面调用

1、vue2

<template><div><EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" /></div>
</template><script>import EchartModule from '@/components/echartModule'export default {components: {EchartModule},data(){return{data: [{ value: 0, label: '测试1' },{ value: 1, label: '测试2' }]}}}
</script>

2、vue3+js

<template><EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
</template><script setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person=reactive({data:[{ value: 0, label: '测试1' },{ value: 1, label: '测试2' }]
})
</script>

3、vue3+ts

// vue3+ts
<template><EchartModule v-if="data&&data.length>0" :id="'myEchart'" :datas="data" />
</template><script lang="ts" setup>
import { reactive } from 'vue'
import EchartModule from '@/components/echartModule'
let person:any=reactive({data:[{ value: 0, label: '测试1' },{ value: 1, label: '测试2' }]
})
</script>

五、Echarts 相关事件

1、鼠标单击/左键事件

//vue2
myCharts.on('click', function(e) {})// vue3
myCharts.value.on('click', function(e) {})

2、鼠标移入/进入事件

//vue2
myCharts.on('mouseover', function(e) {})// vue3
myCharts.value.on('mouseover', function(e) {})

3、鼠标移出/离开事件

//vue2
myCharts.on('mouseout', function(e) {})// vue3
myCharts.value.on('mouseout', function(e) {})

4、让图表跟随屏幕去自适应

window.addEventListener('resize', function () {// vue2myCharts.resize()// vue3myCharts.value.resize()
})

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~