91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import type { Ref } from 'vue';
|
|
|
|
import echarts from '@/plugins/echarts';
|
|
import { debounceChart, graphicLinearGradient } from '@/utils/chart';
|
|
|
|
let myChart = null;
|
|
|
|
const option = {
|
|
backgroundColor: 'transparent',
|
|
grid: { top: 79, right: 9, left: 34, bottom: '24px' },
|
|
title: {
|
|
text: '最近12个月税收概览',
|
|
subtext: '单位/万元',
|
|
textStyle: { color: '#fff', fontSize: 22, fontWeight: 'lighter' },
|
|
subtextStyle: { color: '#fff', fontSize: 12, fontWeight: 'lighter' },
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { type: 'shadow' },
|
|
formatter: function (params: any): string {
|
|
return `<div>${params[0].seriesName}</div> ${params[0].marker} ${params[0].name} ${params[0].value}万元`;
|
|
},
|
|
},
|
|
legend: { show: false },
|
|
xAxis: {
|
|
type: 'category',
|
|
show: true,
|
|
data: [
|
|
'2021.01',
|
|
'2021.02',
|
|
'2021.03',
|
|
'2021.04',
|
|
'2021.05',
|
|
'2021.06',
|
|
'2021.07',
|
|
'2021.08',
|
|
'2021.09',
|
|
'2021.10',
|
|
'2021.11',
|
|
'2021.12',
|
|
],
|
|
itemStyle: { color: '#ccc' },
|
|
splitLine: { show: false },
|
|
},
|
|
yAxis: {
|
|
show: true,
|
|
type: 'value',
|
|
name: '',
|
|
nameTextStyle: { color: '#fff', padding: [0, 0, 0, 40] },
|
|
splitLine: { show: true, lineStyle: { color: '#333', width: 1, type: 'solid' } },
|
|
},
|
|
series: [
|
|
{
|
|
name: '金额',
|
|
type: 'bar',
|
|
barWidth: 9,
|
|
label: { show: true, position: 'top', color: '#fff', distance: 9 },
|
|
itemStyle: {
|
|
borderRadius: [0, 0, 4, 4],
|
|
color: graphicLinearGradient('#66FFFF', '#66FFFF33'),
|
|
},
|
|
data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
|
|
},
|
|
{
|
|
name: '金额',
|
|
type: 'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 19,
|
|
symbolOffset: [0, 5],
|
|
data: [596, 566, 512, 375, 566, 437, 492, 519, 309, 482, 539, 572],
|
|
itemStyle: { color: '#66FFFF' },
|
|
lineStyle: { color: 'transparent' },
|
|
animationDuration: 499,
|
|
animationDelay: 644,
|
|
},
|
|
],
|
|
};
|
|
|
|
/** 渲染图表 */
|
|
export const renderFooterChart = (element: Ref<HTMLDivElement>) => {
|
|
myChart = echarts.init(element.value, null, {
|
|
renderer: 'canvas',
|
|
devicePixelRatio: window.devicePixelRatio,
|
|
});
|
|
|
|
debounceChart(myChart);
|
|
|
|
myChart.setOption(option);
|
|
};
|