Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）

对于ElementUI中使用ECharts在上一篇文章中已经说明具体使用方法

一、效果图：（以每一个月的工业产值为例）

我们可以选择不同企业和不同的年份生成同比环比图

1、环比图

2、同比图

二、从Echart官网中导入我们需要的图表

Echart官网 https://echarts.apache.org/zh/index.html

2.1、导入图表信息，生成静态图表

<template><div><!--    统计分析图        --><div><Echarts :option="option" style="height: 330px;width: 720px;margin-left: 30px" /></div></div>
</template>
<script>//引入Echart的包
import Echarts from "../../components/charts/Echarts";
export default {components:{Echarts,},data(){return{option:{tooltip: {trigger: 'axis',axisPointer: {type: 'cross',crossStyle: {color: '#999'}}},toolbox: {feature: {dataView: { show: true, readOnly: false },magicType: { show: true, type: ['line', 'bar'] },restore: { show: true },saveAsImage: { show: true }}},legend: {data: ['Evaporation', 'Precipitation', 'Temperature']},xAxis: [{type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],axisPointer: {type: 'shadow'}}],yAxis: [{type: 'value',name: 'Precipitation',min: 0,max: 250,interval: 50,axisLabel: {formatter: '{value} ml'}},{type: 'value',name: 'Temperature',min: 0,max: 25,interval: 5,axisLabel: {formatter: '{value} °C'}}],series: [{name: 'Evaporation',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]},{name: 'Precipitation',type: 'bar',tooltip: {valueFormatter: function (value) {return value + ' ml';}},data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]},{name: 'Temperature',type: 'line',yAxisIndex: 1,tooltip: {valueFormatter: function (value) {return value + ' °C';}},data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]}]
};},created: function () {},methods:{}
}
</script>
<style scoped>
</style>

2.2、通过ajax请求，从数据库获取将要展示的信息

此时我们需要通过在script里面编写请求的方法，用于获取展示信息

当我们再使用的时候需要改写成自己的请求信息：获取自己想要的数据

//加载页面时执行一次
created() {this.selectCharts();},methods:{selectCharts:function (){this.axios({method: "POST",url: "/v1/statistics/selectYearDate",}).then((res) => {let code = res.data.code;if (code == 200) {//调用赋值操作的方法this.assignmentCharts(res.data.data)}}).catch((error) => {console.log(error);});},
}

注意：Echarts的赋值方式一定是得从根开始往下找，一直对应到自己赋值得数据域
例如：我们要给Echarts图表赋值时，例如给series里面的data赋值：this.optionzhezhu.series[0].data=所赋的值;

特别注意：series里面存储的是数组类型的对象，我们比如要给第一个对象赋值，那么得写series[0].对应赋值得变量

2.3、对图表进行赋值操作

    assignmentCharts:function (temp){console.log(temp)let nowYear = new Date().getFullYear();this.optionzhezhu.series[0].data=[];this.optionzhezhu.title.text=[]if(this.selectYear!=""){let yy = new Date(this.selectYear).getFullYear();this.optionzhezhu.title.text="环比:"+yy+"年";}else{this.optionzhezhu.title.text="环比:"+nowYear+" 年全企业";}this.optionzhezhu.series[1].data=[];for (let i = 0; i < temp.length; i++) {this.optionzhezhu.series[0].data.push(temp[i].nowYearOutputValue);   //当前月的数据this.optionzhezhu.series[1].data.push(temp[i].monthOnMonth);   //上一个月的数据}},

这样我们就对环比图赋值完成了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1mXNjuo-1658664130032)(C:/Users/ZHANG/AppData/Roaming/Typora/typora-user-images/image-20220724194636766.png)]

2.4、当然我们也可以通过让用户去选择企业名称和年份动态生成数据

每次选择企业名称后会重新调用我们的数据回显函数，此时带着具体的企业id和年份，动态查询出数据

    <div style="padding: 0px 33px;" class="static"><h3>产值分析</h3><el-select class="inputs"v-model="selectKey":multiple="false":filterable="true":remote="true":clearable="true"placeholder="请选择企业":remote-method="remoteMethod":loading="selectLoading"><el-optionv-for="index in options":key="index.id":label="index.enterpriseName":value="index.id"></el-option></el-select><el-date-picker class="selectYear"v-model="selectYear"type="year":clearable="false"placeholder="选择年"></el-date-picker><el-button type="primary" @click="reloadSerchDate" style="height: 32px;margin: auto 10px;">重置</el-button><el-button type="primary" @click="clickCharts" style="height: 32px;margin: auto 0;">生成</el-button></div>//method//每次选择企业名称后会重新调用我们的数据回显函数，此时带着具体的企业id和年份remoteMethod(query) {this.selectLoading=true;this.selectEnterprise(query);},

---------------------->此时我么就能够动态的去获取数据

Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）相关推荐

layui-tree实现Ajax异步请求后动态添加html元素
最近在弄一个产品分类管理,是一个树形菜单的形式,用的是layui-tree ,由于它并没有动态添加节点,所以只能自己刚了. 大概效果如左图具体的实现是当我鼠标移入"长袖"这个分类 ...
ajax异步处理代码实现,原生JS代码实现一个Ajax异步请求
异步加载的方式 (1) defer,只支持IE (2) async: (3) 创建script,插入到DOM中,加载完毕后callBack 实现ajax之前必须要创建一个 XMLHttpRequest ...
html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
ajax异步请求刷新layui表格
ajax异步请求刷新Layui表格数据今天遇到一个小问题,向后端传一个bean插入到数据库后,在前端页面同步显示.刚开始直接用from表单把数据传给后台进行插入操作,但是这样前端不能及时接收到后端完 ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
ajax异步请求实例
1. 问题分析用户管理显示页面:usermanagement.tpl(也可以说是MVC中的V,即视图) 用户管理数据发送页面:usermanagement.php(也可以说是MVC中的M,即模型) ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
ajax异步请求——form表单提交及表单序列化提交
ajax异步请求 AJAX介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),它不是一种新的编程语言,而是一种使用现有标准的新方 ...

Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）

Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）

一、效果图：（以每一个月的工业产值为例）

1、环比图

2、同比图

二、从Echart官网中导入我们需要的图表

2.1、导入图表信息，生成静态图表

2.2、通过ajax请求，从数据库获取将要展示的信息

2.3、对图表进行赋值操作

2.4、当然我们也可以通过让用户去选择企业名称和年份动态生成数据

Echarts 表格通过ajax异步请求实现动态赋值（分析同比环比的实现）相关推荐

最新文章

热门文章