Echarts
1.el-tab 切换echarts
-
监听el-tab的@tab-change= "handleChange"事件
-
在handleChange中对echarts实例自适应大小
// myChart = echarts.init(document.getElementById("pie-echart"));
nextTick(()=>{
myChart.resize()
})
2.自定义tooltip
tooltip: {
trigger: 'axis',
formatter:function(params) {
var relVal = params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' +params[i].marker+ params[i].seriesName +' ' + params[i].value +"%"
}
return relVal;
}
},
堆叠自定义
tooltip: {
trigger: 'axis',
formatter:function(params)
{
params = params.reverse()
var relVal = params[0].name + '<br/>';
for (var i = 0, l = params.length; i < l; i++) {
relVal += params[i].marker + params[i].seriesName + ' ' + params[i].data + '%'+ '</br>'
}
return relVal;
}
},
3.区域缩放( 更多配置参考最下方的引用参考4)
- 问题:当数据过多展示不下,横坐标和数据会错位,看着图表会混乱。
dataZoom: [
{
type: 'inside', //slider表示有滑动块的,inside表示内置的
show: true,
xAxisIndex: [0],
}
],
- 解决: 使用dataZoom可以对横坐标进行放大
- type为‘slider’时
- 问题: 滑块和legend重合,不能进行点击图表数据筛选
- 解决: 修改滑块大小或者位置
html" title=javascript>javascript">//修改滑块大小
dataZoom: [
{
type: 'slider', //slider表示有滑动块的,inside表示内置的
show: true,
xAxisIndex: [0],
height: 15, // 滑块高度
},
],
4.柱状图tooltips显示 横坐标也显示为纵坐标
正常的显示
- 原因: data数据中的name属性是指数据项的名称,会覆盖掉tootips横坐标的位置
const eData = data.map((item) => {
const monthlyData = item.monthlyData.map(oitem => {
return {
value: oitem,
// name: item.name,data 中的数据项中的name是数据项名称,会覆盖掉tootips横坐标的位置
code: item.code
}
})
return {
data: monthlyData,
name: item.name,
code: item.code
}
})
this.seriesData = eData.map(o => {
return {
...o,
type: 'bar',
barWidth: 30,
}
})
- 解决: data数据中不要带name字段,name默认指的是数据项的名称
5.legend 滚动
legend: {
left: '10%',
data: this.legendData,
type: 'scroll' //滚动
},
6.echarts实例的创建和销毁
-
问题: tab切换 使用多个echarts图时 要在进行echarts实例的销毁,不然会出现下边的警告
-
解决: 在实例创建之前,判断是否存在实例,若存在则销毁,不存在则新建实例
myChart && myChart.dispose();
myChart = echarts.init(document.getElementById("echart"));
7.警告
- 原因: echarts.init()在页面未渲染时就先页面一步加载了。
- 解决: 页面中是第二个tab切换才开始有柱状图显示,柱状图的init要在tab切换到第二个才创建。
8.多个不同图表时自适应大小
-
问题:使用onresize失效,多个图表时,仅对最后一个生效
window.onresize = function () {//自适应大小 barChart.resize(); }
-
解决:
window.addEventListener('resize', () => { // 自适应大小
myChart.resize();
}, false);
9. 图表数据二次渲染tooltips成倍增加
- 原因: series数据在更新之前没有进行初始化置空
- 解决: 在切换更新图表数据时先把series数据清空
参考:
1.tabs标签页中使用Echarts图表常见警告以及处理方式
2.echarts 自适应屏幕 失效 window.onresize
3. echarts.js报错:1722 There is a chart instance already initialized on the dom
4.echarts中datazoom 配置