echarts 控制图例显示隐藏以及自适应的方法

当屏幕大小发生变化，echarts没有进行自适应，我们可以使用它的resize()方法去解决。
当echarts的组件放在el-tabs里面的el-tab-pane切换时，echarts的自适应会跟不上，所以每次回到echarts重新调用resize()方法

<template><div><div @click="tableShowClick"> 5656</div><charts ref="charts" :charts-data="tableData"></charts></div>
</template>
<script>import Charts from "./charts";export default {methods:{// 当因为echarts 外的因素，并非el-tab-pane的切换，而是与echarts同一个层内其它的因素导致echarts需要重新进行自适应时的操作。tableShowClick(){this.tableShow = !this.tableShow;setTimeout(() => {this.$refs.charts.resize();}, 2);},}}
</script>

charts.vue

<template><div class="echarts"></div>
</template>
<script>
import echarts from "echarts";
// require('echarts/theme/macarons') // echarts theme
import resize from "../../../../dashboard/mixins/resize";
export default {mixins: [resize],props: {chartsData: {type: Object,default: () => ({}),},autoResize: {type: Boolean,default: true,},width: {type: String,default: "100%",},height: {type: String,default: "100%",},},data() {return {chart: null,data: [], series: [],};},beforeDestroy() {if (!this.chart) {return;}this.chart.dispose();this.chart = null;},watch: {chartsData: {handler(val) {this.initChart(val);},deep: true,}},methods: {initChart(data) {this.chart = echarts.init(this.$el);let option = {series: [// 单独控制某条柱状图的颜色{type: "bar",itemStyle: {normal: {color: function (params) {// console.log(params);if (params.name == new Date().getFullYear()) {return "red";} else {return "black";}},},},},]}// 避免重复促发控制图例显示隐藏的操作this.chart.off("legendselectchanged");// 控制图例显示隐藏this.chart.on("legendselectchanged", (e) => {var change = this.chart.getOption();let name = "";let yTitle = "";let selected = {};if (e.name.indexOf("水位") != -1) {name = "水位";if (e.selected[data.zTitle]) {this.$set(selected, data.qTitle, false);this.$set(selected, "10年水位均值", true);this.$set(selected, "10年流量均值", false);} else if (e.selected["10年水位均值"]) {this.$set(selected, data.zTitle, true);this.$set(selected, data.qTitle, false);this.$set(selected, "10年流量均值", false);}} else {name = "流量";if (e.selected[data.qTitle]) {this.$set(selected, data.zTitle, false);this.$set(selected, "10年水位均值", false);this.$set(selected, "10年流量均值", true);} else if (e.selected["10年流量均值"]) {this.$set(selected, data.zTitle, false);this.$set(selected, data.qTitle, true);this.$set(selected, "10年水位均值", false);}}switch (name) {case "水位":yTitle = "水位(m)";break;case "流量":yTitle = "流量(m³/s)";break;}this.chart.setOption({yAxis: { name: yTitle }, // 改变y轴的namelegend:{selected:selected  // 改变legend的selected状态}});});this.chart.clear();this.chart.setOption(option);}}
}
</script>
<style lang="scss" scoped>
.echarts {width: 100%;height: calc(100vh - 170px);  // 设定了高度那么echarts的自适应更顺滑，如果没必要使用resize()方法的话，直接设定该高度便可
}
</style>

echarts 控制图例显示隐藏以及自适应的方法相关推荐

纯css控制文字显示隐藏
纯css控制文字显示隐藏用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
百度地图添加标识物，并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
微信小程序（一）：小程序中使用EChart、控制EChart显示隐藏及数据懒加载
效果引入ECharts 参见 https://github.com/ecomfe/echarts-for-weixin 目录源码 pages/index/index.json {"usi ...
UE4-（蓝图）第十五课平视显示器（程序设置HUD显示内容并控制HUD显示隐藏）
实现从外部设置Text显示文本,要用到绑定功能. 一.从外部设置Text显示文本 1.在HUDWidget1的控件蓝图编辑器中,选中放置的Text,在细节中找到Content下的Text属性,右侧显示 ...
vue基础-实现控制元素显示隐藏 v-show与v-if,以及v-if-else
v-show与v-if作用一.v-show 控制元素显示, 通过display: none控制显示语法: v-show="变量或者表达式" 如果变量或者表达式为true, 会显 ...
如何将echarts图标的显示/隐藏按钮改成圆形
将显示/隐藏按钮从默认的方块改成原型效果图如下: legend: {itemHeight: 24,itemWidth: 24,data: [{name: 'aaa',icon: 'circle',} ...
css实现显示隐藏的5种方法
css实现显示隐藏是在写前端时经常遇见的问题,我根据自己的经验以及网上的方法,一共总结了5种.下面我分析一下它们各自的特点. 1. dispalay:none 这是最简单也是最容易想到的方法. .hi ...
使用vue控制元素显示隐藏
HTML代码: <div title="意向价格" v-if="showPrise"></div><div title=" ...
openlayers6【二十六】业务交互：Cluster 聚合标注控制，显示隐藏聚合标注
文章目录 1. 聚合标注常见业务需求交互 2. 实现效果 3. 核心代码 4. 完整代码 1. 聚合标注常见业务需求交互业务需求:在地图场景中,通常是多种业务场景(点位图标,边界图层,热力图层等)在 ...

echarts 控制图例显示隐藏以及自适应的方法

echarts 控制图例显示隐藏以及自适应的方法相关推荐

最新文章

热门文章