一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。
前言
本集锦是各种echarts图形绘制问题集锦。
（其他使用echarts遇到的各种杂七杂八的问题，详见另一篇：juejin.cn/post/699547… ）
一、echarts 提示框组件tooltip调请求异步展示
需求
echarts折线图，点击某时间节点，需要调接口计算数值，进行展示。
效果
代码
import axios from 'axios'
const toHTML = (res) => {
console.log(res.data.errorMessage, 123456)
return res.data.errorMessage
}
tooltip: {
trigger: 'axis',
confine: true, // 将 tooltip 框限制在图表的区域内 防止超出div被遮盖
triggerOn: 'click', // 点击时触发 以免频繁的调用接口
formatter: function (params, ticket, callback) {
axios.get('/api/后台接口', {
params: {
// 接口参数
}
}).then(res => {
if (res.data.errorCode === 0) {
// res.data.errorCode === 0返回正常，调用回调函数
callback(ticket, toHTML(res))
}
}).catch(res => {
console.log(res, 'get请求出错！')
})
return 'Loading'
}
},
二、echarts3使用字符云wordCloud的方法
报错：Component series.wordCloud not exists. Load it first.
因为echarts3不再支持字符云wordCloud，需要额外引入echarts-wordcloud.js。
在webpack中引入wordCloud方法：
- 1、进入项目根目录，运行cmd，执行命令npm install echarts-wordcloud --save
- 2、需要使用wordCloud的地方import 'echarts-wordcloud'即可
同时，将官网的例子复制下来，发现字符云的颜色根本没法随机变化！！
官网例子：
echarts.baidu.com/echarts2/do…
注意点：
series: [{
......
data: [{
name: "Macys",
value: 6181,
itemStyle: createRandomItemStyle()
},
......
]
......
}]
将option打印出来发现itemStyle设置的颜色确实没问题各有不同，在官网看配置没找到怎么设置颜色。
后面发现git上有个例子
注意点：
data: [{
name: 'Farrah Abraham',
value: 366,
// Style of single text
textStyle: {
normal: {},
emphasis: {}
}
}]
于是将原本的itemStyle改为textStyle就OK了。。。
三、折线图的动画效果问题
option.animation = true 可以控制折线图加载时候的动画效果，默认为true；
但是当数据量太大时，即便设置为true，动画效果也没了。
四、echarts里面的悬浮框前面的图标怎么改变大小
关键代码：
formatter: function (params) {
var result = ''
var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:44px;width:44px;height:44px;background-color:#1ddae4"></span>'
var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:44px;width:44px;height:44px;background-color:#b9c6e6"></span>'
result += params[0].axisValue + '</br>' + dotHtml + 'COD：' + params[0].data + '</br>' + dotHtml2 + 'NH3：' + arams[1].data
return result
}
效果如下：
参考文档：
五、echarts的toolbox文字被遮盖的问题
效果如图：
要求：
- 1、右侧垂直显示
- 2、竖向居中
- 3、鼠标悬浮时，提示文字位于图标左边
- 4、鼠标悬浮时，提示文字不遮挡工具图标
设置参数：
toolbox: {
show: true,
// 1、右侧垂直显示
orient: 'vertical',
// 2、竖向居中
top: 'center',
// 3、鼠标悬浮时，提示文字位于图标左边
emphasis: {
iconStyle: {
textPosition:'left'
}
},
feature: {
// 4、鼠标悬浮时，提示文字不遮挡工具图标
dataView: {show: true, readOnly: false, title: '数据视图 '},
saveAsImage: {show: true, title: '保存图片 '}
}
}
注意：
- 3、鼠标悬浮时，提示文字位于图标左边：
官方配置，并没有emphasis.iconStyle.textPosition = 'left'
然而尝试官方相关的配置iconStyle.textPosition = 'left'甚至单个配置feature.saveAsImage.iconStyle.textPosition都不可行
然而emphasis.iconStyle.textPosition的设置很有可能哪天就用不了了。
- 4、鼠标悬浮时，提示文字不遮挡工具图标：
官方配置尝试了好几个文字对其方式都不对，最后使用一串空格去覆盖图标达到效果。
本人使用"echarts": "^4.1.0"，求更好的解决办法- -。
六、echarts框选重点数据brush的使用
目的
折线图，需要框选出重点的数据，突出显示。
效果
代码
brush: {
/* toolbox: ['rect'], */
xAxisIndex: 'all',
yAxisIndex: 'all',
transformable: false,
throttleType: 'debounce',
removeOnClick: false,
brushStyle: {
borderWidth: 1,
color: 'rgba(255,36,36,0.2)',
borderColor: '#ff2424'
}
},
mychart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'rect',
coordRange: [[minX, maxX], [minY, maxY]],
xAxisIndex: 'all',
yAxisIndex: 'all'
}
]
})
注意点
1、toolbox: ['rect']是提供右上角的工具箱，我只需要展示框选，而无需用户框选操作，即可去掉。
2、option中一定要有xAxisIndex: 'all',或yAxisIndex: 'all',不然报错
TypeError: Cannot read property '0' of undefined at getBoundingRectFromMinMax
3、areas里面也一定要有xAxisIndex: 'all',或yAxisIndex: 'all',不然报错
TypeError: Cannot read property '0' of undefined at getBoundingRectFromMinMax
4、transformable，已经选好的选框是否可以被调整形状或平移。默认可以拖动修改框，但此处需求只是给用户提示不允许其操作，所以设置为false。
七、echarts图例右对齐的问题
通常情况下设置图例legend属性right，即可右侧排布。
align属性则控制了图例在文字右边对齐还是左边对齐。
默认图例在左：
设置align:'right'，图例在右：
八、tooltip的排列和小圆点展示问题
需求：
柱状图柱子太多，鼠标悬浮时的tooltip内容太多，需要分列显示，同时显示柱子颜色的小圆点。
效果如下：
关键代码：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#B7C4D1'
}
},
confine: true,
formatter: function (params) { // 自定义提示框内容
let res = '<div>' + params[0].name + '</div>'
let nbsp = ' '
for (let i = 0; i < params.length; i += 2) {
let wcz = params[i].marker + params[i].seriesName + nbsp + '<span style="font-weight:bold;">' + params[i].value + '</span>'
let mbz = params[i + 1].marker + params[i + 1].seriesName + nbsp + '<span style="font-weight:bold;">' + params[i + 1].value + '</span>'
res += '<div style="margin:4px 0px;">' + wcz + nbsp + mbz + '</div>'
}
return res
}
},
注意：
- 1、confine属性，是否将 tooltip 框限制在图表的区域内。
- 2、如果只是格式化数值其实还有个属性valueFormatter，官方说明从
v5.3.0开始支持。 - 3、formatter逢偶数才换行，切加上前面的小圆点，其实小圆点就是marker！！！
