动态获取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>
这就完成了，结果就不放了，一定没问题，无论是任何图表类型，这种方法都成功，有问题再评论！