wordpress游戏站,网站文字模板,手机平面设计软件app,沈阳高端网站Gitee仓库
https://gitee.com/Lin_DH/system
介绍
ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库#xff0c;可以流畅的运行在 PC 和移动设备上#xff0c;兼容当前绝大部分浏览器#xff08;IE8/9/10/11#xff0c;Chrome#xff0c;…Gitee仓库
https://gitee.com/Lin_DH/system
介绍
ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE8/9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。 它提供了常规的折线图、柱状图、散点图、饼图、K线图用于统计的盒形图用于地理数据可视化的地图、热力图、线图用于关系数据可视化的关系图、treemap、旭日图多维数据可视化的平行坐标还有用于 BI 的漏斗图仪表盘并且支持图与图之间的混搭。 Echarts官网 https://echarts.apache.org/zh/index.html
实现代码
折线图 EchartsController.java package com.lm.system.controller;import io.swagger.annotations.Api;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;/*** author DUHAOLIN* date 2024/10/15*/
Controller //返回页面
Api(tags echarts)
public class EchartsController {GetMapping(lineChart)public String lineChart(ModelMap map) {return lineChart; //折线图}}lineChart.html !DOCTYPE html
html langen
head langenmeta charsetUTF-8 /titleSpring Boot中使用ECharts/title!-- 下载地址 https://www.jsdelivr.com/package/npm/echarts --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script
/head
body
div idmain stylewidth: 1000px;height:400px;/div
/bodyscript typetext/javascript// 初始化ECharts组件到id为main的元素上let lineChart echarts.init(document.getElementById(main));// 定义图标的配置项let option {title: {text: ECharts 折线图},tooltip: {},// x轴配置xAxis: {data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},// y轴配置yAxis: {},series: [{// 数据集也可以从后端的Controller中传入data: [150, 230, 224, 218, 135, 147, 260],// 图表类型这里使用line为折线图type: line}]};lineChart.setOption(option);
/script
/html折线图堆叠 EchartsController.java 在 EchartsController 类中添加 stackedLineChart 方法。
GetMapping(stackedLineChart)
public String stackedLineChart(ModelMap map) {return stackedLineChart; //折线图堆叠
}stackedLineChart.html !DOCTYPE html
html langen
head langenmeta charsetUTF-8 /titleECharts 折线图堆叠/title!-- 下载地址 https://www.jsdelivr.com/package/npm/echarts --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script
/head
body
div idmain stylewidth: 1000px;height:400px;/div
/bodyscript typetext/javascript// 初始化ECharts组件到id为main的元素上let stackedLineChart echarts.init(document.getElementById(main));// 定义图标的配置项let option {title: {text: ECharts 折线图堆叠},tooltip: { trigger: axis },legend: {data: [Email, Union Ads, Video Ads, Direct, Search Engine]},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {}}},// x轴配置xAxis: {data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},// y轴配置yAxis: {type: value},series: [{name: Email,type: line,stack: Total,data: [120, 132, 101, 134, 90, 230, 210]},{name: Union Ads,type: line,stack: Total,data: [220, 182, 191, 234, 290, 330, 310]},{name: Video Ads,type: line,stack: Total,data: [150, 232, 201, 154, 190, 330, 410]},{name: Direct,type: line,stack: Total,data: [320, 332, 301, 334, 390, 330, 320]},{name: Search Engine,type: line,stack: Total,data: [820, 932, 901, 934, 1290, 1330, 1320]}]};stackedLineChart.setOption(option);
/script
/html柱状图 EchartsController.java 在 EchartsController 类中添加 barChart 方法。
GetMapping(barChart)
public String barChart (ModelMap map) {return barChart; //柱状图
}barChart.html !DOCTYPE html
html langen
head langenmeta charsetUTF-8 /titleECharts 柱状图/title!-- 下载地址 https://www.jsdelivr.com/package/npm/echarts --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script
/head
body
div idmain stylewidth: 1000px;height:400px;/div
/bodyscript typetext/javascript// 初始化ECharts组件到id为main的元素上let barChart echarts.init(document.getElementById(main));// 定义图标的配置项let option {title: {text: ECharts 柱状图},tooltip: {},// x轴配置xAxis: {data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},// y轴配置yAxis: {},series: [{// 数据集也可以从后端的Controller中传入data: [150, 230, 224, 218, 135, 147, 260],// 图表类型这里使用line为折线图type: bar}]};barChart.setOption(option);
/script
/html饼状图 EchartsController.java 在 EchartsController 类中添加 pieChart 方法。
GetMapping(pieChart)
public String pieChart (ModelMap map) {return pieChart; //饼状图
}pieChart.html !DOCTYPE html
html langen
head langenmeta charsetUTF-8 /titleECharts 饼状图/title!-- 下载地址 https://www.jsdelivr.com/package/npm/echarts --script srchttps://cdn.jsdelivr.net/npm/echarts5.5.1/dist/echarts.min.js/script
/head
body
div idmain stylewidth: 1000px;height:400px;/div
/bodyscript typetext/javascript// 初始化ECharts组件到id为main的元素上let pieChart echarts.init(document.getElementById(main));// 定义图标的配置项let option {title: {text: ECharts 饼状图,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)}}}]};pieChart.setOption(option);
/script
/html效果图
折线图 折线图堆叠 柱状图 饼状图 项目结构图
