使用echarts制作柱状图、折线图,并且下方带表格

最新推荐文章于 2025-05-28 10:24:58 发布

洪韭菜

最新推荐文章于 2025-05-28 10:24:58 发布

阅读量2.8k

点赞数 21

CC 4.0 BY-SA版权

文章标签： echarts 信息可视化前端柱状图带表格 echarts表格

本文链接：https://blog.csdn.net/qq_39564789/article/details/135475918

本文介绍了一个使用ECharts库创建的动态图表，展示2022年5月各站点制造产量的目标、实际和达成率。图表数据通过Java处理，实现了动态赋值和格式化。

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

实现效果:

调试地址: https://echarts.apache.org/examples/zh/editor.html?c=line-simple

源码:

option = {

title: {
left: 'center',
top: '0',
text: '2022-05月制造产量达成情况(单位: 吨) (图1)\n\n集团目标产量: 106,675吨集团实际产量: 2,636吨',
textStyle:{
fontSize:20
},
subtext: '达成率: 2.5%',
subtextStyle:{
fontSize:22
},
itemGap: 20
},

tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
//color: '#999'
}
}
},

grid: {
   top: '200',
   left: '100',
   right: '12',
   bottom: '90',
   containLabel: true
   },

legend: [
   {
   //textStyle: { color: },
   data: ['目标产量', '实际产量', '达成率'],
   bottom: 30,
   left: 30
   },
   {
   align: 'right',
   itemGap: 10,//这里是调整底部底部表格字段说明的间距
   orient: 'vertical',
   textStyle: { color: '' },