vue echarts 多个图表后台数据填充到页面，并自适应

<el-tab-pane v-for="(statret, index) in STATFIGURELIST" :key="index" v-bind:label="statret.name" v-bind:name="statret.name"><div v-if="statret.data.whichshow == 'single'"><!--     单点图    --><div style="padding-right: 4%; padding-left: 4%"><div v-for=" (item, itemindex) in statret.data.items" :key="itemindex" style="width:100%; height: 400px"> <!-- 循环遍历环形图所需数据  --><p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">{{ item + statret.data.funcs[0] }} <!--   项目名称  --></p><div v-bind:id="'single' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'">{{ item + statret.data.funcs[0] }}</div></div></div></div><div v-else-if="statret.data.whichshow == 'trends'"><!--     趋势图    --><div style="padding-right: 4%; padding-left: 4%"><div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"style="width:100%; height: 400px"><pstyle="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">{{ item }}</p><div v-bind:id="'trends' + item" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.54 + 'px'"></div></div></div></div><div v-else-if="statret.data.whichshow == 'both'"><!--     单点图    --><div style="float: left; width: 30%; padding-left: 1%"><div v-for=" (item, itemindex) in statret.data.items" :key="itemindex"  style="width:100%; height: 400px"><p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">{{ item + statret.data.funcs[0] }}</p><div v-bind:id="'single' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.18 + 'px'"></div></div></div><!--     趋势图    --><div style="float: right; width: 63%; padding-right: 1%; padding-left: 4%"><div v-for=" (item, itemindex) in statret.data.items" :key="itemindex" style="width:100%; height: 400px"><p style="color: white;text-align: center;line-height: 16px;opacity: 1; font-size: 20px;font-weight: bold;">{{ item + statret.data.funcs[0] }}</p><div v-bind:id="'trends' + item + statret.data.funcs[0]" v-bind:style="'height: 360px; width: ' + (fulWidth - 300) * 0.38 + 'px'"></div></div></div></div>
</el-tab-pane>

       that.mycharts = []that.eles = []console.log(that.STATFIGURELIST)// 生成图// 通过判断趋势图和单点图来获取不同类型的数据for (let item in that.STATFIGURELIST) {if (that.STATFIGURELIST[item].data.whichshow == "trends") {   //  判断是否是趋势 // 仅处理趋势即可for (let subitem in that.STATFIGURELIST[item].data.items) {let ids = 'trends' + that.STATFIGURELIST[item].data.items[subitem] // trends项目名称 that.showData(ids,// trends项目名称  subitem,  //项目名称 that.STATFIGURELIST[item].data.rets.trends.type,// 统计图的类型 that.STATFIGURELIST[item].data.rets.trends.rets,//统计数据  that.STATFIGURELIST[item].data.funcs,// 数据类型 that.STATFIGURELIST[item].data.unit // Y轴最大值及最小值  Y轴单位  X轴单位 )}} else {// 需要区分single和trends两种处理for (let subitem in that.STATFIGURELIST[item].data.items) {let ids = that.STATFIGURELIST[item].data.items[subitem] + that.STATFIGURELIST[item].data.funcs[0]//项目名称  + 项目类型  el：尾煤投用率// step1. singleif ('single' in that.STATFIGURELIST[item].data.rets) {let single_ids = 'single' + ids //single + 项目类型  el：single尾煤投用率 that.showData(single_ids,//single + 项目类型  el：single尾煤投用率 subitem,//项目名称 that.STATFIGURELIST[item].data.rets.single.type,//统计图的类型that.STATFIGURELIST[item].data.rets.single.rets,//统计数据 that.STATFIGURELIST[item].data.funcs,//数据类型 that.STATFIGURELIST[item].data.unit//  Y轴单位  X轴单位 数据名称 el:自动/人工 )}// step2. trendsif ('trends' in that.STATFIGURELIST[item].data.rets) {let trends_ids = 'trends' + ids// trends + 项目名称  + 项目类型  el：trends尾煤投用率 that.showData(trends_ids,subitem,that.STATFIGURELIST[item].data.rets.trends.type,that.STATFIGURELIST[item].data.rets.trends.rets,that.STATFIGURELIST[item].data.funcs,that.STATFIGURELIST[item].data.unit)}}}}
// 处理自适应大小
//  获取所有的图表，改变屏幕大小重新加载图表 let listener = function() {for (let idx in that.mycharts) {let mychart = that.mycharts[idx] //获取所有的图表mychart.resize()//事件监听}}for (let indx in that.eles) {EleResize.on(that.eles[indx], listener)}showData(ids, subitem, charttype, data, funcs, unit){var ele = $("#" + ids)[0]var myChart = echarts.init(ele, 'westeros', { renderer: 'svg' })ele//dom 实例容器 westeros theme//主题 应用的主题  renderer: 'svg'  渲染模式 ，Canvas 更适合绘制图形元素数量较多的图表(数据量大导致)  SVG 内存占用更低 浏览器内置的缩放功能时不会模糊this.eles.push(ele) //将生成的图表推送到空数组中this.mycharts.push(myChart)//通过判断图表类型生成相应类型的图表if (charttype == "pie") {this.show_piechart(myChart, subitem, data, unit)} else if (charttype == "line"){this.show_linechart(myChart, subitem, data, unit)} else if (charttype == "bar"){this.show_barchart(myChart, subitem, data, funcs, unit)} else if (charttype == "gauge"){this.show_gaugechart(myChart, subitem, data, unit)}},//绘制图表//饼图show_piechart(myChart, subitem, data, unit) {let option = {tooltip: {  //提示框trigger: 'item' //触发类型  item 数据项图形触发、axis 坐标轴触发、 none 什么都不触发},series: [{type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: []}]}console.log(data)let chartdata = data[subitem][0] //option.series[0].data.push({value: chartdata[0], name: unit.z[0]})option.series[0].data.push({value: chartdata[1], name: unit.z[1]})myChart.setOption(option)},show_linechart(myChart, subitem, data, unit) {let option = {tooltip: {trigger: 'axis'},toolbox: {feature: { //工具配置项restore: {show: true},//配置项还原 是否显示该工具saveAsImage: {//保存为图片show: true,pixelRatio: 2,//保存图片的分辨率比例backgroundColor: 'rgba(128, 128, 128, 0)'}}},xAxis: {type: 'category',//坐标轴类型：value  数值轴（连续数据）、category 类目轴（可从series.data中取到x轴数据）、 time 时间轴、log 对数轴（对数数据）data: [],axisLabel: { //坐标轴内容formatter: "{value} "+unit.x, //数据 + 单位textStyle: {  //数轴刻度字体样式color: "white",fontSize: 14}}},yAxis: {type: 'value',splitLine: { //坐标轴分割线show: false},min: 'dataMin', //取最小值为最小刻度max: 'dataMax', //取最大值为最大刻度axisLabel: {formatter: "{value} "+unit.y,textStyle: {color: "white",fontSize: 14}}},series: [{data: [],type: 'line',smooth: true  //显示平滑曲线}]}let chartdata = data[0][subitem]for (let ind in chartdata) {option.xAxis.data.push(ind - chartdata.length + 1)option.series[0].data.push(chartdata[ind])}myChart.setOption(option)},//柱状图show_barchart(myChart, subitem, data, funcs, unit) {let option = {tooltip: { //触发类型  item 数据项图形触发、axis 坐标轴触发、 none 什么都不触发trigger: 'axis'},toolbox: { // 工具栏 导出图片、数据视图、动态类型切换、数据区域缩放、重置feature: { //工具配置项 可自定义工具按钮 名称只能以my开头restore: {show: true},saveAsImage: {//保存为图片show: true, //是否显示该工具pixelRatio: 2,//保存图片分辨率的比例backgroundColor: 'rgba(128, 128, 128, 0)'}}},xAxis: [{type: 'category',data: [],axisLabel: {formatter: "{value} "+unit.x,textStyle: {color: "white",fontSize: 14}}}],yAxis: [{min: 'dataMin', //取最小值为最小刻度max: 'dataMax', //取最大值为最大刻度axisLabel: {formatter: "{value} "+unit.y,textStyle: {color: "white",fontSize: 14}},splitLine: {show: false},type: 'value'}],series: []}if (data.length >= subitem) {for (let ind in data[0][0]) {option.xAxis[0].data.push(ind - data[0][0].length + 1)}for (let ind in funcs) {option.series.push({name: funcs[ind],type: 'bar',data: data[ind][subitem],markPoint: { //图标标注data: [//标注的数据数组{ type: 'max', name: 'Max' },{ type: 'min', name: 'Min' }]}})}}myChart.setOption(option)},//仪表盘show_gaugechart(myChart, subitem, data, unit) {let option = {series: [{type: 'gauge',max: unit.w.max,min: unit.w.min,axisLine: {lineStyle: {width: 30,color: [[0.3, '#67e0e3'],[0.7, '#37a2da'],[1, '#fd666d']]}},pointer: {//仪表盘指针itemStyle: { //指针样式color: 'auto'}},axisTick: {//坐标轴刻度相关设置distance: -30,//距离图形元素的距离length: 8,//坐标轴刻度长度lineStyle: {//刻度线样式color: '#fff',width: 2}},splitLine: {distance: -30,length: 30,lineStyle: {color: '#fff',width: 4}},axisLabel: {color: 'auto',distance: 40,fontSize: 20},detail: {//仪表盘详情，用于显示数据valueAnimation: true,//是否开启标签的数字动画formatter: '{value} ' + unit.y,'color: 'auto',fontSize: 14},data: []}]}console.log(data)option.series[0].data.push({value: data[subitem][0]})myChart.setOption(option)},

数据填充

1.从后台获取相应图表所需数据，在div中循环遍历数据
2,区分趋势和单点，获取相应的数据，通过参数传递数据，
3在showData中先将获取到的图表数据推送到空数组中，判断图标类型调用相应生成图表方法
在不同方法中通过不同的参数获取相应x轴，y轴，环形图data，仪表盘的数据，最后绘制相应数据的图表

自适应

通过循环获取所有图表，通过resize方法。屏幕大小改变重新加载图表

vue echarts 多个图表后台数据填充到页面，并自适应相关推荐

Echarts 折线图对接后台数据
项目场景:Echarts 折线图对接后台数据想要使用Echarts折线图来对接后台返回的数据,因为第一次使用这个图表库还不是很熟练,在对接数据时遇到了一些小问题问题描述后台返回的数据看起来也没什 ...
.net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】...
1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...
vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形
vue echarts 漏斗最近有一个需求漏斗统计,采用的echarts来实现需要实现如下效果最初版本旁边有描述,里面要有值: 第一步首先在项目里安装echarts; npm install ...
echarts js 删除框选数据_echarts同一页面中四个图表切换的js数据交互方法示例
需求: 点击tab页,切换四个不同的图表,ajax向后台请求数据,展示在四个不同的图表中. 其余的就不多说,直接上js代码了示例代码: $(function() { $("#heart&q ...
Vue Echarts 电子支付图表
项目结构,elepay components 和 model 上面两个完成后需要在status.ts 和 core.ts home.vue 和 home.vue 配置相应路径,这里不演示 echar ...
vue 饿了么模拟后台数据
1创建好项目后先模拟一下提供的json文件数据,为后面的工作做准备.首先把data.json放到与package.json平级目录下 (这是我的目录结构) 2.查看data.json数据结构分为 ...
后台数据展示到页面上的过程(vue)
1. 后台将数据接口上传至服务器可以使用swagger-ui文档进行前后端分离开发 2. 封装后台接口这里专门创建了一个api的文件夹写api接口方法,不是完全必要,但这么做后期维护起来比较方便. ...
17. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-前端主页面
这期开始主页面的编写,在src\views目录下创建主页面Home.vue,主要是管理系统页面布局,头部和左侧导航栏. 一.Home.vue 页面 1.1 Home.vue 页面html部分: < ...
vue+echarts实现数据展示大屏
简单介绍一个数据展示大屏.适用于中小型项目展示,只做学习交流. 技术栈前端:vue+echarts+axios+vue-router+less 后台:node+koa2+websocket 开发I ...

vue echarts 多个图表后台数据填充到页面，并自适应

vue echarts 多个图表后台数据填充到页面，并自适应相关推荐

最新文章

热门文章

vue echarts 多个图表 后台数据填充到页面，并自适应

vue echarts 多个图表 后台数据填充到页面，并自适应相关推荐

最新文章

热门文章

vue echarts 多个图表后台数据填充到页面，并自适应

vue echarts 多个图表后台数据填充到页面，并自适应相关推荐