简单使用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