echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大

1.如果是多个图表，那就创建一个公共组件（子组件），如下：

<template>
//自定义弹窗<el-dialogtop="150px"width="60%":modal="true":title="title"append-to-body:visible.sync="dialogVisible":modal-append-to-body="false":close-on-click-modal="false"><div id="dialogBox"></div></el-dialog>
</template><script>
export default {data () {return {dialogVisible: false,title: ''}},methods: {show(title, val, id) {// title：弹出框 标题说明// val：  父组件中 echart的option数据// id：   自定义 idthis.dialogVisible = truethis.title = titlethis.$nextTick(() => {let divBox = document.getElementById('dialogBox')if (divBox.children && divBox.children.length == 1) {divBox.removeChild(divBox.children[0])}let divChild = document.createElement('div')divChild.setAttribute('id', id)divBox.appendChild(divChild)let echart = this.$echarts.init(document.getElementById(id))val.toolbox[0].feature.myTool.show = falseechart.setOption(val)//图表大小自适应window.addEventListener('resize', () => {echart.resize()})})}},
}
</script><style>#dialogBox>div {width: 100%;height: 500px;}
</style>

removeChild方法请参考：https://www.runoob.com/jsref/met-node-removechild.html

createElement方法请参考：https://www.runoob.com/jsref/met-document-createelement.html

2.父组件的代码如下：

//这是的路径是你子组件文件的路径
<template><echartFull ref="echartFull" />
</template>
import echartFull from "@/views/echartFull";
//映射子组件
components: { echartFull }，

3.echart图表如下：

drawLine() {var myChart = document.getElementById("myChart");var myChart = echarts.init(myChart);var option;option = {grid: {top: 80,left: 50,right: 140,},tooltip: {trigger: "axis",axisPointer: { type: "cross" },},title: {text: "住院药品统计(万元)",textStyle: {align: "center",fontSize: "20",},top: "5%",left: "center",},legend: {orient: "vertical",right: 10,top: 200,},toolbox: {show: true,feature: {myTool: {show: true,title: "放大查看",//阿里图标库直接使用symbol引入自动生成路径 ，看path路径icon: "path://M184 789.088L389.309 583.78a8 8 0 0 1 11.313 0l39.598 39.598a8 8 0 0 1 0 11.313L234.912 840H384c8.837 0 16 7.163 16 16v48a8 8 0 0 1-8 8H144c-17.673 0-32-14.327-32-32V632a8 8 0 0 1 8-8h48c8.837 0 16 7.163 16 16v149.088z m656-554.422L634.569 440.098a8 8 0 0 1-11.314 0L583.657 400.5a8 8 0 0 1 0-11.314L788.843 184H640c-8.837 0-16-7.163-16-16v-48a8 8 0 0 1 8-8h248c17.673 0 32 14.327 32 32v248a8 8 0 0 1-8 8h-48c-8.837 0-16-7.163-16-16V234.666z",// 这里是全屏放大// onclick: (e) => {//   const element = document.getElementById("myChart");//   if (element.requestFullScreen) {//     // HTML W3C 提议//     element.requestFullScreen();//   } else if (element.msRequestFullscreen) {//     // IE11//     element.msRequestFullScreen();//   } else if (element.webkitRequestFullScreen) {//     // Webkit (works in Safari5.1 and Chrome 15)//     element.webkitRequestFullScreen();//   } else if (element.mozRequestFullScreen) {//     // Firefox (works in nightly)//     element.mozRequestFullScreen();//   }//   // 退出全屏//   if (element.requestFullScreen) {//     document.exitFullscreen();//   } else if (element.msRequestFullScreen) {//     document.msExitFullscreen();//   } else if (element.webkitRequestFullScreen) {//     document.webkitCancelFullScreen();//   } else if (element.mozRequestFullScreen) {//     document.mozCancelFullScreen();//   }// },// 弹框onclick: (e) => {// console.log(e)this.$refs.echartFull.show("", e.getOption(), "id");},},saveAsImage: {},dataView: { readOnly: false },restore: {},},},xAxis: [{type: "category",data: ["屈光不正","尿毒症","冠状动脉粥样硬化性心脏病","健康查体","冠状动脉性心脏病","脑梗死","结膜炎","干眼症","白内障","2型糖尿病",],},],yAxis: [{type: "value",min: 0,max: 5000,position: "left",},{type: "value",name: "单位(个)",min: 0,max: 120000,position: "right",},],series: [{name: "金额",type: "bar",yAxisIndex: 0,data: [4008.02, 1596.74, 1445.02, 1201.45, 998.27, 638.53, 598.69,554.44, 525.76, 492.97,],itemStyle: {normal: {color: function (params) {var color = ["#ffa2d8","#ffd29e","#356aff","#fd6a00","#00ffff","#00d5ff","#d9a3ff","#ff9fd4","#ffd39e","#ffff9e",];return color[params.dataIndex];},},},},{name: "数量",type: "line",smooth: true,yAxisIndex: 1,data: [25218, 18194, 53538, 111258, 19916, 16243, 38054, 23173, 12259,16011,],},],};// 根据宽度大小自适应window.addEventListener("resize", function () {myChart.resize();});option && myChart.setOption(option);},

注意：
4.你可能遇到的问题
如果你出现了以上错误，那么请检查你的toolbox下的feature里面自定义的方法名称（我的是myTool）是不是和子组件的
val.toolbox[0].feature.myTool.show = false
里面的一致

我（也是第一次做这个，理解）的代码来源，网上的一些大佬所作的，我总结一下哈！！！！

echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大相关推荐

html文件如何设置为桌面壁纸,怎样把文件里的图片设置为桌面背景时全部是全屏图？最好详细一点的。...
怎样把文件里的图片设置为桌面背景时全部是全屏图?最好详细一点的.以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎样把文 ...
html的text滚条设置,textarea 滚动条属性设置
scrollbar属性.样式详解 1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置以上 ...
html5中音频、视频标签、自定义播放器常用属性及方法、全屏操作、新增属性兼容问题
多媒体标签: 音频标签audio: <audio src="音频文件的URL"></audio><!-- audio标签需要controls控件才可以 ...
w10投影全屏设置_win10如何让投影仪铺满全屏
win10如何让投影仪铺满全屏?很多用户使用投影仪没有铺满,上下有空隙,不是全屏显示的,不知如何设置的用户,接下来就由小编教大家win10系统投影仪铺满全屏的设置方法吧. win10如何让投影仪铺满全 ...
【Android】Android 设置Activity窗体不显示标题和全屏显示
[一]Android 设置Activity窗体不显示标题 android:theme="@android:style/Theme.NoTitleBar" 1 <activi ...
echarts 弹出放大_Echarts图标增加全屏/放大功能
需求描述: 客户爸爸在看某个echarts图表时,图标的数据很多,字看着很小,客户爸爸希望能双击放大某个图表.如下面这个图表字太小,太密. image.png 解决方式: 网上有不少方式是用Echar ...
Android 节操视频播放器jiecaovideoplayer自定义播放音频使用：屏蔽全屏按钮，增加倒计时，当前时间/总时间
一.屏蔽全屏按钮找到JCVideoPlayerStandard.java文件中的代码: private void fixAudio() {if (SrcType.equalsIgnoreCase(& ...
Echarts - legend、tooltip、xAxis属性设置
目录 legend: tooltip: xAxis: legend: legend: {show: true, //是否显示type: "plain", // 图例的类型 'pla ...
java 属性自定义配置,将自定义FXML属性设置为自定义javafx组件的参数
我创建了自定义组件TableBlock . 它由Label和TableView组成 . 例如,TableView可以有1到1000行 . 行数由FXML文件中的参数"rowsFromPref ...

echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大

注意：
4.你可能遇到的问题
如果你出现了以上错误，那么请检查你的toolbox下的feature里面自定义的方法名称（我的是myTool）是不是和子组件的
val.toolbox[0].feature.myTool.show = false
里面的一致

echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大相关推荐

最新文章

热门文章

echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大

注意： 4.你可能遇到的问题 如果你出现了以上错误，那么请检查你的toolbox下的feature里面自定义的方法名称（我的是myTool）是不是和子组件的 val.toolbox[0].feature.myTool.show = false 里面的一致

echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大相关推荐

最新文章

热门文章

注意：
4.你可能遇到的问题
如果你出现了以上错误，那么请检查你的toolbox下的feature里面自定义的方法名称（我的是myTool）是不是和子组件的
val.toolbox[0].feature.myTool.show = false
里面的一致