echarts实现金价可视化大屏(项目实战)

前言

最近由于某种原因参加了一个比赛,三天时间肝出来一个可视化大屏项目(无后端),代码已开源,但是还在比赛期间不知道会不会影响到

技术使用: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-ignoreconst 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 herevisualMap: [{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 轴的最小值为 10000max: 18000, // 设置 y 轴的最大值为 15000boundaryGap: [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 datalet 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);}// optionoption = {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.valuereturn `${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,highestconst 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轴为金价。

金价与股票市场相关性:

  • 分析金价与股票市场(如道琼斯指数、纳斯达克指数)的相关性。
  • 气泡图:大小代表相关性的强度。

金价的季节性波动:

  • 展示金价在一年中不同季节的波动趋势。
  • 堆叠柱状图:每个季节的金价波动用不同颜色表示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/12227.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Jmeter+Grafana+Prometheus搭建压测监控平台

本文不介绍压测的规范与技术指标&#xff0c;本文是演示针对Jmeter如何将压测过程中的数据指标&#xff0c;通过Prometheus采集存储&#xff0c;并在Granfan平台进行仪表盘展示; 介绍 系统压测属于日常项目开发中的一个测试环节&#xff0c;使用测试工具模拟真实用户行为&…

Springboot+MybatisPlus如何实现分页和模糊查询

实现分页查询的时候我们需要创建一个config配置类 1、创建MybatisPlusConfig类 Configuration //表明这是一个配置类 ConditionalOnClass(Value{PaginationInterceptor.class} //ConditionalOnClass:当指定的类存在时&#xff0c;才会创建对应的Bean // 这里当PaginationInt…

Go-Zero定义API实战:探索API语法规范与最佳实践(五)

前言 上一篇文章带你实现了Go-Zero模板定制化&#xff0c;本文将继续分享如何使用GO-ZERO进行业务开发。 通过编写API层&#xff0c;我们能够对外进行接口的暴露&#xff0c;因此学习规范的API层编写姿势是很重要的。 通过本文的分享&#xff0c;你将能够学习到Go-Zero的API…

测试项目实战--安享理财2(Jmeter接口测试)

说明&#xff1a; 1.访问地址&#xff1a; 本项目实战使用的是传智播客的安享理财项目&#xff08;找了半天这个项目能免费用且能够满足测试实战需求&#xff09; 前台&#xff1a;http://121.43.169.97:8081/ 后台&#xff1a;http://121.43.169.97:8082/ &#xff08;点赞收藏…

前端工程化 - 快速通关 - vue

目录 npm 2.1环境 2.2命令 2.3使用流程 Vite 3.1简介 3.2实战 Vue3 4.1组件化 4.2SFC 4.3Vue工程 4.4基础使用 4.5进阶用法 4.6总结 npm npm 是 nodejs 中进行 包管理 的工具&#xff1b; 下载&#xff1a;Node.js — Run JavaScript Everywhere 2.1环境 ●安…

使用DBeaver的第2天-使用sql导入数据

使用sql导入数据这块我会仔细的说一下 首先位置一定要放在库上&#xff08;实例&#xff09;&#xff0c;放在表上可不好使用哦 然后点击工具-再点击执行脚本 这样就执行成功了 但是如果你执行失败了&#xff0c;多半可能是因为本地没有部署mysql&#xff0c;记住只有本地有…

【强训笔记】day23

NO.1 思路&#xff1a;直接计算结果&#xff0c;先计算怪物可以抗几次攻击&#xff0c;再计算勇士受到的伤害&#xff0c;如果勇士的攻击力大于等于怪物的血量&#xff0c;那么就可以击杀无数只&#xff0c;如果勇士的血量正好是受到攻击的整数倍&#xff0c;那么击杀的怪物数…

ubuntu编译pcl时报错

报错如下 cc1plus: warning: -Wabi wont warn about anything [-Wabi] cc1plus: note: -Wabi warns about differences from the most up-to-date ABI, which is also used by default cc1plus: note: use e.g. -Wabi11 to warn about changes from GCC 7 在网上找到了一封邮件…

国外新闻媒体投放:多元化媒体分发投稿平台-大舍传媒

引言 随着全球信息传播的加速和全球化的发展&#xff0c;国外新闻媒体的推广变得越来越重要。在这个数字化时代&#xff0c;多元化的媒体分发投放成为了有效推广的关键。本文将介绍大舍传媒在国外新闻媒体推广中的经验与策略。 国外新闻媒体的重要性 国外新闻媒体是获取国际…

网页转长图插件html2canvas【前端】

网页转长图插件html2canvas【前端】 前言版权开源推荐网页转长图插件html2canvas【前端】wkImageStorage流程使用后端application.propertiesWkConfigShareControllerImageCleanupTask 前端html2canvas.jsshare.htmlshare.jsgetShare.jsgetShare.html 最后 前言 2024-5-10 18:…

超分辨率重建——CAMixerSR网络训练与推理测试(详细图文教程)

&#x1f4aa; 专业从事且热爱图像处理&#xff0c;图像处理专栏更新如下&#x1f447;&#xff1a; &#x1f4dd;《图像去噪》 &#x1f4dd;《超分辨率重建》 &#x1f4dd;《语义分割》 &#x1f4dd;《风格迁移》 &#x1f4dd;《目标检测》 &#x1f4dd;《暗光增强》 &a…

在做题中学习(56):二维前缀和模板

【模板】二维前缀和_牛客题霸_牛客网 (nowcoder.com) 理解题意&#xff1a; 要求的是(x1,y1) - (x2,y2)这段区间的和。 解法&#xff1a;二维前缀和 1. 和一维前缀和一样&#xff0c;需要有一个同等规模的dp数组&#xff0c;用来保存一段连续区域的和。 在二维dp中&#xff0…

客户案例:CACTER云网关为企业O365系统提供安全新护盾

一、客户背景 某智能驾驶企业是一家国际性的高科技创新型企业&#xff0c;其智能驾驶领域处于全球领先地位&#xff0c;专注于为广大客户提供个性化的智能驾驶解决方案&#xff0c;共建美好智能新时代。 使用产品&#xff1a;CACTER邮件安全云网关 二、痛点难点问题 根据…

最强特征点检测算法 DeDoDe v1/v2

论文地址v1:https://arxiv.org/pdf/2308.08479 论文地址v1:https://arxiv.org/pdf/2404.08928 代码地址:GitHub - Parskatt/DeDoDe: [3DV 2024 Oral] DeDoDe 🎶 Detect, Dont Describe --- Describe, Dont Detect, for Local Feature Matching 实测确实牛X! DeDoDeV1 关…

网安热议 | 中小企面临什么网络安全困扰?中小企网络安全是不是智商税?

近日&#xff0c;Coro 公司表示&#xff0c;许多中小型企业的 IT 人员被开发安全工作中多工具操作的复杂性和安全需求&#xff0c;压得“喘不过气”&#xff0c;导致其可能错过很多关键安全事件告警信息&#xff0c;从而将公司的网络安全置于危险之地。 研究机构采访了美国多行…

比大小(打擂台)(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//声明比较大小函数max; int max(int a, int b);int main() {//初始化变量值&#xff1b;int i, n, m, a[10];//填充数组&#xff1b;printf("请输入10个数…

数据结构选择题(期末)

1.给定NN的二维数组A&#xff0c;则在不改变数组的前提下&#xff0c;查找最大元素的时间复杂度是&#xff08;A&#xff09;&#xff1a; A.O(N2) B.O(NlogN) C.O(N) D.O(N2logN) 两重循环即O(N2)的时间复杂度 2.与数据元素本身的形式、内容、相对位置、个数无关的是数据的…

MIT 6.5840(6.824) Lab1:MapReduce 设计实现

1 介绍 本次实验是实现一个简易版本的MapReduce&#xff0c;你需要实现一个工作程序&#xff08;worker process&#xff09;和一个调度程序&#xff08;coordinator process&#xff09;。工作程序用来调用Map和Reduce函数&#xff0c;并处理文件的读取和写入。调度程序用来协…

晶振在电子设备中的作用是什么?

在无源晶振电路中&#xff0c;并联电阻起着至关重要的作用。无源晶振本身不能自行产生振荡&#xff0c;因此需要借助外部电路来实现。并联在晶振两端的电阻&#xff0c;通常称为负载电阻&#xff0c;对电路的稳定性和振荡性能有着重要影响。 晶振电路的核心是皮尔斯振荡器&…

mysql根据字段值关联查不同表

mysql根据字段值关联查不同表&#xff1a; 实现&#xff1a; 使用left join 结合case when 判断直接取值&#xff1a; select mp.member_id ,mp.store_id, case mp.store_type when 1 then bs.store_namewhen 2 then sc.store_namewhen 3 then be.store_name end as store_na…