.net图表之ECharts随笔07-自定义系列(多边形)

 

搞了一天多，才勉强搞出了一个不紧凑的六边形统计图，是真的菜。

这里ECharts的用法与06说的同一种，直接使用带all的js

先上个效果图，用面积来表示人数的多少

1. 参数option的tooltip和title还是一样设置

2. 还有一个grid，这是用来设置y轴的实际长度的。（我把y轴隐藏了，所以设不设置没看出来什么）

3. xAxis和yAxis必须要有，即便是空也要有

4. 自定义多边形的关键在于series！

　　　　

根据官方文档：在渲染阶段，对于series.data中的每个数据项（为方便描述，这里称为 dataItem)，会调用此randerItem函数。这个renderItem函数的职责，就是返回一个（或者一组）图形元素定义，图形元素定义中包括图形元素的类型、位置、尺寸、样式等。echarts会根据这些图形元素定义来渲染出图形元素。

所以，关键就在于randerItem这个函数上，既然是函数那么我就写一个

　　　　

主要就是return的这个返回值上，我这里只写我用到的。其他具体见官方文档http://echarts.baidu.com/option.html#series-custom.renderItem.return

renderItem函数提供了两个参数：

• params：包含了当前数据信息（如 seriesIndex、dataIndex 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。
• api：是一些开发者可调用的方法集合（如 api.value()、api.coord()）。

type设置为'polygon'表示多边形

style可以通过api.style()设置itemStyle 的配置和视觉映射得到的颜色

shape就是用来设置多边形形状的，参数points传入的是多边形各个顶点的坐标列表。如[[344, 144], [388, 144], [421, 110], [388, 76], [344, 76], [311, 110]]

　　这个形状自然是代表每个不同的数据，所以需要通过计算获得。

　　这里我自己写了个算法，一个简单的算法花了我好长时间。。。最后再附上代码

注意：

1）图表中坐标系的原点是在左上角，x轴往右递增为正，y轴往下递增为正！！！不要被眼前的现象所欺骗！

2）我是根据官方demo修改的，这个demo还需要引用min.js并且使用到echarts.util.each。但是我没查到这个each是干什么用的，只是去掉后却不显示了，所以只好做些修改。有大神知道的麻烦教我一下，谢谢了

 

其实，有点遗憾，我的能力实在有限，写出来的算法不是紧凑的，只能分行显示，暂时无法也没时间做到插空显示。

如果能实现到和下图这个一样就更好了。这样就显得紧凑多了。

　　

 不过，有点地方还是可以修改一下的，那就是把文字显示在图形中，这时需要用到series.label属性（记得把data的value修改成列表[name, value]，这样encode才用的对）：

　　　　

 生成六边形各顶点的代码如下。一行显示4个。

var row_count = 4;//每行多少个

var sqrt_3 = Math.sqrt(3);//根号三

var last_x = 0;//上一个占长
var last_y = 0;//逐个筛选上一行占宽
var last_row_y = 0;//上一行占宽

var top_or_right = 0;//通过除以行显示个数代表向上增或者向右增

function GetPolygon(area) {
　　//参数说明：area六边形面积，上一个六边形的标志点（向上增时是左上顶点的y坐标，向右增时是最右顶点的x坐标）
　　let polygonP = [];//六边形六个顶点的列表，代表六边形
　　let side = Math.sqrt(area / (3 * sqrt_3 / 2));//六边形边长
　　let x = 75;//顶点x坐标 70左右才接近相当于x坐标原点 增大向右
　　let y = 75;//顶点y坐标 240左右才接近相当于y坐标原点 减小向上
　　if (last_row_y == 0) {
　　　　last_row_y = y;
　　}
　　var distance = 10;//两个六边形间的距离
　　let temp = top_or_right % row_count;
　　top_or_right += 1;
　　switch (temp) {
　　　　case 0://每行的第一个
　　　　　　x = x + side / 2;//六边形左上顶点x坐标
　　　　　　y = last_row_y + distance;//六边形左上顶点y坐标
　　　　　　last_x = x + side * 3 / 2;//因为下一个是向右增，故为最右顶点的x坐标
　　　　　　last_y = y + side * sqrt_3;
　　　　　　break;
　　　　case 1://每行的第二个
　　　　case 2://每行的第三个
　　　　　　x = last_x + distance + side / 2;//六边形左上顶点x坐标
　　　　　　y = last_row_y + distance;//六边形左上顶点y坐标
　　　　　　last_x = x + side * 3 / 2;//因为下一个是向右增，故为最右顶点的x坐标
　　　　　　last_y = y + side * sqrt_3 > last_y ? y + side * sqrt_3 : last_y;
　　　　　　break;
　　　　case 3://每行的最后个
　　　　　　x = last_x + distance + side / 2;//六边形左上顶点x坐标
　　　　　　y = last_row_y + distance;//六边形左上顶点y坐标
　　　　　　last_row_y = y + side * sqrt_3 > last_y ? y + side * sqrt_3 : last_y;//因为下一个是向上增，故为左上顶点的y坐标
　　　　　　break;
　　　　}
　　polygonP.push([x, y]);//添加左上顶点坐标
　　for (var i = 0; i < 5; i++) {
　　　　//剩下五个顶点
　　　　switch (i) {
　　　　　　case 0:
　　　　　　　　x += side;
　　　　　　　　break;
　　　　　　case 1:
　　　　　　　　x += side / 2;
　　　　　　　　y += side * sqrt_3 / 2;
　　　　　　　　break;
　　　　　　case 2:
　　　　　　　　x -= side / 2;
　　　　　　　　y += side * sqrt_3 / 2;
　　　　　　　　break;
　　　　　　case 3:
　　　　　　　　x -= side;
　　　　　　　　break;
　　　　　　case 4:
　　　　　　　　x -= side / 2;
　　　　　　　　y -= side * sqrt_3 / 2;
　　　　　　　　break;
　　　　}

　　polygonP.push([x, y]);
　　}

　　return polygonP;
}