Echarts chart adds zoom function
<template>
<div>
<div
class="chart"
id="chart"
style="width: 100% !important; min-width: 200px; height: 400px"
></div>
<div id="fullScreenMask">
<!-- 点击任意区域取消放大 -->
<i
class="el-icon-close"
@click="cancelFull()"
style="
position: absolute;
top: 12%;
right: 12%;
color: #fff;
font-size: 36px;
z-index: 12;
cursor: pointer;
"
></i>
<div class="echarts" id="fullScreen"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
option: {},
chartScreen :null
};
},
methods: {
getdata() {
this.option = {
title: {
text: "折线图堆叠",
},
tooltip: {
trigger: "axis",
},
legend: {
data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
toolbox: {
show: true,
left: "center",
top: "28px",
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
saveAsImage: { show: true },
myButtons: {
//自定义按钮
show: true, //是否显示
title: "查看大图", //鼠标移动上去显示的文字
icon:
"path://M928.842245 512.091074c0-5.006014-0.846274-9.193383-1.086751-9.691733-0.182149-2.480494-1.028423-7.001461-1.815345-9.374508-0.210801-0.590448-0.484024-1.209548-0.724501-1.799996-0.424672-1.360997-0.876973-2.691295-1.390673-3.749394-76.871785-168.137395-242.376213-281.144168-411.782507-281.144168-169.375595 0-334.865697 112.902396-411.388535 280.130072-0.921999 1.815345-1.572822 3.553942-1.981121 5.066389-0.181125 0.49835-0.39295 0.967024-0.558725 1.406023-1.512447 4.430916-1.542122 7.514137-1.421372 6.712889-0.710175 3.251044-1.360997 9.722432-1.360997 9.722432-0.181125 1.949398-0.181125 3.50687 0.030699 5.442966 0 0 0.649799 5.65479 0.968048 6.80294 0.090051 1.602498 0.483001 3.931542 0.951675 6.048763l-0.030699 0c0.408299 1.814322 0.968048 3.568269 1.738597 5.291516 0.393973 1.330298 0.862647 2.570545 1.270946 3.507894 76.976162 168.166047 242.436588 281.20352 411.781484 281.20352 169.436994 0 334.941422-112.945375 410.936233-279.328823 1.177825-2.177596 1.935072-4.233418 2.448772-6.018064 0.2415-0.543376 0.454348-1.027399 0.604774-1.511423 1.331321-3.872191 1.602498-7.227612 1.481747-7.227612l-0.028653 0.029676C928.027693 520.921183 928.842245 516.89959 928.842245 512.091074zM872.717993 514.146896c-0.029676 0.121773-0.091074 0.272199-0.151449 0.393973-0.090051 0.36225-0.240477 0.785899-0.332575 1.209548-68.403926 147.420561-212.830293 246.337431-360.191502 246.337431-146.997935 0-291.168476-98.642624-360.252901-246.578931-0.166799-0.5137-0.287549-0.998747-0.468674-1.481747-0.030699-0.484024-0.12075-0.876973-0.150426-1.150196-0.060375-0.300852-0.12075-0.724501-0.166799-1.088798l0-0.3776c0.166799-0.620124 0.286526-1.239224 0.347924-1.919722 0.12075-0.36225 0.211824-0.710175 0.347924-1.103124C220.132094 360.89042 364.680235 261.928524 512.041444 261.928524c147.420561 0 291.940049 99.051947 360.161826 246.322082 0.060375 0.287549 0.121773 0.530073 0.212848 0.726547 0.060375 0.2415 0.119727 0.484024 0.240477 0.740874 0.151449 1.104147 0.272199 2.192945 0.423649 2.736321C872.899118 513.028423 872.809067 513.572822 872.717993 514.146896zM512.041444 373.060601c-76.598562 0-138.954749 62.325487-138.954749 138.939399 0 76.598562 62.356187 138.954749 138.954749 138.954749 76.598562 0 138.954749-62.356187 138.954749-138.954749C650.996193 435.386088 588.640006 373.060601 512.041444 373.060601zM512.041444 595.372849c-45.935192 0-83.371826-37.406958-83.371826-83.371826 0-45.950542 37.436634-83.356476 83.371826-83.356476 45.964868 0 83.373873 37.406958 83.373873 83.356476C595.414293 557.965891 558.006312 595.372849 512.041444 595.372849z", //图标
option: {},
onclick: function (obj) {
//点击事件,这里的obj是chart的option信息
that.chartsClick(obj.option.data, obj.option.item);
},
},
},
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
},
yAxis: {
type: "value",
},
series: [
{
name: "邮件营销",
type: "line",
stack: "总量",
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: "联盟广告",
type: "line",
stack: "总量",
data: [220, 182, 191, 234, 290, 330, 310],
},
{
name: "视频广告",
type: "line",
stack: "总量",
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: "直接访问",
type: "line",
stack: "总量",
data: [320, 332, 301, 334, 390, 330, 320],
},
{
name: "搜索引擎",
type: "line",
stack: "总量",
data: [820, 932, 901, 934, 1290, 1330, 1320],
},
],
};
let myChart = this.$echarts.init(document.getElementById("chart"));
myChart.setOption(this.option, true);
},
getChartData(ele, item) {
return {};
},
// 还原
cancelFull() {
if ($("#fullScreenMask").css("display") === "block") {
$("#fullScreenMask").hide();
}
},
// 点击放大图表
async chartsClick(item, ele) {
if ($("#fullScreenMask").css("display") === "block") {
$("#fullScreenMask").hide();
this.chartScreen = null;
return false;
}
const chartData = await this.getChartData(ele, item);
$("#fullScreenMask").show();
this.chartScreen = this.$echarts.init(
document.getElementById("fullScreen")
);
this.chartScreen.setOption(chartData);
},
},
mounted(){
this.getdata();
}
};
</script>