<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化</title>
</head>
<body>
<div id="app">
<!-- 数据绑定 -->
<h1>{{title}}</h1>
<div id="chart1" style="height:500px;width:1000px;"></div>
</div>
</body>
<!-- 引入Vue框架 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.3.4/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
<script type="module">
import * as echarts from "https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.esm.min.js";
// 挂载Vue 相当于声明变量
const { createApp } = Vue;
createApp({
// 方法结构
data() {
// 返回需要的各种变量
return {
title: "你好",
};
},
// 页面挂载完毕后执行的方法
mounted() {
// 把取回来的数据拿出来
axios.get("http://jtwz.gxaliyun.com/wti0901.json").then(box => {
console.log(box.data);
// 排序，根据close_price从大到小排，使用冒泡排序
for (let i = 0; i < box.data.data.length; i++) {
for (let j = 0; j < i; j++) {
// 两两比较 如果第一个数比第二个数要小，就交换位置
if (box.data.data[j].close_price < box.data.data[i].close_price) {
let temp = box.data.data[j];
box.data.data[j] = box.data.data[i];
box.data.data[i] = temp;
}
}
}
console.log(box.data.data);
// 取数组的前五个元素
let arr = [];
for (let i = 0; i < 5; i++) {
arr.push(box.data.data[i])
}
// 开始画图
let chartDom = document.getElementById("chart1");
let echart = echarts.init(chartDom);
// 定义图标
let optios = {
xAxis: {
type: 'category',
data: arr.map(x=>{
return x.day
}),
},
yAxis: {
type: 'value',
},
series: [{
data: arr.map(x=>{
return x.close_price
}),
type: 'bar'
}]
}
// exharts显示
optios && echart.setOption(optios);
});
},
}).mount("#app")
</script>
</html>
|
