代码实在是太繁琐,所以这里先贴出效果图
QQ:112908676
多层饼图效果5
下载: 点击打开链接增加文字曲线路径
饼形图扇区多行文字行间距自定义
多层饼图效果4
下载点击打开链接
label与所在饼图同角度旋转(可设置)
label可分行,改变字体,颜色(可设置)
不同的字体大小,颜色(可设置)
文字可以多行,不同间距(可设置)
饼形图文字随角度旋转(可设置)
不同级别的饼形图半径(可设置)
根据填充数字填充的饼形图区域(可设置)
效果3点击打开链接
效果2:点击打开链接
饼形图起始角度(设置)("angleArray":"0,0,0,5.65,5.65,5.65", // 表示每一层饼形图绘制的起始角度(弧度))
不同的边框宽度,颜色(设置)
效果图一
多层饼形图效果图1
不同的字体大小,颜色(可设置)
文字可以多行,不同间距(可设置)
饼形图文字随角度旋转(可设置)
不同级别的饼形图半径(可设置)
根据填充数字填充的饼形图区域(可设置)
扩展:
chart:
"bgcolor": "000000", 设置饼形图所在矩形框的背景颜色
"bgAlpha": "100", 设置饼形图背景颜色的通透度
sizeArray,该属性表示每一层圆的直径,比如"sizeArray":"0,120,160,400"
"angleArray":"0,0,0,5.65,5.65,5.65", // 表示每一层饼形图绘制的起始角度(弧度),如果没有这一行代码,则绘制会从0度开始绘制,总是比sizeArray少一个成员
category:
"label": "SPEED<>font-size:8px;fill:#ffffff<br />面包<>font-size:10px;fill:#ffffff<br />96<>font-size:34px;fill:#ffffff<br />GRADING<>font-size:8px;fill:#ffffff<br />评分<>font-size:8px;fill:#ffffff",
对lable的文字style进行了扩充,可以设置label的文字大小、颜色;<br/>可以使文字多行显示
"rotate": "1",表示文字是否随所指区域产生旋转效果,如果为0,则所有的文字水平显示
"borderwidth": "14"所指区域的边框宽度,这个表示整个扇形区域的所有边框,无法单独制定边框的宽度
"bordercolor": "#445566", // 独立设置的边框颜色
"score": "0.96",表示扇形区域的填充值,如果整个扇形区域全部填充,则"score": "1",否则指填充半径的96%的区域
这是为了实现上述效果,对原有代码的扩充