vue3+ts使用Echarts的實(shí)例詳解

更新時(shí)間：2023年03月27日 09:09:36 作者：南無、

這篇文章主要介紹了vue3+ts使用Echarts的實(shí)例詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

安裝

npm install echarts --save

引入

import * as echarts from 'echarts';

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

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

內(nèi)容格式器formatter

使用tips

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

舉例

<template>
    <div>
        <div ref="barChart" :style="{ width: '400px', height: '300px' }"></div>
        <div ref="pieChart" :style="{width:'500px',height:'300px'}"></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}(vvxyksv9kd%)'
        },
        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}(vvxyksv9kd%)'
                }
            }
        ]
    })
}
onMounted(() => {
    initBarEcharts();
    initPieEcharts()
});
</script>

界面展示