若依项目整合eCharts实现图表统计功能

 

eCharts是一款强大的图表统计工具,具体介绍可查看其官网

http://echarts.baidu.com/echarts2/index.html

下面记录一下如何在若依项目中使用eCharts。

1、下载eCharts,地址为:http://echarts.baidu.com/download.html

此处需要选择【完整】版的,另外如果需要调试的话,可以选择【源代码】版。

 

2、在若依项目ruoyi-admin的resources/static/js/plugins下新建echarts文件夹,将下载的echarts.min.js文件加入其中。

3、在相应template目录下新建一个testEcharts.html文件,创建相应controller层用于简单访问该页面。下面简单说明下如何在testEcharts.html中实现Echarts官方新手入门http://echarts.baidu.com/echarts2/doc/start.html中第四个参考案例。

复制代码

<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
         <div id="main" style="height:400px"></div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:src="@{/js/plugins/echarts/echarts.js}"></script>
    <script th:inline="javascript">
        var prefix = ctx + "finance/budge
在vue中使用echarts实现图表的放大缩小是可以实现的。首先,需要在vue组件中引入echarts,并绑定图表数据。 接着,在html页面中添加一个echarts容器div,通过echarts初始化,将数据绑定到echarts上。具体代码如下: // 引入echarts import echarts from 'echarts' // 绑定图表数据 data() { return { chartData: [] } } // 添加echarts容器div <div ref="chart" style="width: 100%; height: 100%;"></div> // 初始化echarts并绑定数据 mounted() { this.chart = echarts.init(this.$refs.chart) this.chart.setOption(this.chartData) } 为了实现图表的放大缩小效果,可以使用echarts自带的toolbox组件。在echarts初始化时,添加toolbox配置项,并设置tool属性的值为: { feature: { dataZoom: { xAxisIndex: 'none' }, restore: {}, saveAsImage: {} } } 通过设置dataZoom属性可以实现图表的放大缩小效果,xAxisIndex属性表示只对x轴进行缩放操作。restore属性表示重置图表,saveAsImage属性表示下载图表为图片。 完整代码如下: // 引入echarts import echarts from 'echarts' // 绑定图表数据 data() { return { chartData: { // 图表配置项 // ... toolbox: { feature: { dataZoom: { xAxisIndex: 'none' }, restore: {}, saveAsImage: {} } } } } } // 添加echarts容器div <div ref="chart" style="width: 100%; height: 100%;"></div> // 初始化echarts并绑定数据 mounted() { this.chart = echarts.init(this.$refs.chart) this.chart.setOption(this.chartData) } 通过以上代码,即可在vue中使用echarts实现图表的放大缩小效果。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Hotice888

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值