内容简介:最近在耍 Echarts 稍微有点小经验,写(熬)篇文章记录一下下~话不多说,直接开始(开始复制粘贴) hhhhh~~开发中也有找类似的图表直接修改 附上链接官方链接 >社区-GALLERY
最近在耍 Echarts 稍微有点小经验,写(熬)篇文章记录一下下~
话不多说,直接开始(开始复制粘贴) hhhhh~~
开发中也有找类似的图表直接修改 附上链接官方链接 >社区-GALLERY
饼图
Doughnut Chart
官方给出了 demo 其实也还挺好看的,只是不适合直接放在业务里面(需要变变色,变色大小什么的)
让我们一步步改造他吧。
let json = { ... legend: { ... icon: "circle", // legend icon形状 也可以自定义 }, series: [{ name: "甜甜圈", type: "pie", radius: ["30%", "60%"], // 'radius' 扇区圆心角展现数据的百分比,半径展现数据的大小。 center: ["50%", "50%"], // 饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。 color: ["#1976D2", "#2196F3", "#03A9F4"], // 颜色 ... }] } 复制代码
是不是很简单!感觉都没什么好写的 23333(继续改,后面使用上面的 json)。
有时候会遇到这种空心圆中间放 icon 图片的时候 于是就有下图
let json = { ... // graphic 是原生图形元素组件。可以支持的图形元素包括: // image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, graphic: { type: "image", left: "center", // 位置 top: "center", // 位置 style: { image: "chartsGraphic.png", // 路径 width: 100, // 宽高 height: 100 } }, ... } 复制代码
继续复制粘贴 emmmm
如果很多个标题,设计稿放在两边! (xiaochangmian)
let json = { ... // 将legend 变成数组形式,左右各一个 legend: [{ x: "left", itemGap: 30, icon: "circle", data: [] // 里面存放名字 }, { x: "right", itemGap: 30, icon: "circle", data: [] // 里面存放名字 } ], ... } // 我自己写了一个方法存进去,可供参考 // 传入数据和 json 配置 // 数字可以抽离出来,大家可以自行改造(或者取长度/2 需要算上单数情况) function setChartsAreaLength(areaName, json) { let arr1 = [], arr2 = []; areaName.map((item, index) => { index < 8 ? (arr1 = [...arr1, item]) : (arr2 = [...arr2, item]); }); json.legend[0].data = arr1; json.legend[1].data = arr2; } 复制代码
Referer of a website
于是继续搞
这个同第一个 改改颜色就好了 然后隐藏标线和文字
let json = { ... series: [{ data: [], label: { show: false // 是否显示标示文字 }, labelLine: { show: false // 是否显示视觉引导线 } }] ... }; 复制代码
Nested Pies
嵌套饼图
let json = { ... // 将legend 变成数组形式,左右各一个 legend: [{ data: ['白天', '晚上'] }, { data: ['上班', '游戏', '休息'] } ], series: [{ radius: [0, '36%'], // 饼图大小 内饼图 从0-36% data: [{ value: 12, name: '白天', }, { value: 12, name: '晚上' } ] }, { name: '分类', type: 'pie', radius: ['44%', '72%'], // 饼图大小 内饼图 从44%-75% data: [{ value: 335, name: '上班' }, { value: 310, name: '游戏' }, { value: 300, name: '休息' } ] } ] ... } 复制代码
大家也可以自行发挥,我看社区里面的大佬发的饼图非常强大也很好看,开发中都可以直接拿过去用(节省开发时间)hhh, 后面我还会继续更新这篇文章的,目前在公司一直都是 jq 所以这些都是原生的,后面也会出 Vue Or React 里面使用的(hhh)
如果阅读中,有什么不明白的 可以问我,也可以去群里交流
Qq:952822399
Qq 群 iD 718639024
大家也可以进来互相交流~
最后就是厚脸皮的一步(觉得不错可以点个 star 哦~~~) 仓库地址
同时也欢迎 Pr 帮我修复不正确的地方!!
以上所述就是小编给大家介绍的《Echarts 系列之复制粘贴大法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Spring 缓存大法
- phpmyadmin getshell大法
- 安卓APP测试之HOOK大法
- iOS 模拟器调试大法了解一下?
- 图片和视频编辑之Matrix大法好
- 重启大法好!线上常见问题排查手册
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。