echarts java动态数据,echarts动态刷新数据，echarts重新加载数据

echarts动态刷新数据，echarts重新加载数据

在这次的项目中图表显示的部分比较多，这边给分享下用到的图表的数据刷新

饼图最后的效果

先看下

前端部分

这是右边图的 echarts的html  一定要定义好大小

接下来是 js部分 先定义一个模板 官网有 自己稍加修改 (比较懒没加注释)

//绘制会员量比例图表

var memberChart = echarts.init(document.getElementById('member'));

memberChart.setOption({

tooltip: {

trigger:'item',

formatter:"{a}
{b}: {c} ({d}%)"},

legend: {

itemHeight:10,

itemWidth:10,

orient:'vertical',

x:'center',

y:'bottom',

icon:'roundRect',

formatter:function(name) {var index = 0;var clientlabels = ['新增会员','老会员'];var clientcounts = [621,32032];

clientlabels.forEach(function(value,i){if(value ==name){

index=i;

}

});return name + " " +clientcounts[index];

}

},

series: [

{

name:'男女比例',

type:'pie',

radius: ['45%', '53%'],

avoidLabelOverlap:false,

hoverAnimation:false,

data:[

{value:621, name:'新增会员'},

{value:32032, name:'老会员'},

],

itemStyle: {

normal:{

label:{

position :'outside',

formatter:'{d}%',

fontSize:10,

},

labelLine :{

length:2,

length2:2,

show:false,

}

}

}

}

],

color:['#0090FF','#F6A20C'],

title: {

subtext:'会员总人数',

text:'32653',

x:'center',

y:'center',

padding:0,

itemGap:0,

textStyle:{

fontSize:20,

},

subtextStyle:{

fontSize:10,

},

},

graphic: {

type:'text',

style:{

x:15,

y:15,

font:'bolder 1.2em "PingFang-SC-Medium", sans-serif',

text:'今日新增会员比例',

},

},

});

因为 主副标题被我拿去显示不同数据了  所有用上了

graphic

原生图形元素组件

接下来 看下 动态刷新数据的js

functionreflushMember(data) {

memberChart.setOption({

legend: {

formatter:function(name) {var index = 0;var clientlabels = ['新增会员','老会员'];var clientcounts =[data.newMemberCount, data.oldMemberCount];

clientlabels.forEach(function(value,i){if(value ==name){

index=i;

}

});return name + " " +clientcounts[index];

}

},

series: [

{

data:[

{value:data.newMemberCount, name:'新增会员'},

{value:data.oldMemberCount, name:'老会员'},

],

}],

title: {

text:data.memberCount,

}

})

}

主要就是把之前模板上的数据部分替换成 后台获取到的数据

饼图的刷新就到这里

还有个横向柱状图 其实都是差不多的 但是还是也看下吧

先看效果

这是4个横向柱状图  适应不同的搜索条件 就看下 月度top5的吧

position:absolute;margin-left: 18%;margin-top: 1.4%;

font: bolder 1.2em PingFang-SC-Medium sans-serif;">

//绘制月度热力商圈图表

var monthAreaChart = echarts.init(document.getElementById('monthArea'));

monthAreaChart.setOption({

dataset: {

source: [/*[58212, '小郡干串串'],

[78254, '钢管厂'],

[41032, '耐克'],

[12755, '金大福'],

[20145, '肯德基'],*/]

},/*grid: {containLabel: true},*/xAxis: {name:'(人)',

show:true,

splitLine: {

show:false}},

yAxis: {type:'category',

axisLine:{show:false}, //坐标轴

axisTick:[{ //坐标轴小标记

show:false}],

},

grid:{

height:'70%',

y2:20,

left:'15%',

},

series: [

{

textStyle:{

fontSize:10,

},

type:'bar',

encode: {//Map the "amount" column to X axis.

x: 'amount',//Map the "product" column to Y axis

y: 'product'},/*barWidth: 10,*/barGap:'70%',/*多个并排柱子设置柱子之间的间距*/barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/itemStyle: {

normal: {

color:new echarts.graphic.LinearGradient(0, 0, 1, 0, [{

offset:0,

color:'#438CFF'}, {

offset:1,

color:'#20C0F4'}]),

label: {

show:true, //开启显示

position: 'right', //在上方显示

textStyle: { //数值样式

color: 'black',

fontSize:10}

},

}

},

}

],

graphic: {

type:'text',

style:{

x:15,

y:15,

font:'bolder 1.2em "PingFang-SC-Medium", sans-serif',

text:'月度TOP5',

},

},

上面是 横向柱状图 模板例子

var listTop5Result =result.listTop5Result;for(var i = listTop5Result.length - 1; i >= 0; i--){

names.push(listTop5Result[i].deptName);//挨个取出类别并填入类别数组

}for(var i = listTop5Result.length - 1; i >= 0; i--){

nums.push(listTop5Result[i].num);//挨个取出人次并填入销量数组

}

myChart.hideLoading();//隐藏加载动画

myChart.setOption({ //加载数据图表

yAxis: {

data: names

},

series: [{

data: nums

}]

});

上面是 动态获取 并要刷新的数据  和饼图不同的是 柱状图传进去的要是数组

以上就是我要分享的内容了

感谢

如果有什么错误 请多多指教！

2019-11-12 19:52:21

http://www.dengb.com/Javabc/1379824.htmlwww.dengb.comtruehttp://www.dengb.com/Javabc/1379824.htmlTechArticleecharts动态刷新数据，echarts重新加载数据 在这次的项目中图表显示的部分比较多，这边给分享下用到的图表的数据刷新 饼图最后的效果 先...