Echarts diagrams can only be called in mounted lifecycle functions. Created hooks are not yet mounted
Pile figure
<div class="chart" v-show=! "" isShow" ref="myChart"></div>
Copy the code// legend parameter Settings, initialization
setChart() {
// If the page has multiple renderings of the chart, destroy the rendered chart first.
if (this.myChart ! =null && this.myChart ! =' ' && this.myChart ! =undefined) {
this.myChart.dispose() / / destroy
}
this.myChart = this.$echarts.init(this.$refs.myChart)
var option = {
tooltip: {
trigger: 'axis'.axisPointer: {
// Axis indicator. Axis trigger works
type: 'line'./ / the default value is linear, optional: 'the line' | 'shadow'
},
confine:true , // Whether to limit the tooltip box to the area of the diagram.
// Mouse over the chart hoverbox data callback processing
formatter: function (params) {
if(params.length>0) {var res = ' '
res = "<div style=''>";
for(var i=0; i<params.length; i++){ res +=''+'<span>'+params[i].seriesName+'</span>'+':' + '<span>'+ params[i].value + '</span>' + '</br>';
}
res += "</div>"
return res
}
},
extraCssText: 'max-width:200px; overflow: hidden; text-overflow:ellipsis; white-space: normal; word-break: break-all; ' // Add additional CSS styles to the float layer
},
// Graph column corresponding item
legend: {
data: this.legendData,
// Crop the text when the legend text is too large and turn on the tooltip
formatter: function (name) {
if(name.length>5) {return name.substring(0.5) +'... '
}else{
return name
}
/ / return echarts. Format. TruncateText (name, 40, '14 px Microsoft Yahei', '... '); // This version is not supported
},
tooltip: {
show: true}},// Position of chart (if the left and right axes of chart are not displayed completely, you can set left and right of chart to solve the problem)
grid: {
left: '0%'.right: '5%'.bottom: '3%'.containLabel: true.// Whether the grid area contains scale labels for coordinate axes true: Prevents label overflow
},
// Set the X axis value
xAxis: {
type: 'category'.name: 'time'.show: true.// Whether the border is displayed
boundaryGap: true.// Whether the axes are left blank
data: this.xAxisData,
position: 'bottom'.// the X-axis position
nameLocation: 'end'.// If there are too many X axis chart items and the bottom resolution display is not complete, you can set axisLable, the relevant Settings of the scale label of the axis.
axisLabel: {
interval: 0.// Force the axis split interval.
alignWithLabel: true.// The scale line is aligned with the label
formatter: function (value) {
if (window.screen.width == '1366') {
if (value.length > 3) {
// return value.split("").join("\n");
var ret = ""; // Concatenate the category item returned by add \n
var maxLength = 2; // Each item displays the number of characters
var valLength = value.length; // The number of characters in the X-axis category
var rowN = Math.ceil(valLength / maxLength); // The number of lines that the category item needs to wrap
for (var i = 0; i < rowN; i++) {
var temp = ""; // Each cut of the string
var start = i * maxLength; // Start intercepting position
var end = start + maxLength; // End the intercept position
temp = value.substring(start, end) + "\n";
ret += temp; // With the final string
}
return ret;
} else {
return value
}
} else {
return value
}
}
}
},
// Set the Y-axis value
yAxis: {
name: 'number'.nameLocation: 'end',},/ / the data source
series: this.seriesData,
}
// Display the chart using the configuration items and data you just specified.
this.myChart.setOption(option)
// Legend ADAPTS to the browser window size
window.onresize = this.myChart.resize
},
Copy the codeThe data source
this.seriesData.push({
name: element.orgName,
type: 'bar'.stack: 'ISO'.barWidth: 25.barGap: '80%' /* Multiple side-by-side columns set the spacing between columns */ ,
barCategoryGap: '50%' /* Multiple side-by-side columns set the spacing between columns */ ,
emphasis: {
focus: 'series',},color: '#F67171'.data: element.count,
})
Copy the codeExport the Echarts table as an image
// Export the image
output(type) {
// this.chartObject stores echarts instances
if (this.myChart) {
// Echarts document instance method getDataURL
let picInfo = this.myChart.getDataURL({
type: 'png'.pixelRatio: 1.5.// Double the download. Solve the generated image blur problem on the mobile end
backgroundColor: '#fff'.excludeComponents: ['toolbox'].// Ignore toolbox components when exporting
}) // Get a string of Base64 information
if (type == 'PNG') {
const elink = document.createElement('a')
// Set the default file name, this.chartTitle to the title generated when drawing
elink.download = this.chartTitle + '.png'
elink.style.display = 'none'
elink.href = picInfo
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // Release the URL object
document.body.removeChild(elink)
} else if (type == 'SVG') {
let mycanvas = document.querySelector(The '#' + this.id + ' canvas')
// Set the SVG tag attributes
let svg0 = document.createElementNS('http://www.w3.org/2000/svg'.'svg')
svg0.setAttribute('xmlns'.'http://www.w3.org/2000/svg')
svg0.setAttribute('version'.'1.1')
svg0.setAttribute('height', mycanvas.height)
svg0.setAttribute('width', mycanvas.width)
let img3 = document.createElementNS('http://www.w3.org/2000/svg'.'image')
// base64 encoding is written to href
img3.href.baseVal = picInfo
img3.setAttribute('height', mycanvas.height)
svg0.appendChild(img3)
let h = svg0.outerHTML
// Write a Base64 encoded SVG stream to the image object
let data = 'data:image/svg+xml; base64,' + window.btoa(unescape(encodeURIComponent(h)))
const elink = document.createElement('a')
// Set the default file name, this.chartTitle to the title generated when drawing
elink.download = this.chartTitle + '.svg'
elink.style.display = 'none'
elink.href = data
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // Release the URL object
document.body.removeChild(elink)
}
} else {
this.$message({
message: 'No chart yet, please chart first'.type: 'error',}}}),Copy the codeCustom mouse hover event method
When setting custom methods, you cannot set formatter in the Tooltip option under Option
// Display the chart using the configuration items and data you just specified..this.myChart.setOption(option)
let that = this
// Call the custom hover event method after echarts initialization
this.myChart.on('mouseover'.function (params) {
let extension = document.getElementById('extension')
if (params.componentType == 'xAxis') {
// move the judgment to the X-axis
console.log(params.value)
let mousePos = that.mouseMove()
// Set the mouse position as required
let x = mousePos.x
let y = mousePos.y - 30
extension.innerHTML = params.value
// Bubble style
// extension.style.cssText = "top:" + y + "px; left:" + x +"px; display:block; position: fixed;" ;
extension.style.cssText = 'top:' + y + 'px; left:' + x + 'px; display:block; position: fixed; z-index:99'}})// this.myChart.on('mouseout', function (params) {
// // Note that HERE, I use the X axis display too long as an example, if the Y axis, need to change to yAxis
// let extension = document.getElementById("extension");
// if (params.componentType == "xAxis") {
// extension.style.cssText = "display:none";
/ /}
// });
// Legend ADAPTS to the browser window size
window.onresize = this.myChart.resize
Copy the code// Get the mouse position coordinate method
mouseMove(ev) {
ev = ev || window.event
console.log(ev)
return this.mousePosition(ev)
},
mousePosition(ev) {
if (ev.clientX || ev.clientY) {
return { x: ev.clientX, y: ev.clientY }
}
},
Copy the code