echart的使用

合集 - vue3基础知识(11)

1.vue3（一）2024-01-012.vue3（二）2024-01-023.vue3（三）2024-01-054.VUE3（四）事件及数据传递2024-01-065.vue3（五）父子组件通信2024-01-086.vue建项目要做的事（总结）2024-01-297.深度选择器2024-02-138.二次封装axios2024-03-279.vue-cli + mock2024-03-31

10.echart的使用2024-04-19

11.防抖2024-04-20

收起

npm install echarts

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'
import 'echarts-liquidfill'
 
const people = ref('21211人')
const echartLiquid = ref()
 
onMounted(()=>{
    const myCharts = echarts.init(echartLiquid.value) //  获取echart的实例
    myCharts.setOption({
        title: { text: '水球图' },
        xAxis: {},
        yAxis: {},
        series: {
            type: 'bar',
            data: [10, 20, 30, 40]
        }
    })
})
</script>