标签：... 缩放 笔记 highcharts params htmlStr echarts

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的博客.

标签：...,缩放,笔记,highcharts,params,htmlStr,echarts
来源： https://www.cnblogs.com/osnosn/p/12900924.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。