首页
参考手册
HTML / CSS
HTML
HTML5
CSS
CSS3
Bootstrap3
Bootstrap4
Bootstrap5
Font Awesome
Foundation
JavaScript
JavaScript
HTML DOM
jQuery
AngularJS
AngularJS2
Vue.js
Vue3
React
TypeScript
jQuery UI
jQuery EasyUI
Node.js
AJAX
JSON
Echarts
Chart.js
Highcharts
Google 地图
服务端
Python
Python2.x
Linux
Docker
Ruby
Java
C语言
C++
Perl
Servlet
JSP
Lua
Rust
Scala
Go
PHP
数据结构与算法
Django
Zookeeper
设计模式
正则表达式
Maven
Verilog
ASP
AppML
VBScript
数据库
SQL
MySQL
PostgreSQL
SQLite
MongoDB
Redis
Memcached
数据分析
Python
NumPy
Pandas
Matplotlib
Scipy
R语言
Julia
移动端
Android
Swift
jQuery Mobile
ionic
Kotlin
XML 教程
XML
DTD
XML DOM
XSLT
XPath
XQuery
XLink
XPointer
XML Schema
XSL-FO
SVG
ASP.NET
ASP.NET
C#
Web Pages
Razor
MVC
Web Forms
Web Service
Web Service
WSDL
SOAP
RSS
RDF
开发工具
Eclipse
Git
Svn
Markdown
网站建设
HTTP
网站建设指南
浏览器信息
网站主机教程
TCP/IP
W3C
网站品质
技术文章
CMS建站篇
SEO运营篇
模板下载
文章汇
源代码:
下载代码
点击运行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 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: { 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: '方向' }] }] }, { 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>
运行结果: