|
|
@@ -0,0 +1,179 @@
|
|
|
+<template>
|
|
|
+ <div class="chart-main" ref="ref_main">
|
|
|
+ <div class="value">
|
|
|
+ <div>1</div>
|
|
|
+ <div>2</div>
|
|
|
+ <div>3</div>
|
|
|
+ <div>4</div>
|
|
|
+ <div>5</div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-ref" ref="ref_chart"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ computed,
|
|
|
+ onMounted,
|
|
|
+ ref,
|
|
|
+ reactive,
|
|
|
+ watch,
|
|
|
+ getCurrentInstance,
|
|
|
+ ComponentInternalInstance,
|
|
|
+ toRefs,
|
|
|
+ nextTick, onUnmounted
|
|
|
+} from 'vue'
|
|
|
+import {useStore} from 'vuex'
|
|
|
+import {useRouter, useRoute} from 'vue-router'
|
|
|
+import * as echarts from 'echarts';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: '',
|
|
|
+ components: {},
|
|
|
+ props: {
|
|
|
+ data: {
|
|
|
+ required: true,
|
|
|
+ default: () => []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ setup(props, {emit}) {
|
|
|
+ const store = useStore();
|
|
|
+ const router = useRouter();
|
|
|
+ const route = useRoute();
|
|
|
+ const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
+ const state = reactive({
|
|
|
+ resizeObserver: <any>null,
|
|
|
+ chart: <any>null,
|
|
|
+ colors: [
|
|
|
+ ['#5A88EA', '#89AFFF'],
|
|
|
+ ['#4EA5E3', '#6CC1F7'],
|
|
|
+ ['#16B2E3', '#75EAFF'],
|
|
|
+ ['#30C3C2', '#64EDE5'],
|
|
|
+ ['#38C491', '#46FFBD'],
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ const ref_chart = ref();
|
|
|
+ const ref_main = ref();
|
|
|
+ const initChart = () => {
|
|
|
+ const chart = echarts.init(ref_chart.value);
|
|
|
+ const d = props.data.map((v, i) => {
|
|
|
+ v.value = 100 - i * 20
|
|
|
+ v.label = {
|
|
|
+ position: i % 2 === 0 ? 'right' : 'left'
|
|
|
+ }
|
|
|
+ v.itemStyle = {
|
|
|
+ color: new echarts.graphic.LinearGradient(
|
|
|
+ 0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
|
|
|
+ [
|
|
|
+ { offset: 0, color: state.colors[i][0] }, // 渐变色起始颜色
|
|
|
+ { offset: 1, color: state.colors[i][1] } // 渐变色结束颜色
|
|
|
+ ]
|
|
|
+ )
|
|
|
+ }
|
|
|
+ return v
|
|
|
+ })
|
|
|
+ const option = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: 'Funnel',
|
|
|
+ type: 'funnel',
|
|
|
+ top: 10,
|
|
|
+ bottom: 10,
|
|
|
+ width: 142,
|
|
|
+ left: 'center',
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ gap: 3,
|
|
|
+ emphasis: {
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ fontSize: 10,
|
|
|
+ color: 'rgba(52,52,52,0.5)',
|
|
|
+ formatter: (p) => {
|
|
|
+ console.log(p)
|
|
|
+ return `{name|${p.name}} {num|${p.data.num}}`
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 600,
|
|
|
+ color: 'rgba(52,52,52,0.5)',
|
|
|
+ },
|
|
|
+ num: {
|
|
|
+ fontSize: 14,
|
|
|
+ fontFamily: 'YouSheBiaoTiHei',
|
|
|
+ fontWeight: 400,
|
|
|
+ color: '#43AEFE',
|
|
|
+ padding: [0, 0, 2, 4]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 35
|
|
|
+ },
|
|
|
+ data: d
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ chart.setOption(option)
|
|
|
+ state.resizeObserver = new ResizeObserver((entries) => {
|
|
|
+ for (const entry of entries) {
|
|
|
+ chart && chart.resize()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ state.resizeObserver.observe(ref_main.value);
|
|
|
+ return chart
|
|
|
+ }
|
|
|
+ watch(() => props.data, () => {
|
|
|
+ state.chart = initChart()
|
|
|
+ })
|
|
|
+ onMounted(() => {
|
|
|
+ nextTick(() => {
|
|
|
+ state.chart = initChart()
|
|
|
+ })
|
|
|
+ return () => {
|
|
|
+ state.resizeObserver?.unobserve(ref_main?.value)
|
|
|
+ state.resizeObserver?.disconnect()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ ...toRefs(state),
|
|
|
+ ref_chart,
|
|
|
+ ref_main,
|
|
|
+ }
|
|
|
+ },
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.chart-main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .chart-ref {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ height: 100%;
|
|
|
+ padding: 11px 0;
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: repeat(5, 22px);
|
|
|
+ row-gap: 3px;
|
|
|
+ >div {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
CzRger