使用JS charts来画图表(二)——饼状图

本文介绍如何使用JS Charts库创建饼状图。通过提供的XML构造和示例,了解饼状图的实现细节,同时指出demo中的JS不支持中文的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如上是一个饼状图:

代码如下:

<html>
<head>

<title>部门管理</title>

<script type="text/javascript" src="codebase/jscharts.js"></script>

</head>
<body>

<div id="graph">Loading graph...</div>

<script type="text/javascript">
	
	/* var myChart = new JSChart('graph', 'bar');
	myChart.setDataXML("data/chart.xml"); 
	myChart.setSize(1100, 800);
	myChart.setTitle("按集团和管理部门统计");
	myChart.draw();  */
	var myChart = new JSChart('graph', 'pie');
	myCha
# -*- coding: utf-8 -*- import pandas as pd from pyecharts import options as opts from pyecharts.charts import Line,Bar,Funnel,Pie from pyecharts.components import Table from pyecharts.options import ComponentTitleOpts from sqlalchemy import create_engine from pyecharts.charts import Page from pyecharts.charts import WordCloud from collections import Counter import jieba import re # 创建数据库连接 engine = create_engine('mysql+pymysql://root:123456@localhost/doubandata') #1. #2. def line_chart2(): # 从数据库中读取数据 query = "SELECT show_time FROM t_music" df = pd.read_sql(query, engine) # 处理日期数据,提取年份 df['year'] = pd.to_datetime(df['show_time'], errors='coerce').dt.year # 统计每年的歌曲发行数量 year_counts = df['year'].dropna().astype(int).value_counts().sort_index() # 准备数据用于生成折线 years = year_counts.index.astype(str).tolist() counts = year_counts.values.tolist() # 创建折线 line = Line(init_opts=opts.InitOpts(width="1600px", height="800px")) line.add_xaxis(years) line.add_yaxis("歌曲发行数量", counts, label_opts=opts.LabelOpts(is_show=True, position="top")) # 设置全局配置项 line.set_global_opts( title_opts=opts.TitleOpts(title="每年歌曲发行数量统计"), xaxis_opts=opts.AxisOpts(type_="category", name="年份"), yaxis_opts=opts.AxisOpts(type_="value", name="发行数量"), tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross") ) # 渲染图表到HTML文件 line.render("2.song_release_counts_by_year.html") return line #3. def line_chart3(): # 从数据库中读取数据 query = "SELECT show_time, score FROM t_music" df = pd.read_sql(query, engine) # 将 score 列转换为数值类型,无法转换的会变为 NaN df['score'] = pd.to_numeric(df['score'], errors='coerce') # 处理日期数据,提取年份 df['year'] = pd.to_datetime(df['show_time'], errors='coerce').dt.year # 删除无效数据(如日期或评分为空) df = df.dropna(subset=['year', 'score']) # 按年份分组并计算每年的平均评分,保留一位小数 yearly_avg_scores = df.groupby('year')['score'].mean().round(1).sort_index() # 准备数据用于生成折线 years = yearly_avg_scores.index.astype(int).astype(str).tolist() # 确保年份为整数且不带小数点 avg_scores = yearly_avg_scores.values.tolist() # 创建折线 line = Line(init_opts=opts.InitOpts(width="1600px", height="800px")) line.add_xaxis(years) line.add_yaxis("平均评分", avg_scores, label_opts=opts.LabelOpts(is_show=True, position="top")) # 设置全局配置项 line.set_global_opts( title_opts=opts.TitleOpts(title="每年歌曲发行的平均评分"), xaxis_opts=opts.AxisOpts(type_="category", name="年份"), yaxis_opts=opts.AxisOpts(type_="value", name="平均评分", min_=7, max_=10), tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="cross") ) # 渲染图表到 HTML 文件 line.render("3.song_release_scores_by_year.html") return line page = Page( page_title="基于Python的豆瓣音乐数据分析与可视化", layout=Page.DraggablePageLayout, # 拖拽方式 ) page.add_js_funcs( """ document.body.style.backgroundColor = '#f0f8ff'; // 设置背景颜色为淡蓝色 """ ) # 添加图表到页面 page.add( # 绘制折线 line_chart2(), line_chart3(), # 绘制表格 ) # 渲染大屏到临时HTML文件 page.render('大屏_临时1.html') 怎么生成好看个性化的可视化大屏网页
最新发布
03-31
生成个性化、美观的可视化大屏网页需要结合多种技术和工具,以下是详细的步骤及建议: --- ### **1. 设计整体布局** - 使用 `pyecharts` 提供的 `Page` 类构建整个页面,并设置合理的标题和拖拽模式。 - 可通过 `add_js_funcs()` 自定义 CSS 样式或 JavaScript 功能来美化界面。 **示例代码改进:** ```python page = Page( page_title="基于Python的豆瓣音乐数据分析与可视化", layout=Page.SimplePageLayout, # 或者选择 SimplePageLayout 进行自适应排版 ) # 定义背景样式 page.add_js_funcs(""" document.body.style.backgroundColor = '#2c3e50'; // 背景颜色改为深色主题 """) ``` --- ### **2. 增强图表效果** #### (1) 折线优化: 可以添加更多交互功能,例如高亮显示、动态加载等。 **改进建议:** - 修改线条颜色为主题色调(如绿色或橙色),使其更醒目; - 开启平滑曲线 (`is_smooth`) 和标记点标注关键值。 修改后的折线部分代码如下: ```python line = ( Line(init_opts=opts.InitOpts(bg_color="#2c3e50", width="1600px", height="800px")) .add_xaxis(years) .add_yaxis( series_name="歌曲发行数量", y_axis=counts, is_smooth=True, # 平滑曲线 label_opts=opts.LabelOpts(color="white"), # 文本颜色设为白色 markpoint_opts=opts.MarkPointOpts(data=[opts.MarkPointItem(type_="max")]), # 显示最大值点 ) .set_global_opts( title_opts=opts.TitleOpts(title="每年歌曲发行数量统计", pos_top="1%", pos_left="center"), legend_opts=opts.LegendOpts(textstyle_opts=opts.TextStyleOpts(color="white")), tooltip_opts=opts.TooltipOpts(trigger="item"), toolbox_opts=opts.ToolboxOpts(is_show=True), # 工具栏选项开启 ) ) ``` #### (2) 表格设计: 如果想展示详细数据表,则推荐直接嵌入 HTML `<table>` 元素并通过 `Table` 配置列宽比例。 样例函数如下: ```python from pyecharts.commons.utils import JsCode def generate_table(): table_data = [ ["Year", "Count"], [2019, 100], [2020, 200], ... # 添加实际查询结果填充内容 ] headers = table_data[0] rows = table_data[1:] table_component = Table() table_component.add(headers, rows).set_global_opts( title_opts=ComponentTitleOpts(title="表格数据概览") ).render_embed() # 返回纯HTML字符串 return table_component ``` 将其插入到现有页签里即可。 --- ### **3. 整合其他组件提升吸引力** 除了已有的折线外,还可以补充饼状图、柱形等形式展现更多信息维度,比如各地区用户占比分析、关键词云热力分布等等... 例子——创建词频统计 + 关键字云像模块: ```python def wordcloud_chart(): query = "SELECT intro FROM t_music LIMIT 50" intros_df = pd.read_sql(query, con=engine)['intro'] all_text = ''.join(map(str.strip,intros_df)) seg_list = jieba.lcut(all_text.replace('\n',' ').replace(' ','')) # 分词处理 c = Counter(seg_list) words_and_counts = [{"name": w,"value": v} for w,v in dict(c.most_common()).items()] wc = WordCloud(width="1400px",height="700px").add(series_name="",data_pair=words_and_counts, word_size_range=[20,100]).set_global_opts( title_opts=opts.TitleOpts(title="歌词高频词汇词云") ) return wc ``` 随后将该段落附加至最终呈现列表内: ```python page.add(... ,wordcloud_chart()) ``` --- ### **4. 发布上线** 最后一步就是把本地调试完成的作品部署出去让更多人访问啦!可通过 Flask/Django 构建简易服务器发布静态资源;亦或是借助在线托管服务 GitHub Pages/AWS S3 实现免运维维护操作~ 完整流程总结下来包括但不限于以下几个要点: 1. 数据采集清洗加工阶段 -> SQL 查询语句编写+Pandas DataFrame 操作技巧学习掌握。 2. 像渲染制作阶段 -> PyEcharts API 的熟悉程度至关重要。 3. 页面定制化调整阶段 -> 结合前端知识丰富用户体验度。 希望对你有所帮助! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

那些特立独行的猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值