1. 图表重叠混乱
❓情景1：下拉框切换echarts图表，但是图表重叠混乱
💬原因：没有clear重置
✅解决： true或者clear两种写一种就行
-
myChart.clear() -
myChart.setOption(option, true)设置为true的话，就是notMerge，不合并，false的话，就Merge，之前的东西还保留
❓情景2：还有一重情况用clear也能解决 即快速切换tab 提示框未消失 此时用clear也能清除
2. 找不到dom元素
❓报错：TypeError: Cannot read property 'getAttribute' of undefined，外层的div加了一个v-if/v-else的判断 方法里的refs就获取不到实例了
💬原因：mounted加载阶段，v-if把dom干掉了，在mounted阶段dom根本不存在（第一次渲染active是0 在第一个tab，所以没渲染出来，除非我一上来就给active默认为第三个，那么渲染的时候v-if成立，拿到refs）
✅解决：改用v-show，让初次渲染的时候dom就存在
3. 图标没数据怎么显示“暂无数据”
如果什么都没做，那么没数据的时候 还是会显示之前的数据之外的配置
✅解决： 使用showLoading来遮盖
if (没有数据的情况) {
this.myChart.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 1)',
})
}
//接口请求完的地方关闭遮罩
async getcompleteDetail (type) {
const re = await getcompleteDetail(params)
this.activityListinComplete = re.data
if (re.msg == '执行成功') {
this.myChart.hideLoading()
}
},
4. 关于echarts的resize方法
resize可以监听网页resize事件后直接调用，也可以在resize方法中设置echarts DOM的高度
(a) 让echarts的div自适应高度-数据太多图表重叠
❓问题：如果给echarts的这个dom设置死宽高，那么如果数据太多的时候会因为展不开重叠在一起
✅解决：取消dom的高度设置，从而给echarts的实例resieze方法动态设置高度
this.myChart = echarts.init(this.$refs.mycharts)
this.myChart.resize({ height: this.activityName.length * 35 + 250 })//👈
//this.activityName.length 是活动数组的长度
//35为每个活动条数的高度
var option = {...}
if (没有数据的情况) {
this.myChart.showLoading({
text: '暂无数据',
color: '#ffffff',
textColor: '#8a8e91',
maskColor: 'rgba(255, 255, 255, 1)',
})
}
this.myChart.clear()
this.myChart.setOption(option)
(b) 整个echarts响应式变化大小
window.addEventListener('resize', this.resizeEcharts)
resizeEcharts () {
if (document.getElementById(`mycharts`)) {
this.$nextTick(() => {
this.$echarts.init(document.getElementById(`mycharts`)).resize()
})
}
},
#mycharts {
min-width: 342px;
max-width: 400px;
min-height: 330px;
margin-left: 44px;
background: #ffffff;
box-shadow: 0px 0px 6px 0px rgba(38, 44, 71, 0.16);
border-radius: 10px;
}
5. pie-环形图特殊样式写法记录
默认样式是 label显示在中间 且只有数据名
通过fotmatter可以控制要显示的数据 但是效果只是水平且不能分段设置样式
💬 结合rich符文本分段设置样式 以及对应的formatter获取想要的数据
series: [
{
type: 'pie',
radius: ['40%', '60%'],
label: {
show: false,
position: 'center',
formatter: [
'{x|{c}%}', // 使用x样式|对应文字
'{a|{b}}' //结合上述formatter要求 需要加{}才能显示需要的数值和数据名
].join('\n'), //换行使用 '\n'。
rich: {
a: {
color: 'rgba(0, 0, 0, 0.45)',
lineHeight: 14,
fontSize: 14,
},
x: {
fontSize: 30,
lineHeight: 30,
color: '#000000',
},
}
},
data: this.chartData,
}
]
6. 滚动条
❓问题：数据多，X轴放不下，柱状图产生堆叠。
✅解决：dataZoom设置滚动条，但不要具有初始的缩放效果
dataZoom: [ //给x轴设置滚动条
{
start: 0,//默认为0
end: 100 / (X轴数组.length / 10),//默认为100
type: 'slider',
show: true,
xAxisIndex: [0],
handleSize: 0,//滑动条的 左右2个滑动条的大小
height: 8,//组件高度
left: 50, //左边的距离
right: 40,//右边的距离
bottom: 26,//右边的距离
handleColor: '#ddd',//h滑动图标的颜色
handleStyle: {
borderColor: "#cacaca",
borderWidth: "1",
shadowBlur: 2,
background: "#ddd",
shadowColor: "#ddd",
},
},
{ //这个属性是里面拖拽
type: 'inside',
show: true,
xAxisIndex: [0],
start: 0,//默认为1
end: 100 / (X轴数组.length / 10),//默认为100 ,
zoomOnMouseWheel: false, //不允许鼠标缩放
},
],
7.bar基本配置
柱状图渐变色
series: [
{
name: '生产数量',
type: 'bar',
data: this.productNo,
itemStyle: { // here
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#307cd0' },
{ offset: 0.5, color: '#2667a6' },
{ offset: 1, color: '#123148' },
]),
},
},
{
name: '合格数量',
type: 'bar',
data: this.passNo,
itemStyle: { // here
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#26d1ad' },
{ offset: 0.5, color: '#20a18d' },
{ offset: 1, color: '#123148' },
]),
},
},
],
