var myChart = echarts.init(document.getElementById('echart1')); option = { legend: { //orient: 'vertical', top:'20', left:'center', itemWidth: 10, itemHeight: 10, data:['男','女'], textStyle: { color: 'rgba(255,255,255,.5)', fontSize:'12', } }, tooltip: { trigger: 'item', formatter: "{b} : {c} ({d}%)" }, visualMap: { show: false, min: 500, max: 600, inRange: { //colorLightness: [0, 1] } }, series: [{ name: '分区名称', type: 'pie', radius: ['30%', '60%'], center: ['50%', '60%'], color: ['#0086e5', '#30c5ed', '#9fe7b8', '#fedb5b', '#ff9f7d', '#fb7293', '#e7bcf2'], //'#FBFE27','rgb(11,228,96)','#FE5050' data: [{ value: 10, name: '男' }, { value: 40, name: '女' } ].sort(function(a, b) { return a.value - b.value }), roseType: 'radius', label: { normal: { formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'), rich: { d: { color: 'rgb(241,246,104)', fontSize: 14, fontWeight:'bold', }, b: { color: 'rgb(98,137,169)', fontSize: 12, }, }, } }, labelLine: { normal: { lineStyle: { color: 'rgb(98,137,169)', }, smooth: 0.2, length: 5, length2: 9, } }, itemStyle: { normal: { shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 50, } } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize(); }); }

时间: 2024-01-02 07:04:51 浏览: 120

这段代码是使用 echarts 库来绘制一个饼图的例代码。首先通过 `echarts.init` 方法初始化一个 echarts 实例，并指定要绘制图表的 DOM 元素。然后定义了一个 `option` 对象，包含了图表的配置项，如图例、提示框、颜色、数据等。接着使用 `myChart.setOption` 方法将配置项应用到图表上，并监听窗口大小改变事件，实现图表的自适应调整。最后，将代码包裹在一个函数中，可以通过调用该函数来生成图表。

<%@page pageEncoding="UTF-8" import="java.sql."%> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>柱状图显示数值</title> </head> <body style="height:600px; margin: 0"> <div id="main" style="width: 2000px;height:80%;"></div> <script type="text/javascript" src="js/echarts.min.js"></script> <script> function show(title,value){ var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { // 标题 title: { text: 'ECharts 入门示例' }, // 工具箱 toolbox: { show: true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, magicType: {type: ['line', 'bar']}, restore: {}, saveAsImage: {} } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: title }, yAxis: { type: 'value' }, // 数据 series: [{ name: '销量', type: 'bar', data: value, itemStyle: { normal: { label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } }, }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script> <% Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://101.43.149.243:3306/test"; Connection con=DriverManager.getConnection(url,"guest","guest"); String sql="select from logpvbyprovince order by num desc limit 10"; PreparedStatement pst=con.prepareCall(sql); ResultSet rs=pst.executeQuery(); %> <script type="text/javascript"> title=new Array(); value=new Array(); <% while(rs.next()){ %> title.push("<%=rs.getString(1)%>");value.push(<%=rs.getInt(2)%>); <% } rs.close(); pst.close(); con.close(); %> show(title,value); </script> </body> </html>改为用饼图展示

好的，我来为您改写代码，展示用饼图展示前10名省份的数据： <%@page pageEncoding="UTF-8" import="java.sql.*"%> <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> <title>饼图显示数值</title> </head> <body style="height:600px; margin: 0"> <div id="main" style="width: 800px;height:80%;"></div> <script type="text/javascript" src="js/echarts.min.js"></script> <script> function show(title,value){ var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '前10名省份饼图', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: title }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: value } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } </script> <% Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://101.43.149.243:3306/test"; Connection con=DriverManager.getConnection(url,"guest","guest"); String sql="select * from logpvbyprovince order by num desc limit 10"; PreparedStatement pst=con.prepareCall(sql); ResultSet rs=pst.executeQuery(); %> <script type="text/javascript"> var title = new Array(); var value = new Array(); <% while(rs.next()){ %> title.push("<%=rs.getString(1)%>"); value.push({value:<%=rs.getInt(2)%>, name:"<%=rs.getString(1)%>"}); <% } %> rs.close(); pst.close(); con.close(); show(title, value); </script> </body> </html> 希望这可以帮助您展示饼图。

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>淘宝数据分析可视化</title> <script src="https:/ /cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script> </head> <body> <h1 align="center ">Spark淘宝数据分析可视化图表</h1> <div class="empty"></div> <div class="contain"> <div id="box1" class="public"></div> <div id="box2" class="public"></div> <div id="box3" class="public"></div> <div id="box4" class="public"></div> </div> <script type="text/javascript"> $.getJSON( " /static/result1.json ", function(data) { var name = [ ] var value = [ ] $.each(data,function(key,val) { name. push(val[ "action" ]); value.push({ "value" : val[ "count"], "name" : val[ "action"] }) }); var mychart1 = echarts.init(document.getElementById( 'box1')); //指定图表的配置项和数据 var option1 = { title: { text: '用户行为统计', x:'center' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', data: name }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['pie', 'funnel'], option1:{ funnel:{ x:"25%", width:"50%", funnelAlign:"left", max:1548 } } }, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, series : [ { name: '用户行为', type: 'pie', radius : '55%', center: ['50%', '60%'], data: value.sort(function (a, b) { return a.value - b.value; }), itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; mychart1.setOption(option1); }) </script> <script type="text/javascript"></script> <script type="text/javascript"></script> <script type="text/javascript"></script> <script type="text/javascript"></script> </body>帮我修改一下这一段代码，让图表可以运行出来

这段代码可能需要做一些修改才能正确运行。以下是可能需要修改的部分： 1. 修改 JSON 文件路径在代码中，有一行类似于以下内容的代码： $.getJSON( " /static/result1.json ", function(data) { 这行代码会尝试从 `/static/result1.json` 路径加载 JSON 数据。你需要确保这个路径是正确的，并且 JSON 数据可以被加载成功。 2. 修改 ECharts 版本在代码中，有一行类似于以下内容的代码： <script src="https://cdn.bootcss.com/echarts/3.6.2/echarts.min.js"></script> 这行代码会加载 ECharts JavaScript 库，但是它指定的版本可能已经过时了。你需要在这里指定一个最新的 ECharts 版本，或者根据你的项目需要指定一个特定的版本。 3. 检查 HTML 结构确保你的 HTML 结构是正确的，并且包含了所有必要的元素和样式。在这段代码中，HTML 结构看起来是正确的，但是你需要确保它被正确地嵌套和格式化。 4. 检查 JavaScript 中的变量名在代码中，有一些变量名被用来存储数据和配置，例如 `name`、`value`、`mychart1` 和 `option1`。确保这些变量名没有被重复定义，而且它们的名称在代码的各个部分中是一致的。如果你遇到了其他问题，可以尝试调试代码并查看浏览器的控制台输出，以帮助你找到并修复问题。

阅读全文

相关推荐

echarts实现地图以及半圆图表

c#winform插入各种ECharts统计图.rar

Echart-Map地图

echarts legend 增加数子

echarts代码：绘制极坐标下的堆叠柱状图，设置可以选择不同数据集

echarts 的lenged 形状长方形

Echarts示例:盒须图echartsY轴为24小时时间轴,X轴为不同天数，展示一个完整的盒须图echarts示例

echarts legend如何显示在下方

echarts柱状图的图例竖着排

echarts图表添加定时器为饼图1s切换一个hover突出的效果

echarts 柱状图设置图例

用ECharts可视化数据，各处所有的具体实例代码

帮我用echarts绘制饼图和玫瑰图

echarts 3d饼状图

echart画一个饼图

最新推荐

数学建模拟合与插值.ppt

[net毕业设计]ASP.NET教育报表管理系统-权限管理模块（源代码+论文）.zip

MATLAB实现小波阈值去噪：Visushrink硬软算法对比

管理建模和仿真的文件

【交互特征的影响】：分类问题中的深入探讨，如何正确应用交互特征

c语言从链式队列 中获取头部元素并返回其状态的函数怎么写

易语言实现画板图像缩放功能教程

"互动学习：行动中的多样性与论文攻读经历"

【交互特征：优化与调试的艺术】：实战技巧，提升回归模型与分类模型的性能

用IDEA写一个高速收费系统框架附带代码

c语言从链式队列中获取头部元素并返回其状态的函数怎么写