echars 后台实例化

最新推荐文章于 2023-08-05 00:06:50 发布

原创最新推荐文章于 2023-08-05 00:06:50 发布 · 817 阅读

1 ·

CC 4.0 BY-SA版权

该博客介绍了如何在后台导入并使用Echarts的相关库，包括Grid、CategoryAxis、ValueAxis等类，创建GsonOption对象，并配置Line图表的样式，如设置边框颜色、位置等。

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

导入相关的jar包

import com.github.abel533.echarts.Grid;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.NameLocation;
import com.github.abel533.echarts.code.Position;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.feature.MagicType;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Funnel;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.style.ItemStyle;
import com.github.abel533.echarts.style.TextStyle;
import com.github.abel533.echarts.style.itemstyle.Normal;

GsonOption LineOpt = new GsonOption();

LineOpt.title().text("业绩规模").left(X.center).textStyle(new TextStyle().color("#080808"));
LineOpt.tooltip().trigger(Trigger.axis);
LineOpt.legend().data("人数","金额(万元)").right(100);
LineOpt.grid(new Grid().left("8%").right("5%").bottom("25%"));
LineOpt.xAxis(new CategoryAxis().data("0","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23").name("日"));
LineOpt.yAxis(new ValueAxis().name("万元").nameLocation(NameLocation.end));
Line personline=new Line("人数");
//从数据中心获取数据人数,金额
//usernumlist..........................(获取数据)
personline.data(usernumlist.toArray());
personline.itemStyle(new ItemStyle().normal(new Normal().color("#5CACEE")));
personline.label(newItemStyle().normal(new Normal().show(true).position(Position.top).textStyle(new TextStyle().color("#080808"))));
Line moneyline=new Line("金额(万元)");
moneyline.data(moneytotallist.toArray());
moneyline.itemStyle(new ItemStyle().normal(new Normal().color("#D2691E")));
moneyline.label(new ItemStyle().normal(new Normal().show(true).position(Position.top).textStyle(new TextStyle().color("#080808"))));
LineOpt.series(personline,moneyline);
LineOpt.toolbox().show(true).feature(Tool.saveAsImage, new MagicType(Magic.pie, Magic.funnel)
.option(new MagicType.Option().funnel(new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548))))

.iconStyle(new ItemStyle().normal(new Normal().borderColor("#1e90ff"))).right(20).right(20);