echarts toolbox工具栏设置自定义feature属性设置弹窗和全屏放大
1.如果是多个图表，那就创建一个公共组件（子组件），如下：
<template>
//自定义弹窗
<el-dialog
top="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： 自定义 id
this.dialogVisible = true
this.title = title
this.$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 = false
echart.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
里面的一致
我（也是第一次做这个，理解）的代码来源，网上的一些大佬所作的，我总结一下哈！！！！