Ajax实现Echart异步请求图表数据

团子团子酱

于 2020-03-30 11:14:29 发布

阅读量567

点赞数

分类专栏：前端文章标签： ajax js javascript

本文链接：https://blog.youkuaiyun.com/qq_27158747/article/details/105194557

版权

本文展示了如何利用Ajax进行异步请求，将获取的数据应用到Echarts的图表中，以展示每月活跃用户数。通过初始化echarts实例，设置图表配置，然后使用$.ajax进行数据请求，最后更新图表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<div class="div_any_child"> 
    <div class="div_any_title">每年活跃用户数</div> 
    <p id="lineChart2" class="p_chart"></p> 
</div>

js代码分两步，图标基本设置lineChart2.setOption和ajax数据请求$.ajax

//每月活跃用户数
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
lineChart2.setOption({

//基本图标设置
color: ["#c2b11e", "#ff7f50", "#32cd32", "#da70d6",], //线条颜色
tooltip: {
trigger: 'item',
formatter: "{a}<br/>{b}<br/>{c}条"
},
legend: {
data: [],
y: 'bottom',
x: 'center',
textStyle: {
color: '#fff',
fontSize: 12
}
},
grid: {
left: '5%'

最低0.47元/天解锁文章