EChart和hightcharts介绍和使用(生成图标)

有两种生成图表方法:

  hightcharts(推荐)   https://www.highcharts.com.cn/

  echarts          https://echarts.apache.org/examples/zh/index.html

  需要查看具体操作可见详情链接

一、hightcharts

1、什么是highcharts?

  highcharts是一款纯js编写的图表库,能够很简单便捷在web网站或用中添加交互性的图表,Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !

2、优势:

  兼容性好在ie6

  开源免费

  纯js

  图表类型丰富

  动态性

  多轴支持

  动态提示框

  图表导出和打印功能

  图表缩放

  支持外部数据加载

3、Highcharts主要组成

Title

图表标题,包含标题和副标题(subTitle),其中副标题是非必须的。

Axis

坐标轴,包含x轴(xAxis)和y轴(yAxis)。通常情况下,x轴显示在图表的底部,y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴,为了对比或区分数据,Highcharts提供了多轴的支持。

Series

数据列。图表上一个或多个数据系列,比如曲线图中的一条曲线,柱状图中的一个柱形。

Tooltip

数据提示框。当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值,数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。

Legend

图例。用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列。

Credits

图表版权信息。显示在图表右下方的包含链接的文字,默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

Exporting

导出功能按钮。通过引入exporting.js即可增加图表导出为常见文件功能。

PlotLines

标示线(或辅助线)。可以在图表上增加一条标示线,比如平均值线,最高值线等。

PlotBands

标示区域(分辨带)。可以在图表添加不同颜色的区域带,标示出明显的范围区域。

二、echarts
1、什么是echarts?
  Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,使用内容做简单记录;
 
2、echart属性介绍

1、title:写标题,属性如下

  show:false/true  标题是否显示;

  text:标题内容;textstyle修饰标题样式

  subtext:副标题,也可以算是内容;subtextStyle修饰副标题样式;

2、legentd:图例组件展现了不同系列的标记(symbol),颜色和名字;

  show:false/true  是否显示;

  data:图例的数据数组;

3、grid:直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。可以在网格上绘制折线图,柱状图,散点图;

  show:false/true  是否显示;

  top、left、right、bottom标识上左右下的边距;

4、xAxis :直角坐标系 grid 中的 x 轴,单个 grid 组件最多只能放上下两个 x 轴。

  type:坐标轴类型。

        'value'数值轴,适用于连续数据。

        'category'类目轴,适用于离散的类目数据,为该类型时必须通过data设置类目数据。

        'time'时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

        data:类目数据,在类目轴(type: 'category')中有效。

5、yAxis:直角坐标系 grid 中的 y 轴,单个 grid 组件最多只能放左右两个 y 轴。

        type:坐标轴类型。

        'value'数值轴,适用于连续数据。

        'category'类目轴,适用于离散的类目数据,为该类型时必须通过data设置类目数据。

        'time'时间轴,适用于连续的时序数据,与数值轴相比时间轴带有时间的格式化,在刻度计算上也有所不同,例如会根据跨度的范围来决定使用月,星期,日还是小时范围的刻度。

6、dataZoom:组件 用于对数据进行区域缩放,从而能自由关注细节的数据信息,或者概览数据整体。

        type:slider; 是否显示 组件。如果设置为false,不会显示,但是数据过滤的功能还存在;

  backgroundColor:组件的背景颜色。

        realtime:拖动时,是否实时更新系列的视图。如果设置为false,则只在拖拽结束的时候更新。

  top、left、right、bottom标识上左右下的边距;

7、tooltip:提示框组件。

        show:false/true  是否显示;

  trigger:触发类型;

        'item':数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。

        'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。

8、color:调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。

        默认为:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];

9、seriers:系列列表。每个系列通过type 决定自己的图表类型;

        series[i]-line:折线

        itemStyle折线拐点标志的样式;

        series[i]-bar:柱状图通过柱形的高度来表现数据的大小,用于有至少一个类目轴的直角坐标系上。

        series[i]-pie:饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。

10、itemStyle 样式:

        normal:color 颜色;

3、柱状图的中间显示数据

  改变position的值:

    1、外部位置:top:在柱状图顶部,bottom:在柱状图底部,right:在柱状图的右边,left:在柱状图左边。

    2、内部位置:inside:在柱状图中间,insideRight:在柱状图内部的右边,insideLeft:在柱状图内部的右边,insideTop:在柱状图内部的顶部,insideBottom:在柱状图内部的底部。

  代码demo:
  
series : [

    {

        name:'机器数量',

        type:'bar',

        barWidth: '60%',

        data:[569, 30],

        itemStyle:{

            normal:{

                label:{

                    show:true, //表示是否显示

                    position: 'inside', //改变数字的位置

                    textStyle: { //改变字体的颜色和字体大小

                        color: '#ffff',

                        fontSize: 13

                    },

                    formatter: function(params){

                        if(params.value == 0){

                            return '';

                        }else {

                            return params.value;

                        }

                    }

                }

            }

        }

    }

]

   拿一个实例展示一下   inside:在柱状图中间:

EChart和hightcharts介绍和使用(生成图标)_第1张图片

 

 

分类:JQuery

 
 

你可能感兴趣的:(EChart和hightcharts介绍和使用(生成图标))