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)
var myChart = echarts.init(document.getElementById("app"))
var option = {
title: {
text: "标题"
}
, tooltip: {}
, legend: {}
, xAxis: {
data: goods
}
, yAxis: {}
, series: [
{
name: '销量',
type: 'bar',
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 => {
var goods = x.data.goods
var sales_num = x.data.sales_num
draw(goods,sales_num)
})
function draw(x,y){
var myChart = echarts.init(document.getElementById("app"))
var option = {
title: {
text: "标题"
},
tooltip: {}
, legend: {}
, xAxis: {
data: x
}
, yAxis: {}
, series: [
{
name: '销量',
type: 'bar',
data: y
}
]
}
myChart.setOption(option)
}
</script>
</body>
</html>