共计 1032 个字符,预计需要花费 3 分钟才能阅读完成。
在公司做了一版 dashboard,对 echarts 有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:
-
利用好回调函数,可以极大的增加图表个性化。如
tooltip : {
trigger: 'item',
formatter : function (params) {var value = params.value[1].toString().replace(/(\d{1,3})(?=(\d{3})+$)/g,function($1){return $1=$1+','})
return `${params.value[0]}<br/> 活跃人次:${value}`
}
}
- 图表共同的特点是鼠标悬浮的标签可以用回调函数格式化,
- 散点图的 symbol 大小也可以通过回调函数设置,
- 映射的分段设置,非常的灵活。如
visualMap: [
{
type: 'piecewise',
min: 0,
max: 100,
bottom: 60,
left: "left",
pieces: [{min: 0, max: 59,label: '<60%',color:'#FF4177'},
{min: 60, max: 70, label: '60%-70%',color:'#FFA45A'},
{min: 71, max: 89, label: '71%-89%',color:'#FFDC5A'},
{min: 90, max: 100, label: '90%-100%',color:'#00B743'},
],
dimension:2
}
- 设置的 data 是数组形式,可以通过 value[x] 取到每个 item 的 x 维度数据。如
data: [["115.88", "26.863", 99, 99,77,"430000", 四川]],
params[0].value[6]:四川
- 散点图是独立于几个坐标表的,xy 坐标,日历,地图上都可以成为散点图的分布坐标系
- 地理图有 js 引入方式和 json 文件格式引入,目前用的方法是请求 json 格式的文件,其实 json 文件中储存的都是一种叫做 geoJSON 格式的位置信息,echarts 根据这些信息绘制多边形以及其相应标签。
- 图表重绘后需要注意及时 dispose,不然当点击一个散点的时候会多次触发绑定的点击事件。严重时会导致浏览器崩溃。
- 注意不要在 watch 的图表 data 属性中设置操作 data 属性,因为 echarts 赋值时会对该 data 进行操作和改变,该变化会被 watch 再次捕获,即会进入事件循环。
正文完
发表至: javascript
2019-10-18