简单使用echarts快速构建大数据图表

·  阅读 128

简单使用echarts快速构建大数据图表

注:本文仅对折线图,饼状图和雷达图部分配置项进行说明,不涉及图表的联调

最近在工作中,参与了一个关于大数据可视化的项目,在数据可视化上,UI设计了折线图,饼状图和雷达图。在实际开发的过程中遇到了一些echarts图表自定义的问题,在此做一个记录以及分享。若要对echarts进行深入的理解与使用还请移步官方文档。

echarts官网:echarts.apache.org/zh/index.ht…

共有配置项


1,title这个配置项是图表的标题组件,包含主标题和副标题。由于主标题和副标题的文本设置基本一样,此处仅对主标题进行设置。

对于标题,本人认为一般的需求有定位、字体类型、字体大小和字体颜色。

在定位上,通过left,top,right,bottom来进行。一般情况下我们只需设置left与top 的值即可满足需求,这两个属性均可设置固定大小(直接输数字,如'10')和比例大小(直接输百分比,如'10%'),同时也可使用框架提供的值,left 的值为'left', 'center', 'right';top 的值为'top', 'middle', 'bottom'。

在字体类型、字体大小和字体颜色上,通过textStyle(其为一个对象)来设置,color属性设置颜色,fontSize设置字体大小,fontFamily设置字体类型,要注意的是这三个属性的值均为string类型。

2,tooltip这个配置项是图表的提示框组件。

在我所做的这个项目中,要求提示框上的数据有序排列。所以在此使用了formatter这个属性,通过回调函数的方式,返回自定义HTML元素,实现此功能。参考代码如下

formatter: function(params){
    console.log('params:',params)
    let tool_title = `<div style="color:#ccc;display:flex;width:100%;justify-content:space-between;font-size:1rem;height:20px;">
                            <div style="width:15%;height:100%;text-align:center;">序号</div>
                            <div style="width:5%;"></div>
                            <div style="width:35%;text-align:center;">名称</div>
                            <div style="width:5%;"></div>
                            <div style="width:20%;text-align:center;">咨询</div>
                            <div style="width:5%;"></div>
                            <div style="width:15%;text-align:center;">投诉</div>
                        </div>`;
    let str = '';
    let p_length = params.value.length - 1;
    for(let i = 0; i < p_length; i++){
        str = str + `<div style="color:#fff;display:flex;width:100%;justify-content:space-between;font-size:0.7rem;height:20px;">
                            <div style="width:15%;height:100%;text-align:center;">${i+1}</div>
                            <div style="width:5%;"></div>
                            <div style="width:35%;text-align:center;">${params.name[i+1]}</div>
                            <div style="width:5%;"></div>
                            <div style="width:20%;text-align:center;">${params.value[i+1][0]}</div>
                            <div style="width:5%;"></div>
                            <div style="width:15%;text-align:center;">${params.value[i+1][1]}</div>
                        </div>`;
    }
    return tool_title + str;
},
复制代码

最终效果如下:

3,legend这个配置项是图例组件,它包含图例和图例文本。

对图例组件来说,本人关注的是它的定位、图例排列方式和图例文本及图例。

在定位上,通过left,top,right,bottom来进行,其属性值的设置与上文相同,此处不作赘述。

在图例排列上,通过orient来进行,其值有'horizontal'和'vertical',前者为默认值为水平排列;后者为垂直排列。

在图例文本和图例上,通过data来进行。对于图例,本人认为echarts提供的默认图例美观还行,若无特别要求可直接使用,无需更改;若只是进行简单的更改可通过icon属性进行;若要进行图片替换等操作可通过给icon赋图片路径或url实现(具体操作见官方文档)。

折线图


1,xAxis这个配置项是直角坐标系 grid 中的 x 轴。

轴线样式-->axisLine

轴线上文本的样式-->axisLine.lineStyle

坐标轴刻度线(显示或隐藏)-->axisTick

坐标轴名称(一般作为单位使用)-->name

2,yAxis这个配置项是直角坐标系 grid 中的 y 轴。

轴线样式-->axisLine

轴线上文本的样式-->axisLine.lineStyle

坐标轴刻度线(显示或隐藏)-->axisTick

坐标轴名称(一般作为单位使用)-->name

3,grid这个配置项是直角坐标系内绘图网格,通过left,top,right,bottom来控制其占据区域的大小。

4,series

数据名称-->name

数据值-->data

连线类型-->type(此处为line)

填充区样式-->areaStyle

数据叠堆(同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加)-->stack

饼状图


1,series

数据名称-->name

数据值-->data

连线类型-->type(此处为pie)

图形缩放-->radius

图形中心点位置-->center

雷达图


1,radar这个配置项为雷达图坐标系组件。

图形中心点位置-->center

雷达图半径-->radius

雷达图指示器-->indicator

雷达图形状-->shape(默认为polygon,可选值为circle)

指示器文本与雷达图的距离-->nameGap

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改