Echarts图表的date数据变为从数据库中获取

最新推荐文章于 2025-04-25 10:46:05 发布

沓然

最新推荐文章于 2025-04-25 10:46:05 发布

阅读量2.3k

点赞数

分类专栏： Earchts 文章标签： echarts sql

本文链接：https://blog.youkuaiyun.com/weixin_43005654/article/details/123224836

版权

Earchts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何从数据库动态获取数据并使用ECharts库更新饼状图。首先展示了一个静态的ECharts饼状图例子，然后通过JavaScript的AJAX方法获取服务器返回的数据，并实时更新图表的值。在处理中需要注意，由于ECharts在初始化时会锁定配置，因此需要直接调用`setOption`方法来更新图表数据。

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

动态获取Date从数据库并渲染至前端

我们以简单的例子为例，直接拿到官网的例子，如下图

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

这是官网给的数据，我们需要加工一下，加工后的代码如下图

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="echarts.js"></script>

	<body>
		<!-- 为 图表 准备一个定义了宽高 -->
		<div id="pie" style="width: 600px;height: 600px;"></div>
		<script type="text/javascript">
			//初始化echarts实例
			var myChart = echarts.init(document.getElementById('pie'));
			option = {
				title: {
					text: 'Referer of a Website',
					subtext: 'Fake Data',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [{
					name: 'Access From',
					type: 'pie',
					radius: '50%',
					data: [{
							value: 1048,
							name: 'Search Engine'
						},
						{
							value: 735,
							name: 'Direct'
						},
						{
							value: 580,
							name: 'Email'
						},
						{
							value: 484,
							name: 'Union Ads'
						},
						{
							value: 300,
							name: 'Video Ads'
						}
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				}]
			};
			myChart.setOption(option);
		</script>

</html>

效果图是下面这样的，表示我们成功画出了这个图，option相当于配置，前面我们定义了optin属性并做了详细的配置，最后一行代码serOption就是将我们配置好的optin属性给我们的图表设置上
在这里插入图片描述
二、好了，接下来需要再次加工，首先把date的数据提取出来，定义成一个var变量，当我们获取到返回结果集result时，直接修改那个var变量的值就ok了；在这里有一个坑，就是无论我们修改date值的操作是在上述代码的任何地方，显示出来的数值依然是默认值，即使测试发现date数值确实已经改变了，原因是因为程序读取到option时，直接将date默认值装进去了，根本不管你修改后的date值，所以我们的js代码又要动了，直接上代码！

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('pie'))
    var yearPieData=[
        {value:148, name: '名字1'},
        {value:235,name: '名字2'},
        {value:78,name: '名字3'},
        {value:84,name: '名字4'},
        {value:120, name: '名字5'}
    ];
    function setYearPieData () {
        $.ajax({url:"selectTaskTypeCountYear",success:function(result){  
        //url:后代控制层的请求路径,result里放的都是后台返回的数据，我这里返回的是6个int值，count1....
                yearPieData[0].value=result.count6;
                yearPieData[1].value=result.count7;
                yearPieData[2].value=result.count8;
                yearPieData[3].value=result.count9;
                yearPieData[4].value=result.count10;
                myChart.setOption(  
                //这里很关键，不要想着先修改数据，再像官网例子一样写option配置，我们上来就直接setOption
                    {
                        title: {
                            text: '全年各名称数量占比',
                            subtext: '数量统计',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [{
                            name: '全年各名称数量统计',
                            type: 'pie',
                            radius: '60%',
                            data:yearPieData, //就是我们上面自定义的数据
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    }
                );
            }});
    };
    setYearPieData(); //执行上面的方法，请求后台，拿到数据，修改date，设置option属性，就ok了，不用再给这个图表设置option了
</script>