做外贸营销网站,做好公司网站,做网商哪个国外网站好,摄影作品欣赏网站推荐Echarts图表库官方链接http://www.ppchart.com/#/
下面是一段实现饼图端头弧形效果的Echarts代码
虽然有了上面的图表库#xff0c;里面案例也挺多#xff0c;但是就是没找到我想要的这种效果#xff0c;索性就手写了一个
下面代码可以直接去我上面的图标库运行看效果…推荐Echarts图表库官方链接http://www.ppchart.com/#/
下面是一段实现饼图端头弧形效果的Echarts代码
虽然有了上面的图表库里面案例也挺多但是就是没找到我想要的这种效果索性就手写了一个
下面代码可以直接去我上面的图标库运行看效果也可以看我下面贴的效果图
// 实现步骤以及注意事项
// 1. max16定义的是一圈的份数也就是16份
// 2. radiusAxis下面的data是极坐标轴radiusAxis的类目数据。极坐标轴类目数据用于指定环形图的每个环的标签。每个类目代表环形图的一个环因此在示例中[1, 2, 3, 4, 5] 表示有五个环如果新增的话继续往后面加即可也可以写[1,1,1,1,1],为了标签不重复也可以[A,B,C,D,E]建议按照我那样写即可
// 3. polar下面的radius是一个数组调整极坐标系的内径和外径使所有环的半径统一调整值为百分比
// 4. series下面每一项都是一个数据每个数据项里面的stack都绑定同一个用于设置了堆叠的分组名。这样可以将所有的圆环都堆叠到一起这种圆角圆环的实现本质就是多个圆环堆叠到一起实现的视觉效果如果不以某一个参考作为堆叠的话就会显得不整齐
// 5. series下面每一项的data数据为每个圆环的配置这段是我个人理解的就是有几个圆环就在每个配置项的data里面前面补几个圆环最后一个才是数据项但这个值参考的是max也就是总份数16当前数据也就是相当于在16份里面的一个占比,也就是所有圆环的份数相加必须小于等于16后面新增一个圆环就要在所有的配置项的data里面最前面新增一个0后面保持不变就这样
// 6. legend下面的data是一个图例也就是每个图标都有的一些小圆点标志鼠标悬浮上去可以高亮当前数据option {angleAxis: {clockwise: false, // 刻度增长是否按顺时针默认顺时针(true)。axisLine: {show: false},axisLabel: {show: false},splitLine: {show: false},axisTick: {show: false},min: 0,max: 16, //一圈的刻度值startAngle: 0 //初始角度},radiusAxis: {type: category,data: [1, 1, 1, 1,1], // 极坐标径向轴中的类目这边有几个数// 就代表径向轴分了几份和series中的data对应这样就可以撑开圆环z: 10,axisLine: {show: false},axisTick: {show: false},axisLabel: {show: false},},polar: {radius: [30%, 70%] // 这里调整了极坐标系的内径和外径使所有环的半径统一调整},series: [{type: bar,data: [0, 0, 0, 0, 2],coordinateSystem: polar,name: A,roundCap: true,stack: a,itemStyle: {color: #Fb4035, // 设置系列 A 的颜色}}, {type: bar,data: [0, 0, 0, 0, 8], // 前面的0累计还是0这样径向轴上的对应的分区总数就是0不会显示圆环coordinateSystem: polar,name: B,stack: a,roundCap: true,itemStyle: {color: #dbdce5, // 设置系列 B 的颜色}}, {type: bar,data: [0, 0, 0, 0, 4],coordinateSystem: polar,name: C,stack: a,roundCap: true,itemStyle: {color: #162c7a, // 设置系列 C 的颜色}},{type: bar,data: [0, 0, 0, 0, 2],coordinateSystem: polar,name: D,stack: a,roundCap: true,itemStyle: {color: #000000, // 设置系列 D 的颜色}}],legend: {show: true,data: [A, B, C, D]}
};效果图
