ruoyi框架添加echart
时间: 2023-09-02 13:14:12 浏览: 130
ruoyi框架前后端交互教程.docx
1. 引入echarts
在`pom.xml`文件中添加echarts的依赖:
```xml
<dependency>
<groupId>com.github.abel533</groupId>
<artifactId>echarts</artifactId>
<version>4.9.0</version>
</dependency>
```
2. 编写前端页面
在需要显示echarts的页面中,添加一个`div`元素作为容器,如下所示:
```html
<div id="chart" style="height: 400px;"></div>
```
3. 编写js代码
在页面底部添加以下js代码:
```javascript
$(function () {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 指定图表的配置项和数据
var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
```
4. 效果展示
最终效果如下图所示:
![echarts效果展示](https://img-blog.csdn.net/20180607102104603?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhcnJpbmdfMTk5NjY3ODg3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/80)
阅读全文