echarts图表只能在mounted生命周期函数调用，created钩子中页面还没挂载
叠堆图
<div class="chart" v-show="!isShow" ref="myChart"></div>
// 图例参数设置，初始化
setChart() {
// 如果页面有切换多次渲染图表，需先销毁已渲染的图表，
if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {
this.myChart.dispose() //销毁
}
this.myChart = this.$echarts.init(this.$refs.myChart)
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: 'line', // 默认为直线，可选为：'line' | 'shadow'
},
confine:true , // 是否将 tooltip 框限制在图表的区域内。
// 鼠标移入图表悬浮框数据回调处理
formatter: function (params) {
if(params.length>0){
var res = ''
res = "<div style=''>";
for(var i=0;i<params.length;i++){
res += '<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#F67171;margin-right:6px"></span>'+'<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;' // 额外附加到浮层的 css 样式
},
// 图列对应项
legend: {
data: this.legendData,
// 在 legend 文字很多的时候对文字做裁剪并且开启 tooltip
formatter: function (name) {
if(name.length>5){
return name.substring(0,5)+'...'
}else{
return name
}
// return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); //此版本不支持
},
tooltip: {
show: true
},
},
// 图表的位置（若图表左右坐标轴名展示不全，可设置图表的left，right解决）
grid: {
left: '0%',
right: '5%',
bottom: '3%',
containLabel: true, // grid 区域是否包含坐标轴的刻度标签 true:防止标签溢出
},
// X轴数值配置项设置
xAxis: {
type: 'category',
name: '时间',
show: true, // 边框是否显示
boundaryGap: true, // 坐标轴两边是否留白
data: this.xAxisData,
position: 'bottom', // x轴位置
nameLocation: 'end',
// 若X轴坐标轴图表项过多，底分辨率展示不全，可设置axisLable,坐标轴刻度标签的相关设置。
axisLabel: {
interval: 0, // 强制设置坐标轴分割间隔。
alignWithLabel: true, // 刻度线和标签对齐
formatter: function (value) {
if (window.screen.width == '1366') {
if (value.length > 3) {
// return value.split("").join("\n");
var ret = ""; //拼接加\n返回的类目项
var maxLength = 2; //每项显示文字个数
var valLength = value.length; //X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
for (var i = 0; i < rowN; i++) {
var temp = ""; //每次截取的字符串
var start = i * maxLength; //开始截取的位置
var end = start + maxLength; //结束截取的位置
temp = value.substring(start, end) + "\n";
ret += temp; //凭借最终的字符串
}
return ret;
} else {
return value
}
} else {
return value
}
}
}
},
// Y轴数值配置项设置
yAxis: {
name: '数量',
nameLocation: 'end',
},
// 数据源
series: this.seriesData,
}
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option)
// 图例随浏览器窗口大小自适应
window.onresize = this.myChart.resize
},
数据源
this.seriesData.push({
name: element.orgName,
type: 'bar',
stack: 'ISO',
barWidth: 25,
barGap: '80%' /*多个并排柱子设置柱子之间的间距*/ ,
barCategoryGap: '50%' /*多个并排柱子设置柱子之间的间距*/ ,
emphasis: {
focus: 'series',
},
color: '#F67171',
data: element.count,
})
导出echarts表格为图片
// 图片导出
output(type) {
// this.chartObject存的是echarts实例
if (this.myChart) {
// echarts官网文档实例方法getDataURL
let picInfo = this.myChart.getDataURL({
type: 'png',
pixelRatio: 1.5, // 放大两倍下载。解决生成图片在移动端模糊问题
backgroundColor: '#fff',
excludeComponents: ['toolbox'], // 导出时忽略toolbox组件
}) // 获取到的是一串base64信息
if (type == 'PNG') {
const elink = document.createElement('a')
// 设置默认文件名，this.chartTitle为绘图时生成的标题
elink.download = this.chartTitle + '.png'
elink.style.display = 'none'
elink.href = picInfo
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else if (type == 'SVG') {
let mycanvas = document.querySelector('#' + this.id + ' canvas')
//设置svg标签属性
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编码写入href
img3.href.baseVal = picInfo
img3.setAttribute('height', mycanvas.height)
svg0.appendChild(img3)
let h = svg0.outerHTML
//给图片对象写入base64编码的svg流
let data = 'data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent(h)))
const elink = document.createElement('a')
// 设置默认文件名，this.chartTitle为绘图时生成的标题
elink.download = this.chartTitle + '.svg'
elink.style.display = 'none'
elink.href = data
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
}
} else {
this.$message({
message: '暂未绘制图表，请先绘制图表',
type: 'error',
})
}
},
自定义鼠标悬浮事件方法
设置自定义方法时，在option下tooltip选项中不能设置formatter
// 使用刚指定的配置项和数据显示图表。
.......
this.myChart.setOption(option)
let that = this
//在echarts 初始化完成后，调用自定义的鼠标悬浮事件方法
this.myChart.on('mouseover', function (params) {
let extension = document.getElementById('extension')
if (params.componentType == 'xAxis') {
//判断移入x轴
console.log(params.value)
let mousePos = that.mouseMove()
//鼠标位置，按需求设置
let x = mousePos.x
let y = mousePos.y - 30
extension.innerHTML = params.value
//气泡样式
// 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) {
// //注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxis
// let extension = document.getElementById("extension");
// if (params.componentType == "xAxis") {
// extension.style.cssText = "display:none";
// }
// });
// 图例随浏览器窗口大小自适应
window.onresize = this.myChart.resize
// 获取鼠标位置坐标的方法
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 }
}
},
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！