axios+echarts
1.axios+echarts案例1
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>axios+echarts 1</title><scriptsrc="./js/vue.global.js"></script><scriptsrc="./js/axios.min.js"></script><scriptsrc="./js/echarts.js"></script></head><body><divid="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
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><scriptsrc="./js/vue.global.js"></script><scriptsrc="./js/axios.min.js"></script><scriptsrc="./js/echarts.js"></script></head><body><divid="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表示数据内容functiondraw(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>
本文转载自: https://blog.csdn.net/qq_42260493/article/details/134977603
版权归原作者 叶子上的考拉 所有， 如有侵权，请联系我们删除。
版权归原作者 叶子上的考拉 所有， 如有侵权，请联系我们删除。