提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
目录
一、为什么需要封装同一个echarts组件,以及为什么会出现复用同一个echarts会只显示一个？
1.引入封装的echarts组件,主要传递的是需要展示的不同的数据
前言
例如：本文介绍了复用同一个eacharts组件,只会显示一个图表的问题。
一、为什么需要封装同一个echarts组件,以及为什么会出现复用同一个echarts会只显示一个？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
1.在一个vue页面中,用到同一个样式的echarts图,只是数据不同,就可以将这个echarts封装成一个组件,往里面传数据就可以.
例如:
2.当组件封装好后,使用如下,会出现只显示一个组件的问题(我感觉出现这个原因,是因为只有一个元素节点(比如id),导致复用都覆盖了;如果通过动态传id的名字,则会导致,在mounted执行报错)
serviceMonitoring为封装的echarts组件
二、解决
1.引入封装的echarts组件,主要传递的是需要展示的不同的数据
代码如下（示例）：
<serviceMonitoring :xArr="aa" :yArr="cc"></serviceMonitoring>
<serviceMonitoring :xArr="bb" :yArr="ee"></serviceMonitoring>
2.主要封装的eacharts组件
1.首先,将id设置为动态的,这个aa(请忽略粗略的命名)是需要唯一的,我是通过uuid,指定的aa的唯一值.props主要是接收传来的x轴,y轴需要展示的数据
2.在methods里面定义一个,获取uuid的方法.将值赋值给id,作为唯一的id值,在mounted里面调用初始化echarts的方法,并且将id传到初始化方法里面
3.这是用唯一id的代码,以及用掺入的
4.主要代码
(4.1)父组件复用
<div class="middle">
<serviceMonitoring :xArr="aa" :yArr="cc"></serviceMonitoring>
<serviceMonitoring :xArr="bb" :yArr="ee"></serviceMonitoring>
</div>(4.2)子组件的代码
<template>
<div>
<div :id="aa" style="width:660px;height:500px"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
chartJkfb: null,
aa: ''
}
},
props: {
xArr: {
type: Array
},
yArr: {
type: Array
}
},
computed: {},
created() {
this.aa = this.guid()
},
mounted() {
this.initJkChart(this.aa)
},
methods: {
guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
},
// 调度监控第一个图
initJkChart(aa) {
debugger
// this.chartSize(document.getElementById('echartsBc'), document.getElementById('chart'))
this.chartJkfb = echarts.init(document.getElementById(aa), 'chalk')
// 对图标初始化配置的控制
//柱条的颜色，每个柱条颜色不同
var lineColor = [
"#5894E5",
"#61C3D2",
"#EF8B6A",
"#CFAC5A ",
]
const initOption = {
grid: { // 边距
left: '8%',
right: '5%',
bottom: '3%',
top: '12%',
containLabel: true
},
xAxis: {
type: 'category',
data: this.xArr,
axisLabel: {// 轴文字的配置
show: true,
textStyle: {
color: '#767676',
fontSize: '18'
},
interval: 0,
formatter: function (value) {
var ret = "";//拼接加\n返回的类目项
var maxLength = 5;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于5,
{
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;
}
}
},
axisTick: {
alignWithLabel: false,
show: false
},
axisLine: {
show: true,//不显示y轴的线
lineStyle: {
color: "rgba(171,171,171,0.66)"
}
},
},
yAxis: {
type: 'value',
// type: 'category',
// inverse: true, //数组翻转显示
// data: ['战略发展', '业务运营', '管理支持', '数据业务'],
// offset: 20,
axisLabel: {// 轴文字的配置
show: true,
textStyle: {
color: '#767676',
fontSize: '18',
// fontFamily: "SourceHanSansCN-Normal;"
}
},
// splitLine: { show: false },
axisTick: {
alignWithLabel: true,
show: false
},
axisLine: {
lineStyle: {
color: "rgba(171,171,171,0.66)"
},
show: true //不显示y轴的线
},
},
series: [
{
data: this.yArr,
type: 'bar',
showBackground: true,
barWidth: 20, // 柱图宽度
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
barBorderRadius: [10, 10, 10, 10] // 背景圆角
},
itemStyle: {
barBorderRadius: [10, 10, 10, 10], // 背景圆角
color: function (params) {
return lineColor[params.dataIndex]
}
}
}
]
}
this.chartJkfb.setOption(initOption)
window.addEventListener('resize', () => {
if (this.chartJkfb) {
this.chartJkfb.resize()
}
})
},
}
}
</script>
<style lang="scss" scoped></style>总结
以上就是今天要讲的内容，本文仅仅简单介绍了同一个echarts复用的问题，如果有什么更好的想法,欢迎指教.
本文含有隐藏内容，请 开通VIP 后查看