refactor: 图标样式优化
Former-commit-id: 1b9f02f3e0c46b3370850b6072b7bd4a94b87f73
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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'];
|
||||||
|
|||||||
Reference in New Issue
Block a user