refactor: 图标样式优化

Former-commit-id: 1b9f02f3e0c46b3370850b6072b7bd4a94b87f73
This commit is contained in:
郝先瑞
2022-05-25 13:08:29 +08:00
parent ee205e84ec
commit a51d4f9371
2 changed files with 43 additions and 39 deletions

View File

@@ -9,7 +9,7 @@ import {
onActivated, onActivated,
onBeforeUnmount, onBeforeUnmount,
onDeactivated, onDeactivated,
onMounted onMounted,
} from 'vue'; } from 'vue';
import { init, EChartsOption } from 'echarts'; import { init, EChartsOption } from 'echarts';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
@@ -18,22 +18,22 @@ import resize from '@/utils/resize';
const props = defineProps({ const props = defineProps({
id: { id: {
type: String, type: String,
default: 'barChart' default: 'barChart',
}, },
className: { className: {
type: String, type: String,
default: '' default: '',
}, },
width: { width: {
type: String, type: String,
default: '200px', default: '200px',
required: true required: true,
}, },
height: { height: {
type: String, type: String,
default: '200px', default: '200px',
required: true required: true,
} },
}); });
const { mounted, chart, beforeDestroy, activated, deactivated } = resize(); const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
@@ -51,100 +51,104 @@ function initChart() {
fontSize: 18, fontSize: 18,
fontStyle: 'normal', fontStyle: 'normal',
fontWeight: 'bold', fontWeight: 'bold',
color: '#337ecc' color: '#337ecc',
} },
}, },
grid: { grid: {
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '10%', bottom: '10%',
containLabel: true containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
type: 'cross', type: 'cross',
crossStyle: { crossStyle: {
color: '#999' color: '#999',
} },
} },
}, },
legend: { legend: {
x: 'center', x: 'center',
y: 'bottom', y: 'bottom',
data: ['收入', '毛利润', '收入增长率', '利润增长率'] data: ['收入', '毛利润', '收入增长率', '利润增长率'],
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'], data: [ '浙江', '北京', '上海', '广东','深圳'],
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow',
} },
} },
], ],
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
min: 0,
max: 10000,
interval: 2000, interval: 2000,
axisLabel: { axisLabel: {
formatter: '{value} ' formatter: '{value} ',
} },
}, },
{ {
type: 'value', type: 'value',
min: 0,
max: 100,
interval: 20, interval: 20,
axisLabel: { axisLabel: {
formatter: '{value}%' formatter: '{value}%',
} },
} },
], ],
series: [ series: [
{ {
name: '收入', name: '收入',
type: 'bar', type: 'bar',
data: [8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800], data: [7000, 7100, 7200, 7300,7400],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' }, { offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' }, { offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' } { offset: 1, color: '#188df0' },
]) ]),
} },
}, },
{ {
name: '毛利润', name: '毛利润',
type: 'bar', type: 'bar',
data: [6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800], data: [ 8000,8200, 8400, 8600, 8800],
barWidth: 20, barWidth: 20,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#25d73c' }, { offset: 0, color: '#25d73c' },
{ offset: 0.5, color: '#1bc23d' }, { offset: 0.5, color: '#1bc23d' },
{ offset: 1, color: '#179e61' } { offset: 1, color: '#179e61' },
]) ]),
} },
}, },
{ {
name: '收入增长率', name: '收入增长率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: [65, 67, 65, 53, 47, 45, 43, 42, 41], data: [ 60,65, 70, 75, 80],
itemStyle: { itemStyle: {
color: '#67C23A' color: '#67C23A',
} },
}, },
{ {
name: '利润增长率', name: '利润增长率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: [80, 81, 78, 67, 65, 60, 56, 51, 45], data: [ 70,75, 80, 85, 90],
itemStyle: { itemStyle: {
color: '#409EFF' color: '#409EFF',
} },
} },
] ],
} as EChartsOption); } as EChartsOption);
chart.value = barChart; chart.value = barChart;
} }

View File

@@ -70,7 +70,7 @@ function initChart() {
center: ['50%', '50%'], center: ['50%', '50%'],
roseType: 'area', roseType: 'area',
itemStyle: { itemStyle: {
borderRadius: 6, borderRadius: 1,
color: function (params: any) { color: function (params: any) {
//自定义颜色 //自定义颜色
const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']; const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];