echarts实现旭日图表效果代码
代码语言:html
所属分类:图表
代码描述:echarts实现旭日图表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555']; var bgColor = '#2E2733'; var itemStyle = { star5: { color: colors[0] }, star4: { color: colors[1] }, star3: { color: colors[2] }, star2: { color: colors[3] } }; var data = [{ name: '虚构', itemStyle: { normal: { color: colors[1] } }, children: [{ name: '小说', children: [{ name: '5☆', children: [{ name: '疼' }, { name: '慈悲' }, { name: '楼下的房客' }] }, { name: '4☆', children: [{ name: '虚无的十字架' }, { name: '无声告白' }, { name: '童年的终结' }] }, { name: '3☆', children: [{ name: '疯癫老人日记' }] }] }, { name: '其他', children: [{ name: '5☆', children: [{ name: '纳博科夫短篇小说全集' }] }, { name: '4☆', children: [{ name: '安魂曲' }, { name: '人生拼图版' }] }, { name: '3☆', children: [{ name: '比起爱你,我更需要你' }] }] }] }, { name: '非虚构', itemStyle: { color: colors[2] }, children: [{ name: '设计', children: [{ name: '5☆', children: [{ name: '无界面交互' }] }, { name: '4☆', children: [{ name: '数字绘图的光照与渲染技术' }, { name: '日本建筑解剖书' }] }, { name: '3☆', children: [{ name: '奇幻世界艺术\n&RPG地图绘制讲座' }] }] }, { name: '社科', children: [{ name: '5☆', children: [{ name: '痛点' }] }, { name: '4☆', children: [{ name: '卓有成效的管理者' }, { name: '进化' }, { name: '后物欲时代的来临', }] }, { name: '3☆', children: [{ name: '疯癫与文明' }] }] }, { name: '心理', children: [{ name: '5☆', children: [{ name: '我们时代的神经症人格' }] }, { name: '4☆', children: [{ name: '皮格马利翁效应' }, { name: '受伤的人' }] }, { name: '3☆', }, { name: '2☆', children: [{ name: '迷恋' }] }] }, { name: '居家', children: [{ name: '4☆', children: [{ name: '把房子住成家' }, { name: '只过必要生活' }, { name: '北欧简约风格' }] }] }, { name: '绘本', children: [{ name: '5☆', children: [{ name: '设计诗' }] }, { name: '4☆', children: [{ name: '假如生活糊弄了你' }, { name: '博物学家的神秘动物图鉴' }] }, { name: '3☆', children: [{ name: '方向' }] }] }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0