a. 一个页面tab左右两侧都有echarts,注意要用原生写tab切换,用v-if判断,不要用组件和v-show(原因不明)
b. 柱形图中显示的百分比如何使用后台返回的百分比,具体可以参考[blog.csdn.net/hudeyong926…]
c. echarts中图例可以是现有的图片(UI要求还原设计图),c参考链接[blog.csdn.net/zm_miner/ar…]
// 具体代码实例
import share from '../../assets/img/share.png';
data: [
{
name: '播放',
icon:`image://${play}`
},
{
name: '转发',
icon: `image://${share}`, // 自定义icon
}
]
e. 关于echarts手机端自适应的问题
// 移动端自适应方法(尤其适应一个页面多echars)
mobileResize(flag) {
window.onresize = () => {
flag.resize();
};
}
// 举例
var chart = echarts.init(document.getElementById('main'));
this.mobileResize(chart);
f. 关于echarts显示暂无数据的两种方法
第一种方法
// 调用接口 给echarts参数赋值
if (res.trendDate.length !== 0) {
// 再次调用 初始化echarts(获取dom 放echarts 这一堆)
this.dataTrend();
} else {
this.focusOnDataX = [];
// 显示--暂无数据--
const dom = document.getElementById('dataTrend');
dom.innerHTML = '暂无相关数据';
dom.style.cssText =
'text-align:right; color: #999; border: none;line-height: 300px;';
dom.removeAttribute('_echarts_instance_');
}
第二种方法
在html中用v-show判断即可
g. 柱形图中横坐标或者纵坐标 在放数据的时候,会出现数据间隔出现的情形,问题描述和方法[blog.csdn.net/qq_37138818…]
h. 遇到多折线图折叠 出现各个点数值累加, 去掉或者stack取不同的值就可以了
series: [
{
name: '播放',
type: 'line',
stack: '总量0',
data: [200, 1320, 1010, 340, 900, 2300, 2100],
symbol: 'none',
itemStyle: { normal: { color: '#158CFF' } },
},
{
name: '收益',
type: 'line',
stack: '总量1',
data: [2620, 820, 1910, 2340, 2900, 2200, 2310],
symbol: 'none',
itemStyle: { normal: { color: '#FF850A' } },
}
],