<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <!--从本地导入js文件，或以CDN的方式导入--> <!--导入完全js文件，或支持可视化操作的js文件--> <!--前端开源CDN加速服务，选择对应的js链接，例如本利中的echarts--> <!--https://www.bootcdn.cn/--> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.js"></script> </head> <body> <!--定义可视化数据容积，用于承载可视化数据对象--> <div id="main" style=" 620px;height:620px;"></div> <script type="text/javascript"> //echarts 中有大量数据可视化模板 //https://echarts.apache.org/examples/zh/index.html var myChart = echarts.init(document.getElementById('main')); //初始化可视化数据载体对象，此步至关重要。 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: { 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: '奇幻世界艺术 &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: '方向' }] }] }, { name: '哲学', children: [{ name: '4☆', children: [{ name: '人生的智慧' }] }] }, { name: '技术', children: [{ name: '5☆', children: [{ name: '代码整洁之道' }] }, { name: '4☆', children: [{ name: 'Three.js 开发指南' }] }] }] }]; for (var j = 0; j < data.length; ++j) { var level1 = data[j].children; for (var i = 0; i < level1.length; ++i) { var block = level1[i].children; var bookScore = []; var bookScoreId; for (var star = 0; star < block.length; ++star) { var style = (function (name) { switch (name) { case '5☆': bookScoreId = 0; return itemStyle.star5; case '4☆': bookScoreId = 1; return itemStyle.star4; case '3☆': bookScoreId = 2; return itemStyle.star3; case '2☆': bookScoreId = 3; return itemStyle.star2; } })(block[star].name); block[star].label = { color: style.color, downplay: { opacity: 0.5 } }; if (block[star].children) { style = { opacity: 1, color: style.color }; block[star].children.forEach(function (book) { book.value = 1; book.itemStyle = style; book.label = { color: style.color }; var value = 1; if (bookScoreId === 0 || bookScoreId === 3) { value = 5; } if (bookScore[bookScoreId]) { bookScore[bookScoreId].value += value; } else { bookScore[bookScoreId] = { color: colors[bookScoreId], value: value }; } }); } } level1[i].itemStyle = { color: data[j].itemStyle.color }; } } option = { backgroundColor: bgColor, color: colors, series: [{ type: 'sunburst', center: ['50%', '48%'], data: data, sort: function (a, b) { if (a.depth === 1) { return b.getValue() - a.getValue(); } else { return a.dataIndex - b.dataIndex; } }, label: { rotate: 'radial', color: bgColor }, itemStyle: { borderColor: bgColor, borderWidth: 2 }, levels: [{}, { r0: 0, r: 40, label: { rotate: 0 } }, { r0: 40, r: 105 }, { r0: 115, r: 140, itemStyle: { shadowBlur: 2, shadowColor: colors[2], color: 'transparent' }, label: { rotate: 'tangential', fontSize: 10, color: colors[0] } }, { r0: 140, r: 145, itemStyle: { shadowBlur: 80, shadowColor: colors[0] }, label: { position: 'outside', textShadowBlur: 5, textShadowColor: '#333', }, downplay: { label: { opacity: 0.5 } } }] }] }; myChart.setOption(option); //渲染至页面上 </script> </body> </html>
关于百度echarts数据可视化js插件基本使用样例
作者：黄河大道东
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利