axios+echarts
1.axios+echarts案例1
<!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>axios+echarts 1</title>
<script src="./js/vue.global.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
axios.get("./json/data1.json").then(x => {
var goods = x.data.goods
var sales_num = x.data.sales_num
console.log(sales_num)
//初始化echarts，指定图显示在哪个容器上
var myChart = echarts.init(document.getElementById("app"))
//图表配置
var option = {
title: {
text: "标题"
}
//提示信息配置
, tooltip: {
}
//图例配置
, legend: {
}
//x轴
, xAxis: {
data: goods
}
//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
, yAxis: {
}
//具体数据
, series: [
//第一组数据
{
name: '销量', //系列名称
type: 'bar', //系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: sales_num //系列中的数据内容
}
]
}
//将图配置显示到容器中
myChart.setOption(option)
})
</script>
</body>
</html>
2.axios+echarts案例2
<!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>Document</title>
<script src="./js/vue.global.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.js"></script>
</head>
<body>
<div id="app" style="width: 600px;height: 400px;"></div>
<script>
axios.get("./json/data1.json").then(x => {
//横轴数据，具体是否是goods需要看返回的数据
var goods = x.data.goods
//显示数据，具体是否是ales_num需要看返回的数据
var sales_num = x.data.sales_num
// console.log(sales_num)
//调用自定义的方法
draw(goods,sales_num)
})
//将图表显示写成方法，传入两个参数，x表示横轴显示内容，y表示数据内容
function draw(x,y){
//初始化echarts，指定图显示在哪个容器上
var myChart = echarts.init(document.getElementById("app"))
//图基本配置
var option = {
title: {
text: "标题"
},
tooltip: {
}
, legend: {
}
//x轴
, xAxis: {
data: x
}
//y轴，一般不指定y轴的数据，y轴会随着数据的改变而改变
, yAxis: {
}
//具体数据
, series: [
//第一组数据
{
name: '销量', //系列名称
type: 'bar', //系列图表类型,bar柱状图，line折线图，pie饼图，gauge仪表盘
data: y //系列中的数据内容
}
]
}
//将图配置显示到容器中
myChart.setOption(option)
}
</script>
</body>
</html>
![[Verilog] Verilog 简介](https://img-blog.csdnimg.cn/direct/a4c3303d1b87416097961c0132421c2b.png)
