Vue使用echarts

1、安装echarts包

npm install echarts

2、引用包

import * as echarts from 'echarts'

3、初始化饼图

export function initPieChart(dom,data){
    const pieChartObj = echarts.init(dom)
    pieChartObj.setOption({
        //设置图例
        legend:{
            orient:'vertical',//图例垂直显示
            top:'8%',
            right:'10%',
            textStyle:{
                color:'#333'
            },
            formatter:(v)=>{ //图例显示名称及占比
                let total = 0
                data.forEach(a=>{total += a.value})
                const c = data.find(s=>{return s.name === v})
                return `${v}(${((c.value/total)*100).toFixed(2)}%)`  
            }
        },
        tooltip:{
            triggle:'item'
        },
        series:[
            {
                type:'pie',
                raidus:['40%','65%'], //饼图大小
                center:['30%','40%'], //显示位置
                label:{
                    show:false,
                    position:'center'
                },
                emphasis:{
                    label:{
                        show:true,
                        fontSize:'16',
                        fontWeight:'bold'
                    }
                },
                labelLine:{
                    show:false
                },
                data:data
            }
        ]
    })
    return pieChartObj
}

4、引用

<template>
    <div id="pieChart" ref="pieChart"></div>
</template>

...

import {initPieChart} from './index.js

const dom = this.$refs.pieChart
if(!dom) return

let data = [{name:'arcgis',value:23},{name:'supermap',value:123},{name:'天地图',value:233}]

initPieChart(dom,data)

效果图