图表库 - Highchart / Echart

Posted 2020-10-29 On the road

当前主要使用HighChart和Echart图表库，都基于Jquery，需要先引用Jquery。

实际问题：引入Jquery需在图表库前，否则报错。

HighChart官网：https://www.hcharts.cn/demo/highcharts

Echart官网：http://echarts.baidu.com/

1、特点分析

HighChart：

• • 兼容性 - 支持所有主流浏览器和移动平台（android、ios等）。

  • 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。

  • 免费使用 - 开源免费。

  • 轻量 - highcharts.js 内核库大小只有 35KB 左右。

  • 配置简单 - 使用 json 格式配置

  • 动态 - 可以在图表生成后修改。

  • 多维 - 支持多维图表

  • 配置提示工具 - 鼠标移动到图表的某一点上有提示信息。

  • 时间轴 - 可以精确到毫秒。

  • 导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式

  • 输出 - 网页输出图表。

  • 可变焦 - 选中图表部分放大，近距离观察图表；

  • 外部数据 - 从服务器载入动态数据。

  • 文字旋转 - 支持在任意方向的标签旋转。

Echart：

一个纯 javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），

底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

对比：

A.HighChart配置显示更加灵活，支持html属性，Echart可定制性差，不支持HTML

实际问题：HighChart可利用html属性实现太长省略号问题，Echart可用formatter方法判断标签长于N个字符，截断并加上省略号.

B.Echart 动态效果优于HighChart，HighChart兼容性由于Echart

C.Highchart基于svg，可进行后续对dom进行操作，Echart基于canvas，实现大数据展示效果好

D.echarts.js支持按需求打包：echarts.js官网提供了在线构建的工具，可以在线构建项目时，选择项目所需要使用到的模块，从而达到减小JS文件的体积

2、使用方法：

HighChart：

 跟ECharts一样，HighCharts也需要下载相应的插件，不过HightCharts的插件很简单，只有一个highcharts.js文件

        如果需要导出图表，则需要exporting.js文件

        如果需要一些特殊的图形呈现，则还需要下载highcharts-more.js

Echart：http://www.cnblogs.com/ninilovebobo/articles/3932805.html

实际问题：echarts.js的体积较大，建议使用echart.min.js，但部分效果不兼容

3、常见图表元素（以Echart为例，Highchart属性类似）

    3.1、标题（title） 

    常见属性：主标题文本（text），文本样式（textStyle）

    3.2、提示语（tooltip）

    常见属性：格式化文本（formatter），文本样式（textStyle）

    3.3、横坐标（xAxis）、纵坐标（yAxis）

   常见属性：坐标轴的分割数（splitNumber），最大（max），最小（min），坐标轴线的相关设置（axisLine），坐标间隔（interval），旋转角度（rotate）

   实际问题：

   1、图表库的横纵坐标数据为自动计算，若自动计算结果显得太拥挤，可用splitNumber属性定义建议分割数，

         但这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整

   2、横坐标数据太多，显示错位或换行，有两种方案处理：将刻度标签旋转较度；或增大坐标轴刻度标签的显示间隔

   3、若非必要，不要随意设置max，否则容易造成图表超出y轴刻度线的问题，可利用min属性去掉负坐标；

    3.4、图例（legend）

    常见属性：是否显示（show），朝向（orient），边框颜色（borderColor），边框宽度（borderWidth），格式化文本（formatter）

    实际问题：图例默认边框自带圆弧，若要去除，borderRadius无效，borderRadius指的是这个图例的外边框

                    设置单个图例的边框属性：

                    legend: {

                            data: [{ 

 icon:‘rect’,

}]

 

                     }

    3.5、数据（series:）

    可对单一条数据进行设置。

     实际问题：可用来设置当数据为空时，不显示0 

     label: {

                    normal: {

                        show: true,

                        formatter: function (value) {

                            if (value.value == 0) {

                                return "";

                            } else {

                                return value.value;

                            }

                        }

                    }

                }

    3.6、直角坐标轴（grid）

   常见属性：上（top）下（bottom）左（left）右（right）间距，高度（height），宽度（width）

   实际问题：一般图表宽度在外层div中设置，较少使用grid中的height，width； 

                    若使用js计算图表高度、宽度，需在绘制图表前，确定div的大小

        

    3.7色系（color）

    color:[\'#fbb748\', \'#52e452\', \'#4493d5\', \'#abd74a\', \'#73c1e6\', \'#ff86ff\', \'#8686ff\', \'#e06c50\', \'#f2e73d\', \'#c3cf49\', \'#afc3f1\']

    按顺序取色值，若所设置的颜色数量不够，则循环使用

4、模拟鼠标划过事件（Highchart）

      onMouseOver()  // 模拟鼠标划过事件，配合 setInterval 可以实现轮选点