vue3+ts使用Echarts的方法是什么

本篇內(nèi)容主要講解“vue3+ts使用Echarts的方法是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue3+ts使用Echarts的方法是什么”吧!

安裝

npm install echarts --save

引入

import * as echarts from 'echarts';

（一般項(xiàng)目中大致會(huì)用到三種圖表：柱形圖、折線圖、餅圖。所以本文在舉例說(shuō)明中主要以這三種圖表為例。）

echarts.setOption()配置項(xiàng)常用屬性說(shuō)明（查看完整版：Echarts-Documentation）

內(nèi)容格式器formatter

使用tips

echarts初始化時(shí)，必須給其綁定的元素設(shè)置寬高，否則echarts會(huì)初始化失敗。

舉例

<template>
    <div>
        <div ref="barChart" :></div>
        <div ref="pieChart" :></div>
    </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
const barChart = ref<HTMLElement>(); 
const myChart1 = ref<any>();
// 繪制柱形圖
function initBarEcharts() {
    myChart1.value = echarts.init(barChart.value!);
    myChart1.value.setOption({
        title: {
            text: '學(xué)習(xí)輸出',
            x: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            data: ['輸出量', '輸入量'],
            orient: 'vertical',
            right: 60,
            top: 20
        },
        xAxis: {
            data: ['六月', '七月', '八月', '九月', '十月']
        },
        yAxis: {},
        color: ['#c38bef', '#6dbcf7'],
        series: [
            {
                name: '輸出量',
                type: 'line',
                data: [2, 9, 6, 3, 1],
                smooth: true,
                label: {
                    show: true,
                    position: 'top'
                }
            },
            {
                name: '輸入量',
                type: 'bar',
                data: [9, 18, 12, 9, 6],
                barWidth: '20',
                label: {
                    show: true,
                    position: 'top'
                }
            }
        ]
    });
}
//繪制餅圖
const pieChart = ref<HTMLElement>(); 
const myChart2 = ref<any>();
function initPieEcharts(){
    myChart2.value=echarts.init(pieChart.value!)
    myChart2.value.setOption({
        title:{
            text:'文章分類',
            x:'center'
        },
        tooltip:{
            trigger:'item',
            formatter:':{c}(luspzfc%)'
        },
        legend:{
            type:'scroll',
            orient:'vertical',
            left:0,
            top:30,
            height:150,
            data:['html','css','javascript','typescript','vue2','vue3','react','angular','uniapp','taro','vite','webpack','node','others']
        },
        color:['#61adf2','#56dae8','#efa49e','#7ea1ed','#5ae05a','#f2d2a2','#5881e8','#63d6c0','#edc29f','#5b97d3','#3eceb3','#6a96ed','#426ed1','#65d18b'],
        series:[
            {
                name:'文章分類數(shù)量',
                type:'pie',
                radius:'30%',
                center:['60%','50%'],
                data:[
                    {name:'html',value:10},
                    {name:'css',value:12},
                    {name:'javascript',value:20},
                    {name:'typescript',value:15},
                    {name:'vue2',value:13},
                    {name:'vue3',value:12},
                    {name:'react',value:3},
                    {name:'angular',value:2},
                    {name:'uniapp',value:12},
                    {name:'taro',value:5},
                    {name:'vite',value:2},
                    {name:'webpack',value:3},
                    {name:'node',value:9},
                    {name:'others',value:10},
                ],
                emphasis:{
                    itemStyle:{
                        shadowBlur:10,
                        shadowOffsetX:0,
                        shadowColor:'rgba(0,0,0,0.5)'
                    }
                },
                label:{
                    show:true,
                    position:'outside',
                    formatter:':{c}(swuuwsi%)'
                }
            }
        ]
    })
}
onMounted(() => {
    initBarEcharts();
    initPieEcharts()
});
</script>

界面展示

到此，相信大家對(duì)“vue3+ts使用Echarts的方法是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！