echarts的使用注意要点基础入门_echarts小白攻略

在公司做了一版dashboard,对echarts有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:利用好回调函数,可以极大的增加图表个性化。如tooltip : {trigger: ‘item’,formatter : function (params) {var value = para

echarts的使用注意要点基础入门

在公司做了一版dashboard,对echarts有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:

echarts的使用注意要点基础入门_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再次捕获,即会进入事件循环。

海计划公众号
(0)
上一篇 2020/03/29 01:40
下一篇 2020/03/29 01:40

您可能感兴趣的内容