1-echarts-雷达图

2-echarts-仪表盘

3-echarts-水球图(利用插件,echarts-liquidfill)

4-element UI tree 添加连接线,修改样式或使用插件(element-tree-line)

5-echarts-漏斗图

6-echarts-饼状图嵌套

option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},series: [{name:'大饼图',type:'pie',radius: ['50%', '70%'], // 设置外圈半径为50%,内圈半径为70%avoidLabelOverlap: false,label: {normal: {position: 'inner', // 标签显示在饼图内部formatter: '{b}\n{d}%',textStyle: {fontSize: 12}}},labelLine: {normal: {show: false}},data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]},{name:'小饼图',type:'pie',radius: ['20%', '40%'], // 设置外圈半径为20%,内圈半径为40%center: ['50%', '50%'], // 确保两个饼图共享同一个中心点label: {normal: {position: 'inner', // 标签显示在饼图内部formatter: '{b}\n{d}%',textStyle: {fontSize: 12}}},data:[{value:335, name:'A'},{value:679, name:'B'},{value:1548, name:'C'}]}]
};
7-echarts-环状

8-echarts-形象柱状图
