前言
最近由于某种原因参加了一个比赛，三天时间肝出来一个可视化大屏项目（无后端），代码已开源，但是还在比赛期间不知道会不会影响到
技术使用：html，css，js，echarts，本项目需要前端基础
项目已使用github进行部署（github可部署静态网站，我并没有做实时更新的功能）
可直接点击链接访问：GoldScope——金价可视化大屏
开源地址：GitHub - Outlier9/GoldScope: 金价可视化大屏
随后等比赛差不多结束的时候会出保姆级视频来教小白怎么做，也可以现在加本人vx咨询，视频会放到本人的B站账号上，敬请期待
项目代码
1.词云图（用散点图实现）
// 词云图（用散点图实现）——进价相关词云——左1
(function () {
// 1.实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2.指定配置项和数据
option = {
grid: {
left: '10%',
top: 5,
right: '10%',
bottom: 5,
},
itemStyle: {
color: 'rgba(255,255,255,0)',
},
tooltip: {
show: true,
trigger: 'item',
},
series: [
{
type: 'graph',
layout: 'force', //引导布局
label: {
show: true,
color: 'auto',
},
data: [{ name: '金价', size: 20, color: '#3B8BFF', x: 30, y: 22 },
{ name: '足金', size: 16, color: '#70aeb4', x: -120, y: 80 },
{ name: '累计涨幅', size: 12, color: '#D1C4E9', x: 80, y: 80 },
{ name: '暴涨', size: 18, color: '#559399', x: 104, y: -16 },
{ name: '外汇黄金', size: 22, color: '#FFECB3', x: 50, y: 54 },
{ name: '黄金产品', size: 17, color: '#C36D6D', x: 120, y: 100 },
{ name: '降息预期', size: 12, color: '#77BFFF', x: 164, y: 48 },
{ name: '美元利率', size: 16, color: '#CE93D8', x: 194, y: 75 },
{ name: '黄金股', size: 20, color: '#FCD67A', x: 136, y: 20 },
{ name: '去美元化', size: 10, color: '#CE93D8', x: 112, y: 124 }].concat( // 使用 concat 来合并新旧数据点
// 新的数据点
{name: '通货膨胀',size: 25,color: '#C36D6D',x: -20, y: 87,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '金价高位',size: 15,color: '#D7CCC8',x: 212, y: -2,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '央行购金',size: 8,color: '#A7FFEB',x: 6, y: 169,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '避险需求',size: 12,color: '#EDE7F6',x: 178, y: 163,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '经济衰退',size: 15,color: '#FFCDD2',x: 189, y: 126,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '美联储政策',size: 18,color: '#F0E68C',x: 25, y: 128,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '黄金牛市',size: 14,color: '#F8BBD0',x: -97, y: 22,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '保值增值',size: 17,color: '#FFECB3',x: -62, y: -12,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '黄金零售价',size: 20,color: '#A5D6A7',x: -95, y: 120,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '金价回落',size: 12,color: '#B3E5FC',x: -55, y: 51,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '黄金期货',size: 18,color: '#F1EAE0',x: 38, y: -5,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '波动风险',size: 14,color: '#D1C4E9',x: -80, y: 162,label: {color: '#FF5733',fontSize: 15,},fixed: true},
{name: '指数上升',size: 15,color: '#B2DFDB',x: 93, y: 155,label: {color: '#FF5733',fontSize: 15,},fixed: true}
// 如果有更多新数据点，继续添加
).map((item) => ({
name: item.name,
// draggable: false,
itemStyle: {
color: 'rgba(255,255,255,0)',
},
value: item.val,
x: item.x,
y: item.y,
fixed: true,
label: {
color: item.color,
fontSize: item.size,
},
})),
},
],
};
// 3.把配置项给实例对象
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
})();2.金价变动影响因素分析（雷达图）
官网原图链接：Examples - Apache ECharts
// 雷达图——金价变动影响因素分析——右1
(function () {
// 1.实例化对象
var myChart = echarts.init(document.querySelector(".bar2 .chart"));
// 2.指定配置项和数据
option = {
color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
// title: {
// text: '影响因素分析'
// },
legend: {
textStyle: {
color: 'lightblue' // 这里将图例文本颜色设置为红色
}
},
radar: [
{
indicator: [
{ text: '通货膨胀与利\n率的对比关系' },
{ text: '政治\n局势' },
{ text: '供求关系' },
{ text: '\n\n外汇价格变动' },
{ text: '\n\n\n世界经济周\n期发展趋势' }
],
center: ['25%', '60%'],
radius: 50,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
axisName: {
formatter: '{value}',
color: '#428BD4'
},
splitArea: {
areaStyle: {
color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
shadowColor: 'rgba(0, 0, 0, 0.2)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(211, 253, 250, 0.8)'
}
}
},
{
indicator: [
{ text: '黄金TD\n', max: 600 },
{ text: '水贝黄金', max: 600 },
{ text: '铂金99', max: 600 },
{ text: '金条价格', max: 600 },
{ text: '18K\n金', max: 600 },
//{ text: '国内银价', max: 72 }
],
center: ['75%', '58%'],
radius: 50,
axisName: {
color: 'rgba(86, 163,241)',
borderRadius: 3,
padding: [3, 5]
}
}
],
series: [
{
type: 'radar',
emphasis: {
lineStyle: {
width: 4
}
},
data: [
{
value: [60, 45, 90, 45, 60],
name: '影响占比',
// label: {
// show: true
// },
areaStyle: {
color: 'rgba(255, 228, 52, 0.6)'
}
},
{
//value: [60, 5, 0.3, -100, 1500],
//name: 'Data B',
// areaStyle: {
// color: 'rgba(255, 228, 52, 0.6)'
// }
}
]
},
{
type: 'radar',
radarIndex: 1,
data: [
{
value: [565.86, 576, 223.9, 569, 424.39],
//name: 'Data C',
symbol: 'rect',
symbolSize: 12,
lineStyle: {
type: 'dashed'
},
label: {
show: true,
formatter: function (params) {
return params.value;
}
}
},
{
value: [565.86, 576, 223.9, 569, 424.39],
//name: 'Data D',
areaStyle: {
color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
{
color: 'rgba(255, 145, 124, 0.1)',
offset: 0
},
{
color: 'rgba(255, 145, 124, 0.9)',
offset: 1
}
])
}
}
]
}
]
};
// 3.把配置项给实例对象
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
})();3.金店价格比较（柱状图）
官网原图链接：Examples - Apache ECharts
// 柱状图——金店价格比较——左2
(function () {
var myChart = echarts.init(document.querySelector(".line .chart"));
const builderJson = {
all: 1000,
charts: {
吉盟首饰: 733,
金象珠宝: 721,
东祥金店: 731,
星光达珠宝: 730,
百泰黄金: 758,
福泰珠宝: 703,
宝庆银楼: 719,
扬州金店: 640,
千禧之星: 730,
潮宏基: 733,
常州金店: 690,
金兰首饰: 730,
周大生: 733,
亚一金店: 730,
嘉华珠宝: 733,
萃华金店: 728,
太阳金店: 659,
城隍珠宝: 720,
齐鲁金店: 636,
周六福: 733,
六福: 733,
周生生: 731,
金至尊: 733,
菜百: 696,
老庙: 730,
老凤祥: 732,
周大福: 733
},
ie: 9743
};
const downloadJson = {
'echarts.min.js': 17365,
'echarts.simple.min.js': 4079,
'echarts.common.min.js': 6929,
'echarts.js': 14890
};
const themeJson = {
'dark.js': 1594,
'infographic.js': 925,
'shine.js': 1608,
'roma.js': 721,
'macarons.js': 2179,
'vintage.js': 1982
};
const waterMarkText = 'ECHARTS';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = canvas.height = 100;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.globalAlpha = 0.08;
ctx.font = '20px Microsoft Yahei';
ctx.translate(50, 50);
ctx.rotate(-Math.PI / 4);
ctx.fillText(waterMarkText, 0, 0);
option = {
dataZoom: [
{
type: 'inside',
orient: 'vertical',
yAxisIndex: 0,
start: 0,
end: 200,
show: true,
filterMode: 'none',
},
{
type: 'slider', // 指定为 slider 类型
orient: 'vertical', // 设置为垂直方向的滑动条
yAxisIndex: 0, // 应用在 yAxis 上
start: 0, // 滑动条的起始位置
end: 1000, // 滑动条的结束位置
show: true, // 显示滑动条
minValueSpan: 0, // 最小值和最大值之间的最小距离
width: 20,
handleStyle: {
color: '#389AA9' // 滑动条手柄颜色
},
textStyle: {
color: 'white', // 标签文本的颜色
fontSize: 12, // 标签文本的字体大小
}
}
],
backgroundColor: {
type: 'pattern',
image: canvas,
repeat: 'repeat'
},
tooltip: {},
grid: [
{
top: 0,
width: '100%',
bottom: '4%',
left: 0,
containLabel: true
}
],
xAxis: [
{
type: 'value',
max: builderJson.all,
splitLine: {
show: false
},
axisLabel: {
show: false // 隐藏刻度标签
},
axisTick: {
show: false // 隐藏刻度
}
}
],
yAxis: [
{
type: 'category',
data: Object.keys(builderJson.charts),
axisLabel: {
interval: 0, color: 'lightblue', fontSize: 6,
rotate: 30
},
splitLine: {
show: false
}
}
],
series: [
{
type: 'bar',
stack: 'chart',
itemStyle: {
color: '#389AA9'
},
z: 3,
label: {
position: 'right',
show: true,
color: 'lightblue',
fontSize: 8
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.charts[key];
})
},
{
type: 'bar',
stack: 'chart',
silent: true,
itemStyle: {
color: '#4C5C98'
},
data: Object.keys(builderJson.charts).map(function (key) {
return builderJson.all - builderJson.charts[key];
})
},
]
};
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
})();4.金价与主要货币汇率关系（渐变折线图）
官网原图链接：Examples - Apache ECharts
// 渐变折线图——金价与主要货币汇率关系——右2
(function () {
var myChart = echarts.init(document.querySelector('.line2 .chart'));
// prettier-ignore
const data = [["2016-01", 0.18], ["2016-02", 0.23], ["2016-03", 0.23], ["2016-04", 0.23], ["2016-05", 0.20], ["2016-06", 0.19], ["2016-07", 0.18], ["2016-08", 0.13], ["2016-09", 0.19], ["2016-10", 0.21], ["2016-11", 0.23], ["2016-12", 0.21], ["2017-01", 0.25], ["2017-02", 0.08], ["2017-03", 0.09], ["2017-04", 0.12], ["2017-05", 0.15], ["2017-06", 0.15], ["2017-07", 0.14], ["2017-08", 0.18], ["2017-09", 0.16], ["2017-10", 0.19], ["2017-11", 0.17], ["2017-12", 0.18], ["2018-01", 0.15], ["2018-02", 0.29], ["2018-03", 0.21], ["2018-04", 0.18], ["2018-05", 0.18], ["2018-06", 0.19], ["2018-07", 0.21], ["2018-08", 0.23], ["2018-09", 0.25], ["2018-10", 0.25], ["2018-11", 0.22], ["2018-12", 0.19], ["2019-01", 0.17], ["2019-02", 0.15], ["2019-03", 0.23], ["2019-04", 0.25], ["2019-05", 0.27], ["2019-06", 0.27]];
const dateList = data.map(function (item) {
return item[0];
});
const valueList = data.map(function (item) {
return item[1];
});
option = {
// Make gradient line here
visualMap: [
{
show: false,
type: 'continuous',
seriesIndex: 0,
min: 0,
max: 0.5
}
],
tooltip: {
trigger: 'axis'
},
xAxis: [
{
axisLabel: {
color: "lightblue"
},
data: dateList
}
],
yAxis: [
{
axisLabel: {
color: "lightblue"
}
}
],
grid: [
{
top:'10%',
bottom: '15%'
}
],
series: [
{
type: 'line',
showSymbol: false,
data: valueList
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
})();5.金价的季节性波动（大数据量面积图）
官网原图链接：Examples - Apache ECharts
// 大数据量面积图——金价的季节性波动——左3
(function () {
var myChart = echarts.init(document.querySelector(".pie .chart"));
let date = [];
let startDate = new Date(2023, 3, 24); // 设置起始日期为2023年4月24日
let endDate = new Date(2024, 3, 19); // 设置结束日期为2024年4月19日（注意月份是从0开始计数的）
// 循环从起始日期到结束日期，生成日期数组
while (startDate <= endDate) {
// 使用 Date 对象的 toLocaleDateString 方法来格式化日期
date.push(startDate.toLocaleDateString('default', { year: 'numeric', month: '2-digit', day: '2-digit' }));
// 将日期推进一天
startDate.setDate(startDate.getDate() + 1);
}
console.log(date);
let data = [13642.85, 13778.84, 13876.78, 13747.05, 13702.99, 13747.05, 13702.99, 13702.99, 13791.81, 13922.44, 14121.72, 13825.36, 14121.72, 13825.36, 13825.36, 14050.00, 14124.58, 14008.84, 14055.07, 14008.84, 14055.07, 14041.94, 14005.38, 13815.67, 13795.61, 13752.58, 13795.61, 13752.58, 13858.70, 13892.51, 13910.26, 13791.66, 13760.16, 13791.66, 13760.16, 13760.16, 13823.35, 13971.40, 14009.20, 13916.30, 14009.20, 13916.30, 13918.02, 13928.77, 14040.19, 13984.64, 13980.86, 13984.64, 13980.86, 13955.23, 13993.70, 13980.06, 13920.06, 13966.75, 13920.06, 13966.75, 13975.89, 13863.53, 13825.20, 13785.00, 13861.46, 13785.00, 13861.46, 13918.53, 13860.79, 13820.25, 13764.50, 13871.08, 13764.50, 13871.08, 13969.94, 13910.26, 13954.67, 13838.04, 13885.73, 13838.04, 13885.73, 13896.65, 13943.39, 13990.51, 13999.67, 13942.19, 13999.67, 13942.19, 13982.73, 14191.96, 14273.29, 14193.14, 14092.99, 14193.14, 14092.99, 14081.23, 13978.07, 14060.42, 13940.57, 13968.00, 13940.57, 13968.00, 14075.76, 13974.47, 13984.83, 13872.03, 13928.34, 13872.03, 13928.34, 13892.59, 13905.53, 13863.03, 13866.21, 13867.90, 13866.21, 13867.90, 13814.75, 13875.45, 13898.37, 13814.34, 13788.60, 13814.34, 13788.60, 13769.64, 13808.37, 13950.53, 13956.12, 13960.16, 13956.12, 13960.16, 13960.16, 14051.75, 14188.68, 14098.77, 14101.20, 14098.77, 14101.20, 14091.39, 14067.27, 14063.64, 14059.97, 14157.96, 14059.97, 14157.96, 14031.73, 13918.48, 13916.39, 13844.17, 14024.21, 13844.17, 14024.21, 14025.20, 14119.74, 14159.83, 13994.44, 14066.76, 13994.44, 14066.76, 14076.04, 13942.82, 13792.95, 13673.17, 13650.91, 13673.17, 13650.91, 13377.60, 13300.24, 13274.70, 13278.35, 13278.35, 13278.35, 13278.35, 13458.49, 13544.40, 13661.62, 13688.63, 13948.04, 13688.63, 13948.04, 14022.86, 14100.54, 14306.73, 14282.40, 14546.47, 14282.40, 14546.47, 14432.30, 14356.83, 14512.20, 14450.88, 14509.28, 14450.88, 14509.28, 14605.05, 14610.32, 14535.71, 14508.65, 14536.35, 14508.65, 14536.35, 14427.05, 14274.68, 14253.88, 14259.44, 14153.27, 14259.44, 14153.27, 14076.92, 14280.54, 14190.49, 14341.27, 14286.54, 14341.27, 14286.54, 14109.67, 14328.53, 14312.05, 14244.09, 14304.28, 14244.09, 14304.28, 14404.00, 14456.05, 14598.64, 14523.95, 14583.50, 14523.95, 14583.50, 14636.36, 14459.87, 14508.21, 14489.70, 14398.48, 14489.70, 14398.48, 14256.80, 14216.56, 14216.11, 14548.18, 14469.37, 14548.18, 14469.37, 14431.98, 14531.35, 14531.18, 14573.25, 14573.25, 14573.25, 14573.25, 14573.25, 14573.25, 14778.00, 14775.35, 14775.35, 14775.35, 14775.35, 14775.35, 14769.13, 14602.04, 14603.99, 14696.73, 14603.99, 14696.73, 14485.54, 14587.99, 14537.63, 14544.95, 14735.93, 14544.95, 14735.93, 14700.86, 14649.61, 14477.16, 14487.59, 14592.98, 14487.59, 14592.98, 14540.56, 14508.60, 14492.65, 14519.19, 14487.22, 14519.19, 14487.22, 14521.55, 14664.81, 14719.54, 14690.23, 14632.66, 14690.23, 14632.66, 14526.57, 14601.66, 14688.90, 14599.79, 14556.25, 14599.79, 14556.25, 14496.54, 14359.14, 14280.02, 14416.33, 14372.09, 14416.33, 14372.09, 14519.13, 14592.68, 14573.35, 14560.66, 14589.33, 14560.66, 14589.33, 14591.18, 14648.09, 14629.58, 14722.82, 14752.00, 14722.82, 14752.00, 15103.65, 15360.42, 15423.16, 15488.90, 15601.59, 15488.90, 15601.59, 15658.90, 15520.80, 15582.34, 15545.44, 15569.27, 15545.44, 15569.27, 15535.23, 15513.99, 15531.27, 15626.51, 15699.37, 15626.51, 15699.37, 15696.40, 15732.05, 15847.08, 16002.44, 16002.44, 16002.44, 16002.44, 16002.44, 16379.13, 16492.55, 16589.11, 16625.64, 16589.11, 16625.64, 16777.50, 17040.02, 16877.86, 16976.41, 17380.62, 16976.41, 17380.62, 16002.44, 16379.13, 16492.55, 16589.11, 16625.64,16625.64]
option = {
tooltip: {
trigger: 'axis',
position: function (pos, params, el, elRect, size) {
// pos 为当前鼠标的坐标
// params 为 tooltip 的参数，如当前的数据点
// el 为当前鼠标悬浮的 DOM 元素
// elRect 为 el 的布局位置
// size 为 ECharts 图表的尺寸
// 以下代码将 tooltip 显示在鼠标的上方
var tooltipTop = pos[1] - 60; // 距离鼠标指针 30 像素的上方
return [pos[0], tooltipTop];
}
},
grid: [
{
top: 0,
width: '99%',
bottom: '4%',
left: 0,
containLabel: true
}
],
xAxis: {
type: 'category',
boundaryGap: false,
data: date,
axisLabel: {
color: "#F8E89F",
fontSize: 6
},
},
yAxis: {
type: 'value',
min: 12000, // 设置 y 轴的最小值为 10000
max: 18000, // 设置 y 轴的最大值为 15000
boundaryGap: [0, '100%'],
axisLabel: {
interval: 0, color: '#F8E89F',
fontSize: 6,
rotate: 10
},
},
dataZoom: [
{
type: 'slider', // 指定为 slider 类型
xAxisIndex: 0, // 应用在 xAxis 上
start: 0, // 滑动条的起始位置
end: 50, // 滑动条的结束位置
show: true, // 显示滑动条
minValueSpan: 0, // 最小值和最大值之间的最小距离
height: 17,
handleStyle: {
color: '#389AA9' // 滑动条手柄颜色
},
textStyle: {
color: 'white', // 标签文本的颜色
fontSize: 12, // 标签文本的字体大小
}
}
],
series: [
{
name: 'Fake Data',
type: 'line',
symbol: 'none',
sampling: 'lttb',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 158, 68)'
},
{
offset: 1,
color: 'rgb(255, 70, 131)'
}
])
},
data: data
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
})();6.跌涨情况（虚线柱状图）
官网原图链接：Examples - Apache ECharts
// 虚线柱状图——跌涨情况——右3
(function () {
var myChart = echarts.init(document.querySelector('.pie2 .chart'));
// Generate data
let category = [];
let dottedBase = +new Date() - 30 * 24 * 3600 * 1000;
let lineData = [504.72, 518.26, 508.38, 512.05, 512.98, 506.01, 516.00, 516.00, 516.00, 529.86, 529.86, 531.00, 531.00, 531.00, 531.00, 531.00, 539.40, 553.70, 544.50, 555.85, 559.09, 559.09, 559.09, 566.36, 560.36, 564.26, 564.50, 563.17, 563.17, 563.17];
let barData = [518.26, 508.38, 512.05, 512.98, 506.01, 516.00, 516.00, 516.00, 529.86, 529.86, 531.00, 531.00, 531.00, 531.00, 531.00, 539.40, 553.70, 544.50, 555.85, 559.09, 559.09, 559.09, 566.36, 560.36, 564.26, 564.50, 563.17, 563.17, 563.17, 568.14];
for (let i = 0; i < 20; i++) {
let date = new Date((dottedBase += 3600 * 24 * 1000));
category.push(
[date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
);
let b = Math.random() * 200;
let d = Math.random() * 200;
barData.push(b);
lineData.push(d + b);
}
// option
option = {
backgroundColor: '#0f375f',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['line', 'bar'],
textStyle: {
color: '#ccc'
}
},
grid: [
{
top: 15,
width: '100%',
bottom: '4%',
left: 0,
containLabel: true
}
],
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis: {
splitLine: { show: false },
min: 500,
max: 560,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
series: [
{
name: '昨日',
type: 'line',
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 5,
data: lineData
},
{
name: '今日',
type: 'bar',
barWidth: 6,
itemStyle: {
borderRadius: 5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#14c8d4' },
{ offset: 1, color: '#43eec6' }
])
},
data: barData
},
{
name: '跌涨幅',
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#0f496f'
},
symbolRepeat: true,
symbolSize: [12, 4],
symbolMargin: 1,
z: -12,
data: lineData.map((lineValue, index) => {
// 计算差值
let difference = lineValue - barData[index];
// 计算差值百分比，并保留两位小数
let percentageDifference = ((lineValue - barData[index]) / barData[index] * 100).toFixed(2) + '%';
// 自定义提示框显示的格式
return {
value: parseFloat(percentageDifference), // 将格式化的字符串转换为浮点数
tooltip: {
formatter: params => {
// 由于我们已经在data中定义了完整的百分比字符串，这里可以直接使用params.value
return `${params.name}<br />涨幅: ${params.value}`;
}
}
};
})
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
})();7.上证指数
官网原图链接：Examples - Apache ECharts
// 上证指数——上证指数——中间
(function () {
var myChart = echarts.init(document.querySelector(".map .chart"));
const upColor = '#ec0000';
const upBorderColor = '#8A0000';
const downColor = '#00da3c';
const downBorderColor = '#008F28';
// Each item: open，close，lowest，highest
const data0 = splitData([
["2023/12/19", 2042.60, 2031.00, 2050.00, 2025.40],
["2023/12/20", 2038.10, 2043.50, 2045.90, 2031.60],
["2023/12/21", 2041.80, 2034.70, 2048.00, 2034.00],
["2023/12/22", 2059.60, 2051.50, 2072.30, 2049.40],
["2023/12/25", 2066.65, 2065.30, 2067.60, 2065.30],
["2023/12/26", 2060.40, 2056.30, 2069.60, 2056.30],
["2023/12/27", 2083.40, 2068.00, 2085.30, 2063.30],
["2023/12/28", 2083.50, 2089.50, 2098.20, 2074.60],
["2023/12/29", 2071.80, 2076.10, 2084.10, 2067.60],
["2024/1/1", 2072.90, 2071.75, 2075.70, 2071.75],
["2024/1/2", 2073.40, 2072.70, 2088.10, 2064.30],
["2024/1/3", 2042.80, 2067.90, 2074.30, 2038.30],
["2024/1/4", 2050.00, 2049.30, 2058.10, 2043.30],
["2024/1/5", 2049.80, 2051.40, 2071.10, 2030.80],
["2024/1/8", 2033.50, 2052.60, 2053.30, 2022.70],
["2024/1/9", 2033.00, 2034.50, 2048.60, 2031.90],
["2024/1/10", 2037.50, 2046.20, 2052.00, 2036.40],
["2024/1/11", 2028.90, 2039.40, 2060.10, 2027.40],
["2024/1/12", 2061.10, 2045.00, 2075.80, 2044.20],
["2024/1/15", 2057.85, 2051.30, 2062.50, 2049.50],
["2024/1/16", 2039.70, 2060.00, 2069.70, 2037.50],
["2024/1/17", 2015.90, 2040.80, 2041.00, 2014.60],
["2024/1/18", 2031.10, 2021.30, 2034.20, 2017.50],
["2024/1/19", 2038.50, 2033.70, 2050.10, 2031.80],
["2024/1/22", 2031.50, 2040.40, 2043.00, 2027.40],
["2024/1/23", 2035.20, 2032.80, 2045.40, 2031.50],
["2024/1/24", 2025.40, 2039.40, 2046.20, 2021.90],
["2024/1/25", 2027.10, 2025.40, 2034.00, 2017.00],
["2024/1/26", 2026.60, 2028.90, 2035.70, 2025.40],
["2024/1/29", 2034.90, 2035.80, 2046.50, 2028.20],
["2024/1/30", 2050.90, 2051.50, 2068.00, 2047.10],
["2024/1/31", 2067.40, 2055.30, 2074.60, 2048.80],
["2024/2/1", 2071.10, 2057.90, 2083.20, 2046.40],
["2024/2/2", 2053.70, 2072.00, 2074.70, 2044.20],
["2024/2/5", 2042.90, 2057.90, 2059.10, 2030.80],
["2024/2/6", 2051.40, 2041.40, 2055.30, 2038.80],
["2024/2/7", 2051.70, 2052.60, 2061.30, 2046.40],
["2024/2/8", 2047.90, 2051.00, 2053.80, 2034.60],
["2024/2/9", 2038.70, 2049.70, 2051.90, 2034.30],
["2024/2/12", 2033.00, 2038.20, 2041.80, 2025.40],
["2024/2/13", 2007.20, 2033.70, 2047.30, 2002.80],
["2024/2/15", 2014.90, 2004.80, 2020.20, 2001.80],
["2024/2/16", 2024.10, 2016.10, 2027.20, 2006.60],
["2024/2/19", 2027.50, 2025.70, 2034.30, 2024.65],
["2024/2/20", 2039.80, 2027.70, 2042.70, 2023.90],
["2024/2/21", 2034.30, 2036.20, 2043.50, 2030.90],
["2024/2/22", 2030.70, 2036.50, 2045.50, 2029.30],
["2024/2/23", 2039.40, 2024.10, 2041.50, 2015.60],
["2024/2/26", 2029.10, 2033.70, 2036.30, 2025.00],
["2024/2/27", 2034.40, 2031.00, 2038.00, 2028.70],
["2024/2/28", 2042.70, 2039.70, 2047.40, 2033.40],
["2024/2/29", 2054.70, 2043.80, 2059.40, 2036.00],
["2024/3/1", 2095.70, 2052.80, 2097.10, 2047.00],
["2024/3/4", 2126.30, 2091.60, 2128.40, 2088.10],
["2024/3/5", 2141.90, 2123.30, 2150.50, 2118.50],
["2024/3/6", 2158.20, 2136.40, 2160.70, 2131.90],
["2024/3/7", 2165.20, 2156.70, 2172.20, 2151.70],
["2024/3/8", 2185.50, 2166.60, 2203.00, 2161.20],
["2024/3/11", 2188.60, 2187.60, 2195.50, 2180.90],
["2024/3/12", 2166.10, 2189.10, 2190.80, 2156.20],
["2024/3/13", 2180.80, 2163.60, 2185.60, 2161.30],
["2024/3/14", 2167.50, 2179.50, 2181.30, 2157.00],
["2024/3/15", 2171.60, 2175.50, 2186.70, 2169.40],
["2024/3/18", 2174.50, 2169.10, 2176.00, 2160.00],
["2024/3/19", 2169.80, 2174.20, 2175.00, 2162.10],
["2024/3/20", 2171.00, 2171.30, 2201.40, 2164.20],
["2024/3/21", 2195.00, 2200.10, 2231.30, 2178.90],
["2024/3/22", 2170.20, 2193.30, 2198.00, 2169.30],
["2024/3/25", 2186.80, 2177.50, 2192.70, 2175.00],
["2024/3/26", 2187.80, 2183.00, 2210.70, 2179.30],
["2024/3/27", 2212.70, 2200.50, 2218.30, 2193.70],
["2024/3/28", 2238.40, 2215.70, 2256.90, 2207.50],
["2024/3/29", 2254.80, 2254.80, 2254.80, 2254.80],
["2024/4/1", 2257.10, 2259.20, 2286.40, 2249.10],
["2024/4/2", 2281.80, 2272.70, 2301.90, 2267.10],
["2024/4/3", 2315.00, 2301.70, 2321.80, 2285.70],
["2024/4/4", 2308.50, 2321.00, 2325.30, 2298.70],
["2024/4/5", 2345.40, 2309.50, 2350.00, 2286.20],
["2024/4/8", 2351.00, 2343.60, 2372.50, 2321.70],
["2024/4/9", 2362.40, 2358.10, 2384.50, 2355.70],
["2024/4/10", 2348.40, 2372.40, 2378.10, 2337.10],
["2024/4/11", 2372.70, 2351.70, 2395.60, 2343.10],
["2024/4/12", 2374.10, 2389.40, 2448.80, 2350.60],
["2024/4/15", 2383.00, 2369.40, 2404.30, 2340.20],
["2024/4/16", 2407.80, 2399.10, 2414.80, 2379.20],
["2024/4/17", 2388.40, 2398.00, 2412.00, 2370.70],
["2024/4/18", 2398.00, 2377.90, 2408.00, 2377.20],
["2024/4/19", 2413.80, 2394.00, 2433.30, 2386.80]
]);
function splitData(rawData) {
const categoryData = [];
const values = [];
for (var i = 0; i < rawData.length; i++) {
categoryData.push(rawData[i].splice(0, 1)[0]);
values.push(rawData[i]);
}
return {
categoryData: categoryData,
values: values
};
}
function calculateMA(dayCount) {
var result = [];
for (var i = 0, len = data0.values.length; i < len; i++) {
if (i < dayCount) {
result.push('-');
continue;
}
var sum = 0;
for (var j = 0; j < dayCount; j++) {
sum += +data0.values[i - j][1];
}
result.push(sum / dayCount);
}
return result;
}
option = {
title: {
text: '黄金期货上证指数',
left: 10,
textStyle: {
color: 'lightblue' // 这里将图例文本颜色设置为红色
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30'],
textStyle: {
color: 'lightblue' // 这里将图例文本颜色设置为红色
},
left: 200,
},
grid: {
left: '10%',
right: '10%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: data0.categoryData,
boundaryGap: false,
axisLine: { onZero: false },
axisLabel: {
color: '#F8E89F',
fontSize: 12
},
splitLine: { show: false },
min: 'dataMin',
max: 'dataMax'
},
yAxis: {
axisLabel: {
color: '#F8E89F',
fontSize: 12
},
scale: true,
splitArea: {
show: true
}
},
dataZoom: [
{
type: 'inside',
start: 50,
end: 100
},
{
show: true,
type: 'slider',
top: '90%',
start: 50,
end: 100
}
],
series: [
{
name: '日K',
type: 'candlestick',
data: data0.values,
itemStyle: {
color: upColor,
color0: downColor,
borderColor: upBorderColor,
borderColor0: downBorderColor
},
markPoint: {
label: {
formatter: function (param) {
return param != null ? Math.round(param.value) + '' : '';
}
},
data: [
{
name: 'Mark',
coord: ['2013/5/31', 2300],
value: 2300,
itemStyle: {
color: 'rgb(41,60,85)'
}
},
{
name: 'highest value',
type: 'max',
valueDim: 'highest'
},
{
name: 'lowest value',
type: 'min',
valueDim: 'lowest'
},
{
name: 'average value on close',
type: 'average',
valueDim: 'close'
}
],
tooltip: {
formatter: function (param) {
return param.name + '<br>' + (param.data.coord || '');
}
}
},
markLine: {
symbol: ['none', 'none'],
data: [
[
{
name: 'from lowest to highest',
type: 'min',
valueDim: 'lowest',
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
},
{
type: 'max',
valueDim: 'highest',
symbol: 'circle',
symbolSize: 10,
label: {
show: false
},
emphasis: {
label: {
show: false
}
}
}
],
{
name: 'min line on close',
type: 'min',
valueDim: 'close'
},
{
name: 'max line on close',
type: 'max',
valueDim: 'close'
}
]
}
},
{
name: 'MA5',
type: 'line',
data: calculateMA(5),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA10',
type: 'line',
data: calculateMA(10),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA20',
type: 'line',
data: calculateMA(20),
smooth: true,
lineStyle: {
opacity: 0.5
}
},
{
name: 'MA30',
type: 'line',
data: calculateMA(30),
smooth: true,
lineStyle: {
opacity: 0.5
}
}
]
};
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
})
})();写在最后
当初选择的时候想了很多种可以做的方向和思路，在这里也提供给大家，感兴趣的也可以自己试试，有任何问题可加本人vx联系交流
历史走势图：
- 展示金价的历史走势，可以是日、周、月、年等不同时间尺度的变化趋势图，帮助用户了解金价的长期走势。
- 折线图：展示金价随时间的变化趋势，清晰地显示出历史价格的波动情况。
实时价格监控：
- 实时更新金价，显示最新的价格，并配以动态图表或实时数据，让用户了解金价的最新动向。
- 实时折线图或动态柱状图：以实时更新的方式显示金价随时间的变化，让用户能够及时了解最新的价格情况。
价格预测模型：
- 基于历史数据和其他因素，展示金价的预测走势图，帮助用户做出未来金价可能走势的预测。
- 折线图：展示基于预测模型得出的金价未来走势，可以通过不同线条或颜色表示不同的预测结果。
影响因素分析：
- 展示金价受到影响的各种因素，比如经济指标、地缘政治事件、货币政策等，以图表形式呈现它们对金价的影响程度和趋势。
- 堆叠面积图或雷达图：以图表形式展示不同因素对金价的影响程度，让用户一目了然地了解各个因素的相对重要性。
金店价格比较：
- 将不同金店的金价进行对比，以地图或条形图等形式展示金价的变化情况，帮助用户了解金店金价的差异。
- 地图或并列柱状图：地图可以直观地展示不同金店的金价情况，而并列柱状图则可以更直观地比较不同金店的金价水平。
用户交互模块：
- 提供用户交互功能，比如筛选时间范围、比较不同数据指标、添加自定义标记等，让用户根据自己的需求定制可视化内容。
- 筛选器、滑动条等交互组件：提供用户选择时间范围、比较不同指标、添加标记等功能的交互组件，让用户能够根据自己的需求自定义可视化内容。
金价与主要货币汇率关系：
- 展示金价与主要货币（如美元、欧元）的汇率关系。
- 散点图：X轴为货币汇率，Y轴为金价。
金价与股票市场相关性：
- 分析金价与股票市场（如道琼斯指数、纳斯达克指数）的相关性。
- 气泡图：大小代表相关性的强度。
金价的季节性波动:
- 展示金价在一年中不同季节的波动趋势。
- 堆叠柱状图：每个季节的金价波动用不同颜色表示
