vue + echart 饼形图
图表配置：
import { EChartsOption, graphic } from 'echarts'
import rightCircle from '@/assets/imgs/index/right_circle.png'
export const pieOption: EChartsOption = {title: {text: '100%',subtext: '游客加量',left: '19%',top: '42%',textStyle: {fontSize: 24,color: '#fff',align: 'center',fontWeight: 700},subtextStyle: {fontSize: 16,color: '#fff',align: 'center',fontWeight: 500}},tooltip: {trigger: 'item'},legend: {orient: 'vertical',top: '30%',left: '60%', // left给成right，直接会出现在图表右侧，但是图例的色块也会出现在文字的右侧textStyle: {//图例中文字的样式color: "#ffffff",fontSize: 14,fontWeight: 500,lineHeight: 20},itemWidth: 12, // 设置图例颜色块的宽度itemHeight: 12, // 设置图例颜色块的高度itemStyle: {borderRadius: 2},formatter: function (name) { // 设置图例展示方式let targetlet sum = 0let durationArray = pieOption.series[0].datafor (let i = 0; i < durationArray.length; i++) {sum += durationArray[i].valueif (durationArray[i].name == name) {target = durationArray[i].value}}let params = `${name} ${((target / sum) * 100).toFixed(2) + '%'}`let tmp = params.split('\n')let res = '' + paramsfor (let i in tmp) {res = res.replace(tmp[i], ' ')}console.log('sdsd', res+params)return res + params + '\n' + target + '人次'}},graphic: [ // 设置图表外层背景{type: 'image',left: '3%',top: '16%',z: -10,bounding: 'raw',rotation: 0, //旋转// origin: [510, 100], //中心点scale: [1.1, 1.1], //缩放style: {// 背景图image: rightCircle,opacity: 1}}],series: [{left: '-45%',type: 'pie',radius: ['50%', '40%'],avoidLabelOverlap: false,padAngle: 5,itemStyle: {borderRadius: 10},label: {show: false,position: 'center'},labelLine: {show: false},data: [{ value: 1048, name: '国内游客' },{ value: 735, name: '国外游客' },{ value: 580, name: '港澳台游客' }]}]
}