基于EChartsV4.2的旭日图设计与实现_echarts旭日图,通过设置visualMap达到添加legend效果资源-CSDN文库

共9个文件

js：3个

png：2个

json：1个

版权申诉

echarts

javascript

ecmascript

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

资源推荐

资源详情

资源评论

收起资源包目录

基于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>

评论收藏

内容反馈

版权申诉