1.子组件
<template>
<div :id="id" :style="{ height: '100%', width: '100%' }"></div>
</template>
<script setup lang="ts">
/**
* id
* xAxisList,x轴数据
* seriesDataList,y轴数据
* legend,图例数据
* dateList,标签数据
* 这几个参数必须传
*
*/
import * as echarts from 'echarts'
import { onMounted, defineProps, ref, watch, onBeforeUpdate } from 'vue'
const props = defineProps({
id: {
type: String,
default: 'barChart',
},
xAxisList: {
type: Object,
default: ['浙江1', '北京1', '上海1', '广东1', '深圳1'],
},
seriesDataList: {
type: Object,
default: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' },
],
},
totalData: {
type: String,
default: '99999',
},
position: {
type: String,
default: 'outside',
},
legend: {
type: Object,
default: ['收入', '毛利润', '收入增长率', '利润增长率'],
},
dateList: {
type: Object,
default: [
'2023-01-01',
'2023-01-02',
'2023-01-03',
'2023-01-04',
'2023-01-05',
],
},
units: {
type: String,
default: '',
},
charttype: {
type: String,
default: 'bar',
},
// legend排列方向
orient: {
type: String,
default: 'vertical',
},
// legend位置
top: {
type: String,
default: 'center',
},
// series位置
seriesPosition: {
type: String,
default: '35%',
},
seriesBorderRadius: {
type: Number,
default: 0,
},
seriesBorderWidth: {
type: Number,
default: 0,
}
})
let echart = echarts
watch(
() => [props.seriesDataList, props.xAxisList, props.units],
() => {
//解决警告 There is a chart instance already initialized on the dom.
echart.dispose(document.getElementById(props.id) as HTMLDivElement)
initChart()
},
{ deep: true },
)
const colorArr = [
'#02c7af',
'#62D256',
'#FFC550',
'#FF8853',
'#FF6B8E',
'#BF7E7E',
'#D177CB',
'#9E86DF',
'#6881FF',
'#91A1B1',
'#5EB2E9',
]
// let idElem:any=''
onMounted(() => {
initChart()
})
let Echarts: any = null
let initChart = () => {
if (Echarts) {
Echarts.dispose()
}
Echarts = null
Echarts = echarts.init(document.getElementById(props.id) as HTMLDivElement)
let options: any = {
title: {
show: props.seriesDataList.length > 0 ? false : true,
text: '暂无数据',
textStyle: {
color: '#888888',
},
// subtext: 'Fake Data',
left: 'center',
top: '50%',
},
color: colorArr,
tooltip: {
trigger: 'item',
},
legend: {
top: props.top,
right: '5%',
orient: props.orient,
formatter: (name: string) => {
let data = options.series[0].data
let tarValue
for (let i = 0; i < data.length; i++) {
if (data[i].name === name) {
tarValue = data[i].value
}
}
return name + ':' + tarValue + props.units
},
},
series: [
{
name: '',
type: 'pie',
radius: ['35%', '65%'],
center: [props.seriesPosition, '50%'],
avoidLabelOverlap: true,
itemStyle: {
borderRadius: props.seriesBorderRadius,
borderColor: '#fff',
borderWidth: props.seriesBorderWidth,
},
label: {
show: true,
position: props.position,
formatter: (params: any) => {
if (props.position == 'center') {
let str = props.totalData
return str
} else {
return params.percent + '%'
}
},
},
data: props.seriesDataList,
labelLine: {
show: true,
},
},
],
}
Echarts.setOption(options)
const resizeObserver = new ResizeObserver(entries => {
let elwidth = entries[0].contentRect.width
setTimeout(() => {
Echarts.resize({ width: elwidth, height: 'auto' })
}, 300)
})
let idElem = document.getElementById(props.id) as HTMLDivElement
resizeObserver.observe(idElem)
}
</script>
3.引用
import pieChart from '@/components/pieChart.vue'
<pieChart
id="pieChartIdClass"
:seriesDataList="!!typeDataList ? typeDataList : []"
:units="'(元)'"
>
</pieChart>