Offer to come, dig friends take it! I am participating in the 2022 Spring Recruit Punch card activity. Click here for details.
The implementation of this feature is a further modification of the common configuration for vue+ECharts drawing. First of all, to achieve full-screen enlargement effect of the chart, I summarized that there are two ways to achieve:
- Method 1: use Element. RequestFullscreen () implementation
- Method 2: use a popover to redraw the full screen to achieve
Method 1
1. Customize the full-screen tool myFull
Echarts does not have a built-in full-screen tool, but supports custom tools, so we can customize a full-screen zoom tool. We just need to pay attention to the custom tool name, which starts with my, the specific configuration is as follows:
toolbox: {
feature: {
dataZoom: { yAxisIndex: 'none' }, // Data area scaling
restore: { show: true }, / / reset
saveAsImage: { show: true }, // Export the image
myFull: { / / full screen
show: true.title: 'full'.icon: 'path: / / M432.45, c0 595.444, 2.177-4.661, 6.82-11.305, 6.82-6.475 c, 0-11.306-4.567-11.306-6.82 s4.852-6.812, 11.306-6.812 C427.84 1588632, 432.452, 593.191, 432.45, 595.444 L432.45, 595.444 z M421.155, 589.876 c to 3.009, 0-5.448, 2.495, 5.448, 5.572 s2.439, 5.572, 5.448, 5.572 c3.01, 0,5.449-2.495, 5.449 5.572 C426.604, 592.371 , 424.165, 589.876, 421.155, 589.876 L421.155, 589.876 z M421.146, 591.891 c to 1.916, 0-3.47, 1.589, 3.47, 3.549 c0, 1.959, 1.554, 3.548, 3.47, 3.548 s3.469-1.589, 3.469 3.548 C424.614, 593.479, 4 23.062, 591.891, 421.146, 591.891 L421.146 zM421.146 591.891, 591.891 '.onclick: (e) = > {
// Full screen view
if (domName.requestFullScreen) { // HTML W3C proposal
domName.requestFullScreen()
} else if (domName.msRequestFullscreen) { // IE11
domName.msRequestFullScreen()
} else if (domName.webkitRequestFullScreen) { // Webkit
domName.webkitRequestFullScreen()
} else if (domName.mozRequestFullScreen) { // Firefox
domName.mozRequestFullScreen()
}
// Exit full screen
if (domName.requestFullScreen) {
document.exitFullscreen()
} else if (domName.msRequestFullScreen) {
document.msExitFullscreen()
} else if (domName.webkitRequestFullScreen) {
document.webkitCancelFullScreen()
} else if (domName.mozRequestFullScreen) {
document.mozCancelFullScreen()
}
}
}
}
},
Copy the code2. Existing problems
The browser looks like this:
You can see that there are several small ICONS in the upper right corner, and the last one is the full screen tool.
As you can see from the image above, the full screen effect is available, but there are still two problems:
- The background color is black. I want white for the background
- The graph is not full screen adaptive, I want full screen adaptive
Problem solving
For the first point, I accidentally realized that I only needed to change the background color of the chart container. I added a white background to the chart container as follows:
<template>
<div class="app-container">
<div id="main" style="width:600px; height:600px; margin:0 auto; background-color:#fff;" />
</div>
</template>
Copy the codeThe browser looks like this:
Click the little Eyes icon again and it looks like this:
As you can see from the image above, the background has changed to white after full screen rendering. As you can see, just by changing the rendering effect in the diagram container, the full-screen effect will change as well.
For the second point, it is obvious that the full-screen diagram does not have adaptive screen size, so we just need to add adaptive screen size. First, we need to introduce an adaptive tool, with the following code:
import { EleResize } from '@/utils/esresize'// The graph is adaptive
Copy the codeSecond, use adaptive in the drawing configuration as follows:
// The graph is adaptive
const listener = function() {
myChart.resize()
}
EleResize.on(domName, listener)
Copy the codeClick the full-screen Preview tool and it looks like this:
In this article vue how to use ECharts to draw and achieve adaptive
4. Final effect display
5. Complete code
<template>
<div class="app-container">
<! -- Initial diagram -->
<div id="main" style="width:600px; height:600px; margin:0 auto; background-color:#fff;" />
</div>
</template>
<script>
import { EleResize } from '@/utils/esresize'// The graph is adaptive
export default {
data() {
return {
dialogVisible: false}},mounted() {
// Start drawing
this.initChart(document.getElementById('main'))},methods: {
initChart(domName) {
var myChart = this.$echarts.init(domName)
// The graph is adaptive
const listener = function() {
myChart.resize()
}
EleResize.on(domName, listener)
var option = {
title: {
text: 'ECharts instance'
},
toolbox: {
feature: {
dataZoom: { yAxisIndex: 'none' }, // Data area scaling
restore: { show: true }, / / reset
saveAsImage: { show: true }, // Export the image
myFull: { / / full screen
show: true.title: 'full'.icon: 'path: / / M432.45, c0 595.444, 2.177-4.661, 6.82-11.305, 6.82-6.475 c, 0-11.306-4.567-11.306-6.82 s4.852-6.812, 11.306-6.812 C427.84 1588632, 432.452, 593.191, 432.45, 595.444 L432.45, 595.444 z M421.155, 589.876 c to 3.009, 0-5.448, 2.495, 5.448, 5.572 s2.439, 5.572, 5.448, 5.572 c3.01, 0,5.449-2.495, 5.449 5.572 C426.604, 592.371 , 424.165, 589.876, 421.155, 589.876 L421.155, 589.876 z M421.146, 591.891 c to 1.916, 0-3.47, 1.589, 3.47, 3.549 c0, 1.959, 1.554, 3.548, 3.47, 3.548 s3.469-1.589, 3.469 3.548 C424.614, 593.479, 4 23.062, 591.891, 421.146, 591.891 L421.146 zM421.146 591.891, 591.891 '.onclick: (e) = > {
// Full screen view
if (domName.requestFullScreen) { // HTML W3C proposal
domName.requestFullScreen()
} else if (domName.msRequestFullscreen) { // IE11
domName.msRequestFullScreen()
} else if (domName.webkitRequestFullScreen) { // Webkit
domName.webkitRequestFullScreen()
} else if (domName.mozRequestFullScreen) { // Firefox
domName.mozRequestFullScreen()
}
// Exit full screen
if (domName.requestFullScreen) {
document.exitFullscreen()
} else if (domName.msRequestFullScreen) {
document.msExitFullscreen()
} else if (domName.webkitRequestFullScreen) {
document.webkitCancelFullScreen()
} else if (domName.mozRequestFullScreen) {
document.mozCancelFullScreen()
}
}
}
}
},
legend: {
data: ['sales of 1111111111111111111111'.'sales of 22222222222222222222'].orient: 'horizontal'.'formatter': function(params) {
if (params.length > 10) {
var p1 = params.slice(0.10)
var p2 = params.slice(10)
return p1 + '\n' + p2
} else {
return params
}
}
},
xAxis: {
data: ['shirt 111111111'.'Sweater 1111111111111'.'Chiffon shirt 111111111'.Pants' 111111111 '.'High heels 11111111'.Socks' 1111111111 '].axisLabel: { // The axis label
interval: 0.Rotate: 45, // The Angle from -90 to 90 is 0 by default
margin: 12.textStyle: {
fontWeight: 'bolder'.color: '# 000000'
},
// The axis scale label is wrapped
formatter: function(params) {
var newParamsName = ' ' // The final concatenated string
var paramsNameNumber = params.length // The number of actual tags
var provideNumber = 8 // The number of words per line
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // To wrap a line, display a few lines, rounded up
/** * Checks whether the number of labels is greater than the specified number. If yes, line break is performed. If no, equal to or less than, the original label */ is returned
// The condition is equivalent to rowNumber>1
if (paramsNameNumber > provideNumber) {
/** loop through each line,p for line */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ' ' // Represents each truncated string
var start = p * provideNumber // Start intercepting position
var end = start + provideNumber // End the intercept position
// The index value of the last row is handled specifically here
if (p === rowNumber - 1) {
// The last time no line breaks
tempStr = params.substring(start, paramsNameNumber)
} else {
// Concatenate the string each time and wrap it
tempStr = params.substring(start, end) + '\n'
}
newParamsName += tempStr // The resultant string}}else {
// Assign the value of the old label to the new label
newParamsName = params
}
// Return the final string
return newParamsName
}
}
},
yAxis: [{type: 'value'.name: 'yu \ n main enemy no \ n \ n \ n the \ n \ n a big handsome than \ n \ n \ n \ n \ n I ha ha ha \ n \ n \ n \ n \ n \ n his forehead!!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.50.0.0].align: 'center'
},
position: 'left'.axisLine: {
show: true.lineStyle: {
color: 'blue'}},axisLabel: {
formatter: '{value}'}}, {type: 'value'.name: 'you're \ n \ n \ n their bearing \ n \ n \ n I know is \ n \ n space main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.0.0.60].align: 'center'
},
position: 'right'.axisLine: {
show: true.lineStyle: {
color: '#91cc75'}},axisLabel: {
formatter: function(value) { // Scientific counting displays labels
var res = value.toString()
var numN1 = 0
var numN2 = 1
var num1 = 0
var num2 = 0
var t1 = 1
for (var k = 0; k < res.length; k++) {
if (res[k] === '. ') { t1 = 0 }
if (t1) { num1++ } else { num2++ }
}
if (Math.abs(value) < 1 && res.length > 4) {
for (var i = 2; i < res.length; i++) {
if (res[i] === '0') {
numN2++
} else if (res[i] === '. ') {
continue
} else {
break}}var v = parseFloat(value)
v = v * Math.pow(10, numN2)
return v.toString() + 'e-' + numN2
} else if (num1 > 4) {
if (res[0= = =The '-') {
numN1 = num1 - 2
} else {
numN1 = num1 - 1
}
v = parseFloat(value)
v = v / Math.pow(10, numN1)
if (num2 > 4) { v = v.toFixed(4)}return v.toString() + 'e' + numN1
} else {
return parseFloat(value)
}
}
}
}
],
series: [{name: 'sales of 1111111111111111111111'.type: 'bar'.yAxisIndex: 0.// Specify the first y axis
data: [5.20.36.10.10.20] {},name: 'sales of 22222222222222222222'.type: 'bar'.yAxisIndex: 1.// Specify the second Y-axis
data: [15000.25000.40000.50000.150000.300000]
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
Copy the codeMethod 2
1. Add a full-screen pop-up box
:fullscreen=”true” is the built-in full-screen property of the component, screenHeight is the height of the document display area of the browser window (to achieve height adaptation of the chart), the code is as follows:
<! -- Full screen popup --><el-dialog
title="Full screen"
:visible.sync="dialogVisible"
:fullscreen="true"
center
>
<div id="main1" ref="fullChart" :style="'width:100%; height:' + (screenHeight - 110) + 'px'" />
</el-dialog>
Copy the codedata() {
return {
dialogVisible: false.screenHeight: window.innerHeight
}
},
Copy the code2. Full-screen charts are highly adaptive
A highly adaptive implementation of the graph is mainly to monitor screenHeight changes to achieve the following code:
// Monitor screenHeight to change the size of the fullscreen container
watch: {
screenHeight(val) {
this.screenHeight = val
}
},
mounted() {
// Start drawing
this.initChart(document.getElementById('main'))
// Get the browser window size
window.onresize = () = > {
return (() = > {
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight
})()
}
},
Copy the code3. Customize the echarts tool
toolbox: {
feature: {
dataZoom: { yAxisIndex: 'none' }, // Data area scaling
restore: { show: true }, / / reset
saveAsImage: { show: true }, // Export the image
myFull: { / / full screen
show: true.title: 'full'.icon: 'path: / / M432.45, c0 595.444, 2.177-4.661, 6.82-11.305, 6.82-6.475 c, 0-11.306-4.567-11.306-6.82 s4.852-6.812, 11.306-6.812 C427.84 1588632, 432.452, 593.191, 432.45, 595.444 L432.45, 595.444 z M421.155, 589.876 c to 3.009, 0-5.448, 2.495, 5.448, 5.572 s2.439, 5.572, 5.448, 5.572 c3.01, 0,5.449-2.495, 5.449 5.572 C426.604, 592.371 , 424.165, 589.876, 421.155, 589.876 L421.155, 589.876 z M421.146, 591.891 c to 1.916, 0-3.47, 1.589, 3.47, 3.549 c0, 1.959, 1.554, 3.548, 3.47, 3.548 s3.469-1.589, 3.469 3.548 C424.614, 593.479, 4 23.062, 591.891, 421.146, 591.891 L421.146 zM421.146 591.891, 591.891 '.onclick: () = > {
// Full screen view
this.dialogVisible = true// Open the popover
this.$nextTick(() = > {
const chartFul = this.$refs.fullChart
if (chartFul) {
this.initChart(document.getElementById('main1'))/ / drawing}})}}}},Copy the code4. Effect display
5. Complete code
<template>
<div class="app-container">
<! -- Initial diagram -->
<div id="main" style="width:600px; height:600px; margin:0 auto; background-color:#fff;" />
<! -- Full screen popup -->
<el-dialog
title="Full screen"
:visible.sync="dialogVisible"
:fullscreen="true"
center
>
<div id="main1" ref="fullChart" :style="'width:100%; height:' + (screenHeight - 110) + 'px'" />
</el-dialog>
</div>
</template>
<script>
import { EleResize } from '@/utils/esresize'// The graph is adaptive
export default {
data() {
return {
dialogVisible: false.screenHeight: window.innerHeight
}
},
// Monitor screenHeight to change the size of the fullscreen container
watch: {
screenHeight(val) {
this.screenHeight = val
}
},
mounted() {
// Start drawing
this.initChart(document.getElementById('main'))
// Get the browser window size
window.onresize = () = > {
return (() = > {
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight
})()
}
},
methods: {
initChart(domName) {
var myChart = this.$echarts.init(domName)
// The graph is adaptive
const listener = function() {
myChart.resize()
}
EleResize.on(domName, listener)
var option = {
title: {
text: 'ECharts instance'
},
toolbox: {
feature: {
dataZoom: { yAxisIndex: 'none' }, // Data area scaling
restore: { show: true }, / / reset
saveAsImage: { show: true }, // Export the image
myFull: { / / full screen
show: true.title: 'full'.icon: 'path: / / M432.45, c0 595.444, 2.177-4.661, 6.82-11.305, 6.82-6.475 c, 0-11.306-4.567-11.306-6.82 s4.852-6.812, 11.306-6.812 C427.84 1588632, 432.452, 593.191, 432.45, 595.444 L432.45, 595.444 z M421.155, 589.876 c to 3.009, 0-5.448, 2.495, 5.448, 5.572 s2.439, 5.572, 5.448, 5.572 c3.01, 0,5.449-2.495, 5.449 5.572 C426.604, 592.371 , 424.165, 589.876, 421.155, 589.876 L421.155, 589.876 z M421.146, 591.891 c to 1.916, 0-3.47, 1.589, 3.47, 3.549 c0, 1.959, 1.554, 3.548, 3.47, 3.548 s3.469-1.589, 3.469 3.548 C424.614, 593.479, 4 23.062, 591.891, 421.146, 591.891 L421.146 zM421.146 591.891, 591.891 '.onclick: () = > {
// Full screen view
this.dialogVisible = true// Open the popover
this.$nextTick(() = > {
const chartFul = this.$refs.fullChart
if (chartFul) {
this.initChart(document.getElementById('main1'))/ / drawing}})}}}},legend: {
data: ['sales of 1111111111111111111111'.'sales of 22222222222222222222'].orient: 'horizontal'.'formatter': function(params) {
if (params.length > 10) {
var p1 = params.slice(0.10)
var p2 = params.slice(10)
return p1 + '\n' + p2
} else {
return params
}
}
},
xAxis: {
data: ['shirt 111111111'.'Sweater 1111111111111'.'Chiffon shirt 111111111'.Pants' 111111111 '.'High heels 11111111'.Socks' 1111111111 '].axisLabel: { // The axis label
interval: 0.Rotate: 45, // The Angle from -90 to 90 is 0 by default
margin: 12.textStyle: {
fontWeight: 'bolder'.color: '# 000000'
},
// The axis scale label is wrapped
formatter: function(params) {
var newParamsName = ' ' // The final concatenated string
var paramsNameNumber = params.length // The number of actual tags
var provideNumber = 8 // The number of words per line
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // To wrap a line, display a few lines, rounded up
/** * Checks whether the number of labels is greater than the specified number. If yes, line break is performed. If no, equal to or less than, the original label */ is returned
// The condition is equivalent to rowNumber>1
if (paramsNameNumber > provideNumber) {
/** loop through each line,p for line */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ' ' // Represents each truncated string
var start = p * provideNumber // Start intercepting position
var end = start + provideNumber // End the intercept position
// The index value of the last row is handled specifically here
if (p === rowNumber - 1) {
// The last time no line breaks
tempStr = params.substring(start, paramsNameNumber)
} else {
// Concatenate the string each time and wrap it
tempStr = params.substring(start, end) + '\n'
}
newParamsName += tempStr // The resultant string}}else {
// Assign the value of the old label to the new label
newParamsName = params
}
// Return the final string
return newParamsName
}
}
},
yAxis: [{type: 'value'.name: 'yu \ n main enemy no \ n \ n \ n the \ n \ n a big handsome than \ n \ n \ n \ n \ n I ha ha ha \ n \ n \ n \ n \ n \ n his forehead!!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.50.0.0].align: 'center'
},
position: 'left'.axisLine: {
show: true.lineStyle: {
color: 'blue'}},axisLabel: {
formatter: '{value}'}}, {type: 'value'.name: 'you're \ n \ n \ n their bearing \ n \ n \ n I know is \ n \ n space main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.0.0.60].align: 'center'
},
position: 'right'.axisLine: {
show: true.lineStyle: {
color: '#91cc75'}},axisLabel: {
formatter: function(value) { // Scientific counting displays labels
var res = value.toString()
var numN1 = 0
var numN2 = 1
var num1 = 0
var num2 = 0
var t1 = 1
for (var k = 0; k < res.length; k++) {
if (res[k] === '. ') { t1 = 0 }
if (t1) { num1++ } else { num2++ }
}
if (Math.abs(value) < 1 && res.length > 4) {
for (var i = 2; i < res.length; i++) {
if (res[i] === '0') {
numN2++
} else if (res[i] === '. ') {
continue
} else {
break}}var v = parseFloat(value)
v = v * Math.pow(10, numN2)
return v.toString() + 'e-' + numN2
} else if (num1 > 4) {
if (res[0= = =The '-') {
numN1 = num1 - 2
} else {
numN1 = num1 - 1
}
v = parseFloat(value)
v = v / Math.pow(10, numN1)
if (num2 > 4) { v = v.toFixed(4)}return v.toString() + 'e' + numN1
} else {
return parseFloat(value)
}
}
}
}
],
series: [{name: 'sales of 1111111111111111111111'.type: 'bar'.yAxisIndex: 0.// Specify the first y axis
data: [5.20.36.10.10.20] {},name: 'sales of 22222222222222222222'.type: 'bar'.yAxisIndex: 1.// Specify the second Y-axis
data: [15000.25000.40000.50000.150000.300000]
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
Copy the codeMethods 3
1. Add a full-screen button
Add an icon button and bind a click event fullSc() as follows:
<i
class="el-icon-rank"
style="font-size: 22px; transform: rotate(45deg); color:rgb(135 135 135); cursor: pointer; position: absolute; top: 5px; right: 105px; z-index: 5;"
title="Full screen"
@click="fullSc()"
/>
Copy the code2. Click Draw
// Click the full-screen icon to draw a picture
fullSc() {
this.dialogVisible = true
this.$nextTick(() = > {
const chartFul = this.$refs.fullChart
if (chartFul) {
this.initChart(document.getElementById('main1'))/ / drawing}})}Copy the code3. Render effect
4. Full-screen effect display
5. Complete code
<template>
<div class="app-container">
<div style="width:600px; height:600px; margin:0 auto; background-color:#fff; position:relative">
<! -- Full screen icon button -->
<i
class="el-icon-rank"
style="font-size: 22px; transform: rotate(45deg); color:rgb(135 135 135); cursor: pointer; position: absolute; top: 5px; right: 105px; z-index: 5;"
title="Full screen"
@click="fullSc()"
/>
<! -- Diagram container -->
<div id="main" style="width:100%; height:100%;" />
</div>
<! -- Full screen popup -->
<el-dialog
title="Full screen"
:visible.sync="dialogVisible"
:fullscreen="true"
center
>
<div id="main1" ref="fullChart" :style="'width:100%; height:' + (screenHeight - 110) + 'px'" />
</el-dialog>
</div>
</template>
<script>
import { EleResize } from '@/utils/esresize'// The graph is adaptive
export default {
data() {
return {
dialogVisible: false.screenHeight: window.innerHeight
}
},
// Monitor screenHeight to change the size of the fullscreen container
watch: {
screenHeight(val) {
this.screenHeight = val
}
},
mounted() {
// Start drawing
this.initChart(document.getElementById('main'))
// Get the browser window size
window.onresize = () = > {
return (() = > {
window.screenHeight = window.innerHeight
this.screenHeight = window.screenHeight
})()
}
},
methods: {
// Start drawing
initChart(domName) {
var myChart = this.$echarts.init(domName)
// The graph is adaptive
const listener = function() {
myChart.resize()
}
EleResize.on(domName, listener)
var option = {
title: {
text: 'ECharts instance'
},
toolbox: {
feature: {
dataZoom: { yAxisIndex: 'none' }, // Data area scaling
restore: { show: true }, / / reset
saveAsImage: { show: true } // Export the image}},legend: {
data: ['sales of 1111111111111111111111'.'sales of 22222222222222222222'].orient: 'horizontal'.'formatter': function(params) {
if (params.length > 10) {
var p1 = params.slice(0.10)
var p2 = params.slice(10)
return p1 + '\n' + p2
} else {
return params
}
}
},
xAxis: {
data: ['shirt 111111111'.'Sweater 1111111111111'.'Chiffon shirt 111111111'.Pants' 111111111 '.'High heels 11111111'.Socks' 1111111111 '].axisLabel: { // The axis label
interval: 0.Rotate: 45, // The Angle from -90 to 90 is 0 by default
margin: 12.textStyle: {
fontWeight: 'bolder'.color: '# 000000'
},
// The axis scale label is wrapped
formatter: function(params) {
var newParamsName = ' ' // The final concatenated string
var paramsNameNumber = params.length // The number of actual tags
var provideNumber = 8 // The number of words per line
var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // To wrap a line, display a few lines, rounded up
/** * Checks whether the number of labels is greater than the specified number. If yes, line break is performed. If no, equal to or less than, the original label */ is returned
// The condition is equivalent to rowNumber>1
if (paramsNameNumber > provideNumber) {
/** loop through each line,p for line */
for (var p = 0; p < rowNumber; p++) {
var tempStr = ' ' // Represents each truncated string
var start = p * provideNumber // Start intercepting position
var end = start + provideNumber // End the intercept position
// The index value of the last row is handled specifically here
if (p === rowNumber - 1) {
// The last time no line breaks
tempStr = params.substring(start, paramsNameNumber)
} else {
// Concatenate the string each time and wrap it
tempStr = params.substring(start, end) + '\n'
}
newParamsName += tempStr // The resultant string}}else {
// Assign the value of the old label to the new label
newParamsName = params
}
// Return the final string
return newParamsName
}
}
},
yAxis: [{type: 'value'.name: 'yu \ n main enemy no \ n \ n \ n the \ n \ n a big handsome than \ n \ n \ n \ n \ n I ha ha ha \ n \ n \ n \ n \ n \ n his forehead!!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.50.0.0].align: 'center'
},
position: 'left'.axisLine: {
show: true.lineStyle: {
color: 'blue'}},axisLabel: {
formatter: '{value}'}}, {type: 'value'.name: 'you're \ n \ n \ n their bearing \ n \ n \ n I know is \ n \ n space main first no enemy \ n \ n \ n \ n \ n a big handsome than \ n \ n \ n \ n!!! '.nameLocation: 'middle'.nameRotate: 0.nameTextStyle: {
padding: [0.0.0.60].align: 'center'
},
position: 'right'.axisLine: {
show: true.lineStyle: {
color: '#91cc75'}},axisLabel: {
formatter: function(value) { // Scientific counting displays labels
var res = value.toString()
var numN1 = 0
var numN2 = 1
var num1 = 0
var num2 = 0
var t1 = 1
for (var k = 0; k < res.length; k++) {
if (res[k] === '. ') { t1 = 0 }
if (t1) { num1++ } else { num2++ }
}
if (Math.abs(value) < 1 && res.length > 4) {
for (var i = 2; i < res.length; i++) {
if (res[i] === '0') {
numN2++
} else if (res[i] === '. ') {
continue
} else {
break}}var v = parseFloat(value)
v = v * Math.pow(10, numN2)
return v.toString() + 'e-' + numN2
} else if (num1 > 4) {
if (res[0= = =The '-') {
numN1 = num1 - 2
} else {
numN1 = num1 - 1
}
v = parseFloat(value)
v = v / Math.pow(10, numN1)
if (num2 > 4) { v = v.toFixed(4)}return v.toString() + 'e' + numN1
} else {
return parseFloat(value)
}
}
}
}
],
series: [{name: 'sales of 1111111111111111111111'.type: 'bar'.yAxisIndex: 0.// Specify the first y axis
data: [5.20.36.10.10.20] {},name: 'sales of 22222222222222222222'.type: 'bar'.yAxisIndex: 1.// Specify the second Y-axis
data: [15000.25000.40000.50000.150000.300000]
}
]
}
option && myChart.setOption(option)
},
// Click the full-screen icon to draw a picture
fullSc() {
this.dialogVisible = true
this.$nextTick(() = > {
const chartFul = this.$refs.fullChart
if (chartFul) {
this.initChart(document.getElementById('main1'))/ / drawing}})}}}</script>
Copy the codeconclusion
To summarize the above three methods: if we only preview the diagram and only work on the diagram rendered by the diagram container, we recommend using method 1.
If we want to operate not only on the table container rendered image, but also on other operations (such as dropdown boxes), like the following:
These two drop-down boxes are things that do not belong in the diagram container and are not displayed in full screen.
In this case, method 2 and method 3 are recommended, but method 2 does not use this, so I think the final effect of method 3 is as follows:
