|
|
@@ -9,26 +9,26 @@ const theme = getTheme();
|
|
|
function getColors() {
|
|
|
// 默认主题色配置
|
|
|
const defaultColors: Colors = {
|
|
|
- upColor: '#FF2B2B',
|
|
|
- downColor: '#1FF195',
|
|
|
- xAxisLineColor: '#171B1D',
|
|
|
- yAxisLineColor: '#171B1D',
|
|
|
- seriesLineColor: '#39afe6',
|
|
|
- seriesMarkLabelColor: '#3C454B',
|
|
|
- seriesMarkLineColor: '#666',
|
|
|
+ upColor: '#ff3333',
|
|
|
+ downColor: '#0aab62',
|
|
|
+ xAxisLineColor: 'rgba(128,128,128,.1)',
|
|
|
+ yAxisLineColor: 'rgba(128,128,128,.1)',
|
|
|
+ seriesLineColor: '#50b4eb',
|
|
|
seriesAreaGradients: new echarts.graphic.LinearGradient(0, 0, 0, 1,
|
|
|
[
|
|
|
{
|
|
|
offset: 0,
|
|
|
- color: 'rgba(0, 136, 212, 0.3)',
|
|
|
+ color: 'rgba(80, 180, 235, .2)',
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
- color: 'rgba(0, 136, 212, 0.3)',
|
|
|
+ color: 'rgba(80, 180, 235, .15)',
|
|
|
},
|
|
|
],
|
|
|
false
|
|
|
),
|
|
|
+ seriesMarkLabelColor: '#fff',
|
|
|
+ seriesMarkLineColor: 'rgba(102,102,102,.6)'
|
|
|
}
|
|
|
|
|
|
const colors = {
|
|
|
@@ -76,10 +76,17 @@ export function useOptions(dataset: EchartsDataset) {
|
|
|
|
|
|
options.timeline = {
|
|
|
dataset: timeline,
|
|
|
+ grid: {
|
|
|
+ left: '10px',
|
|
|
+ right: '10px',
|
|
|
+ top: '15px',
|
|
|
+ bottom: '10px',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
axisPointer: {
|
|
|
label: {
|
|
|
- // 小数点精度
|
|
|
- precision: decimal,
|
|
|
+ precision: decimal, // 小数点精度
|
|
|
+ backgroundColor: 'rgba(128,128,128,.75)',
|
|
|
}
|
|
|
},
|
|
|
xAxis: {
|
|
|
@@ -89,6 +96,9 @@ export function useOptions(dataset: EchartsDataset) {
|
|
|
showMaxLabel: true,
|
|
|
margin: 12,
|
|
|
},
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ }
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
@@ -153,30 +163,33 @@ export function useOptions(dataset: EchartsDataset) {
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: colors.seriesAreaGradients,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.1)',
|
|
|
- shadowBlur: 10,
|
|
|
+ opacity: 1,
|
|
|
},
|
|
|
// 标线
|
|
|
markLine: {
|
|
|
- // 标线两端图标
|
|
|
- symbol: 'none',
|
|
|
+ symbolSize: 6,
|
|
|
// 标线标签样式
|
|
|
label: {
|
|
|
- color: colors.seriesMarkLabelColor,
|
|
|
- fontWeight: 'bold',
|
|
|
- backgroundColor: 'rgba(255,255,255,.75)',
|
|
|
+ show: false,
|
|
|
+ backgroundColor: 'rgba(128,128,128,.75)',
|
|
|
padding: 5,
|
|
|
- borderRadius: 3
|
|
|
+ borderRadius: 3,
|
|
|
+ position: 'insideStartBottom',
|
|
|
},
|
|
|
// 标线样式
|
|
|
lineStyle: {
|
|
|
type: 'dashed',
|
|
|
+ color: 'rgba(128,128,128,.3)'
|
|
|
},
|
|
|
data: [
|
|
|
{
|
|
|
yAxis: timeline.source.close[timeline.source.close.length - 1] ?? '--', // 最新价
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: colors.seriesMarkLabelColor,
|
|
|
+ },
|
|
|
lineStyle: {
|
|
|
- color: colors.seriesMarkLineColor
|
|
|
+ color: colors.seriesMarkLineColor,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
@@ -194,6 +207,7 @@ export function useOptions(dataset: EchartsDataset) {
|
|
|
lineStyle: {
|
|
|
width: 1,
|
|
|
opacity: 0.8,
|
|
|
+ color: '#ffcc00',
|
|
|
},
|
|
|
},
|
|
|
],
|