echarts_highcharts_笔记

转载注明来源: 本文链接 来自osnosn的博客，写于 2019-05-16.

提示框显示参数，添加文字/数值单位。

• highcharts， 比较简单，在默认显示风格中添加文字。highcharts的文档有描述。 tooltip:{valueSuffix:'公里'}
• echarts， 文档也有描述，但不易理解。使用 tooltip:{ formatter: ... }
  • 方式1，直接用字符串 formatter: '{a}: {b} 公里' ， 缺点是，那个有颜色的圆点就没有了。
  • 方式2，用 formatter: function(params) {...}，代码有点长，多个参数一起显示也没问题(比如:叠加的柱状图)。

  formatter: function(params) {
   var htmlStr = '';
   htmlStr += '<div><span style="color:#fff;">' + params[0].name + '</span><br/> ';
   for(var i=0,j=params.length;i<j;i++){
    //前面的圆点和他的颜色
    htmlStr += '<span style="width: 10px;height: 10px;display:inline-block;border-radius: 50%;background-color:'+params[i].color+'"></span>';
    htmlStr += ' <span style="color:#fff;">' + params[i].seriesName + ':</span>';
    htmlStr += ' <span style="color:#fff;">' + params[i].value + ' 公里</span><br/>';
   }
   htmlStr += '</div>';
   return  htmlStr;
  }

坐标轴缩放

• highcharts， 用 chart: { zoomType:'x' }实现x轴缩放。缺点是放大之后，不能象echarts那样平移。文档中有说明。
• echarts， 用dataZoom:[{xAxisIndex: 0 }] 来定义第一个x轴的缩放。参看文档。
  • 缩放控制会压住图表。用dataZoom:[{left:..., right:...}] 设置缩放控件的显示位置。
    用 grid:{ left:0,right:0,...} 使图表让出空间，摆放缩放控件。

多个数据集，缺省时，部分显示/激活，部分不显示/不激活

• highcharts，在 series:[{visible:false, data:[...]}, {visible:true, data:[...]}] 中设置，仅设置false即可。
• echarts， 在 legend: { selected:{'参数1':false,'参数2':false} } 中设置，仅需设置false的即可。

---

转载注明来源: 本文链接 来自osnosn的博客.