echarts堆叠图展示，根据数据维度的粒度判断是否展示数据

最新推荐文章于 2024-06-01 14:42:21 发布

转载最新推荐文章于 2024-06-01 14:42:21 发布 · 499 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hfj1/p/7504820.html

文章标签：

#javascript #json #ViewUI

本文介绍了一个使用ECharts进行图表配置的示例，通过判断请求属性来动态改变图例显示的内容。根据类型变量的不同，图例会显示预测值、实际值及目标值等选项，并设置了白色字体颜色以匹配背景。此外，还展示了如何设置x轴和y轴的数据及样式。

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

1.定义一个参数，返回根据判断什么条件是否显示值; 2.var a = '<%=(String)request.getAttribute("type")%&>'; 代码如下 var legend_list=[];//判断类型为4时则显示mgetval值 if(a=="4") { legend_list=[ {name: '预测值', textStyle:{color:"#ffffff"} }, {name:'实际值', textStyle:{color:"#ffffff"}}, {name:'目标值', textStyle:{color:"#ffffff"}}, ]; } else{ legend_list=[ {name: '预测值', textStyle:{color:"#ffffff"} }, {name:'实际值', textStyle:{color:"#ffffff"}} ]; } var option = { title: { text: '', textStyle: { color: '#ffffff' }, }, legend: { data:legend_list }, tooltip: { trigger: 'axis' }, xAxis: [{ type: 'category', axisLabel: { show: true, textStyle: { color: '#ffffff' } }, axisTick:{ show:false, }, splitLine:{show: false}, boundaryGap: false, data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月'] }], grid :{ borderWidth :'0px' }, yAxis: [{ type: 'value', axisLabel: { show: true, textStyle: { color: '#ffffff' } }, splitLine:{show: false} }], series: [ { name: '实际值', type: 'line', itemStyle: { normal: { areaStyle: { type: 'default' } } }, data: [<%=factval%>] }, { name: '预测值', type: 'line', itemStyle: { normal: { areaStyle: { type: 'default' } } }, data: [<%=targetval%>] }, { name: '目标值', type: 'line', itemStyle: { normal: { areaStyle: { type: 'default' } } }, data: [<%=mgetval%>] }] }; mychar.setOption(option); window.onresize=mychar.resize;

转载于:https://www.cnblogs.com/hfj1/p/7504820.html