基于EChartsV4.2的旭日图设计与实现_echarts旭日图资源-CSDN文库

共9个文件

js：3个

png：2个

json：1个

版权申诉

echarts

javascript

ecmascript

4 浏览量 2022-04-15 21:09:51 上传评论收藏 590KB RAR 举报

旭日图，又称为环形堆积图，是一种特殊的数据可视化方式，常用于展示层次结构或者比例关系。在ECharts V4.2版本中，我们可以利用其丰富的图表类型和自定义能力来实现旭日图的设计与实现。ECharts是一个用JavaScript编写的开源数据可视化库，支持各种图表类型，如折线图、柱状图、饼图等，同时也支持旭日图的绘制。了解ECharts的基本使用方法是至关重要的。在ECharts中，我们需要创建一个容器，例如HTML的`<div>`元素，然后通过JavaScript初始化ECharts实例，并设置相应的配置项。配置项包括数据、图表类型、颜色、标签等，这些都是实现旭日图的关键部分。在创建旭日图时，你需要提供层次结构的数据。数据通常是一个数组，其中每个元素代表一个层级，包含子元素的数量和对应的值。例如： ```javascript var data = [ {name: '第一层', value: 36}, {name: '第二层', children: [ {name: '子项1', value: 15}, {name: '子项2', value: 10}, {name: '子项3', value: 8} ]}, {name: '第三层', value: 7} ]; ``` 在ECharts配置项中，设置`type`为`sunburst`来指定我们要创建旭日图。此外，可以使用`levels`配置项来自定义不同层级的样式，包括颜色、字体大小、边框宽度等。例如： ```javascript var option = { series: [{ type: 'sunburst', data: data, levels: [{ color: ['#FFD700', '#9ACD32', '#ADD8E6'], label: { normal: { fontSize: 14 } }, itemStyle: { borderWidth: 2 } }, { color: ['#FF69B4', '#00FFFF', '#90EE90'], label: { normal: { fontSize: 12 } }, itemStyle: { borderWidth: 1 } }] }] }; ``` 接下来，将配置项应用到ECharts实例上： ```javascript var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); ``` 在这个过程中，我们不仅了解了如何使用ECharts V4.2创建旭日图，还学习了如何处理数据结构、设置配置项以及应用样式。ECharts提供了强大的API和丰富的事件处理机制，允许我们在用户交互时动态更新图表，例如点击事件可高亮选中的扇区。为了更好地理解这个过程，你可以参考压缩包中的"基于ECharts V4.2的旭日图设计与实现"文件，它可能包含了示例代码和具体的实现步骤。通过阅读和运行这些代码，你将更深入地掌握旭日图的实现细节，并能够根据自己的需求进行调整和扩展。 ECharts是一个强大且灵活的前端数据可视化工具，它使得在Web应用中展示复杂数据变得简单直观。通过熟练掌握ECharts，你可以设计出各种各样的图表，包括本文讨论的旭日图，以帮助用户更好地理解和分析数据。

资源推荐

资源详情

资源评论

收起资源包目录

基于ECharts V4.2的旭日图设计与实现.rar （9个子文件）

基于ECharts V4.2的旭日图设计与实现

css

app.css 2KB

img

header.png 45KB

bg.png 208KB

thumb.jpg 96KB

data

industry.json 6KB

index.html 3KB

jquery-3.3.1.min.js 85KB

echarts.min.js 727KB

echarts-theme-shine.js 4KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>旭日图 - 基于ECharts V4.2</title> <link rel="stylesheet" type="text/css" href="css/app.css" /> </head> <body>  <div id="container"> <div class="chart-div" id="sunChart"> <div class="chart-loader"><div class="loader"></div></div> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/echarts-theme-shine.js"></script> <script type="text/javascript"> $(function() { //初始化报表对象并指定其风格 const sunChart = echarts.init(document.getElementById("sunChart"), 'shine'); const sunChartOpt = { title: { text: "上市公司行业分类", subtext: "纯属虚构", textStyle: { color: "#fff" }, subtextStyle: { fontSize: 12 }, left: 15, top: 15 }, tooltip: { show: true }, series: { type: "sunburst", radius: [0, "75%"], center: ["50%", "52%"], sort: null, levels: [{}, { r0: "15%", r: "35%", itemStyle: { borderWidth: 0.8 }, label: { align: "right", fontSize: 10, color: '#fff', textBorderWidth: 0 } }, { r0: "35%", r: "75%", itemStyle: { borderWidth: 0.8 }, label: { position: 'outside', padding: 3, fontSize: 10, color: 'auto', textBorderWidth: 0 } }] } }; sunChart.setOption(sunChartOpt); //获取报表数据 $.ajax({ url: "data/industry.json", dataType: "json" }).done(function() { $("#sunChart").addClass("chart-done"); }).done(function(data) { //console.log(data); //自定义特定数据项的样式风格 const itemStyle = {color: "#800080"}; data[2].itemStyle = itemStyle; for(let i in data[2].children) { data[2].children[i].itemStyle = itemStyle; } //渲染报表数据 sunChart.setOption({ series: { data: data } }); }).fail(function(jqXHR) { console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText); }); //浏览器窗口发生变化时，重置报表大小 $(window).resize(function() { sunChart.resize(); }); }); </script> </body> </html>

评论收藏

内容反馈

版权申诉