掘金 后端 ( ) • 2021-07-09 11:20
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body ul li{margin-bottom:0;list-style:inherit}.markdown-body ol li .task-list-item,.markdown-body ul li .task-list-item{list-style:none}.markdown-body ol li .task-list-item ol,.markdown-body ol li .task-list-item ul,.markdown-body ul li .task-list-item ol,.markdown-body ul li .task-list-item ul{margin-top:0}.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-top:3px}.markdown-body ol li{padding-left:6px}.markdown-body .contains-task-list{padding-left:0}.markdown-body .task-list-item{list-style:none}@media (max-width:720px){.markdown-body h1{font-size:24px}.markdown-body h2{font-size:20px}.markdown-body h3{font-size:18px}}

对于大数据分析结果前端可视化展示开发,数据分析者可以使用python开发也能实现,这里推荐方案是使用pyecharts工具实现。

关于pyecharts

pyecharts是通过python生成使用Echarts组件网页代码。

Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts 诞生了。

注意: pyecharts 分为 v0.5.X 和 v1 两个大版本,v0.5.X 和 v1 间不兼容,v1 是一个全新的版本。

例如网上早期版本代码:

from pyecharts import Funnel, Gauge, Graph
# 仪表盘
gauge = Gauge("仪表盘")
gauge.add('业务指标', '完成率', 66.66)
gauge.show_config()
gauge.render(path="./data/02-02仪表盘.html")
复制代码

编辑报错:Unresolved import Gauge。

按新版本修改代码:

from pyecharts import options as opts
from pyecharts.charts import Gauge, Page

gauge=(
     Gauge()
     .add("", [("发油效率", 76.6)])
     .set_global_opts(title_opts=opts.TitleOpts(title="Gauge-基本示例"))
     )
gauge.render('gauge.html')
复制代码

在这里插入图片描述 在python源代码目录下生成gauge.html,内容节选代码如下(pyecharts自动生成的HTML+JS代码):




    "UTF-8">
    Awesome-pyecharts
            type</span>=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-string">"https://assets.pyecharts.org/assets/echarts.min.js"</span>>



    
id="5360c84721be44868cfcbb4c57951b02" class="chart-container" style="width:900px; height:500px;">
var chart_5360c84721be44868cfcbb4c57951b02 = echarts.init( document.getElementById('5360c84721be44868cfcbb4c57951b02'), 'white', {renderer: 'canvas'}); var option_5360c84721be44868cfcbb4c57951b02 = { "</span>animation<span class="hljs-string">": true, "</span>animationThreshold<span class="hljs-string">": 2000, "</span>animationDuration<span class="hljs-string">": 1000, 以下代码略 </span><span class="copy-code-btn">复制代码</span></code></pre> <p>本文按最新V1版本实践介绍。源代码来自pyecharts官方网站<a href="https://link.juejin.cn/?target=https%3A%2F%2Fgallery.pyecharts.org%2F%23%2FREADME" target="_blank" rel="nofollow noopener noreferrer" title="https://gallery.pyecharts.org/#/README" ref="nofollow noopener noreferrer">pyecharts-gallery</a>。</p> <pre><code class="hljs language-python copyable" lang="python"><span class="hljs-keyword">from</span> pyecharts <span class="hljs-keyword">import</span> options <span class="hljs-keyword">as</span> opts <span class="hljs-keyword">from</span> pyecharts.charts <span class="hljs-keyword">import</span> Grid, Liquid <span class="hljs-keyword">from</span> pyecharts.commons.utils <span class="hljs-keyword">import</span> JsCode l1 = ( Liquid() .add(<span class="hljs-string">"lq"</span>, [<span class="hljs-number">0.6</span>, <span class="hljs-number">0.7</span>], center=[<span class="hljs-string">"60%"</span>, <span class="hljs-string">"50%"</span>]) .set_global_opts(title_opts=opts.TitleOpts(title=<span class="hljs-string">"多个 Liquid 显示"</span>)) ) l2 = Liquid().add( <span class="hljs-string">"lq"</span>, [<span class="hljs-number">0.3254</span>], center=[<span class="hljs-string">"25%"</span>, <span class="hljs-string">"50%"</span>], label_opts=opts.LabelOpts( font_size=<span class="hljs-number">50</span>, formatter=JsCode( <span class="hljs-string">"""function (param) { return (Math.floor(param.value * 10000) / 100) + '%'; }"""</span> ), position=<span class="hljs-string">"inside"</span>, ), ) grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts()) grid.render(<span class="hljs-string">"multiple_liquid.html"</span>) <span class="copy-code-btn">复制代码</span></code></pre> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e445142782a744209a5af343919c1844~tplv-k3u1fbpfcp-zoom-1.image" alt="在这里插入图片描述" loading="lazy" referrerpolicy="no-referrer"></p> <pre><code class="hljs language-python copyable" lang="python"><span class="hljs-keyword">from</span> pyecharts.charts <span class="hljs-keyword">import</span> Bar <span class="hljs-keyword">from</span> pyecharts.faker <span class="hljs-keyword">import</span> Faker <span class="hljs-keyword">from</span> pyecharts.<span class="hljs-built_in">globals</span> <span class="hljs-keyword">import</span> ThemeType c = ( Bar({<span class="hljs-string">"theme"</span>: ThemeType.MACARONS}) .add_xaxis(Faker.choose()) .add_yaxis(<span class="hljs-string">"商家A"</span>, Faker.values()) .add_yaxis(<span class="hljs-string">"商家B"</span>, Faker.values()) .set_global_opts( title_opts={<span class="hljs-string">"text"</span>: <span class="hljs-string">"Bar-通过 dict 进行配置"</span>, <span class="hljs-string">"subtext"</span>: <span class="hljs-string">"我也是通过 dict 进行配置的"</span>} ) .render(<span class="hljs-string">"bar_base_dict_config.html"</span>) ) <span class="copy-code-btn">复制代码</span></code></pre> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b15b8d0051742dfa387968797e22bc4~tplv-k3u1fbpfcp-zoom-1.image" alt="在这里插入图片描述" loading="lazy" referrerpolicy="no-referrer"></p> <h1 data-id="heading-1">关于ECharts</h1> <p>ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。</p> <p>ECharts 遵循 Apache-2.0 开源协议,免费商用。</p> <p>ECharts 兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等)及兼容多种设备,可随时随地任性展示。</p> <p>样例代码来自<a href="https://link.juejin.cn/?target=https%3A%2F%2Fwww.runoob.com%2Fecharts%2Fecharts-tutorial.html" target="_blank" rel="nofollow noopener noreferrer" title="https://www.runoob.com/echarts/echarts-tutorial.html" ref="nofollow noopener noreferrer">www.runoob.com/</a></p> <pre><code class="hljs language-javascript copyable" lang="javascript"><!DOCTYPE html> <span class="xml"><span class="hljs-tag"><<span class="hljs-name">html</span>></span> <span class="hljs-tag"><<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>第一个 ECharts 实例<span class="hljs-tag"></<span class="hljs-name">title</span>></span> <span class="hljs-comment"><!-- 引入 echarts.js --></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">head</span>></span> <span class="hljs-tag"><<span class="hljs-name">body</span>></span> <span class="hljs-comment"><!-- 为ECharts准备一个具备大小(宽高)的Dom --></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width: 600px;height:400px;"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-comment">// 基于准备好的dom,初始化echarts实例</span> <span class="hljs-keyword">var</span> myChart = echarts.init(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'main'</span>)); <span class="hljs-comment">// 指定图表的配置项和数据</span> <span class="hljs-keyword">var</span> option = { <span class="hljs-attr">title</span>: { <span class="hljs-attr">text</span>: <span class="hljs-string">'第一个 ECharts 实例'</span> }, <span class="hljs-attr">tooltip</span>: {}, <span class="hljs-attr">legend</span>: { <span class="hljs-attr">data</span>:[<span class="hljs-string">'销量'</span>] }, <span class="hljs-attr">xAxis</span>: { <span class="hljs-attr">data</span>: [<span class="hljs-string">"衬衫"</span>,<span class="hljs-string">"羊毛衫"</span>,<span class="hljs-string">"雪纺衫"</span>,<span class="hljs-string">"裤子"</span>,<span class="hljs-string">"高跟鞋"</span>,<span class="hljs-string">"袜子"</span>] }, <span class="hljs-attr">yAxis</span>: {}, <span class="hljs-attr">series</span>: [{ <span class="hljs-attr">name</span>: <span class="hljs-string">'销量'</span>, <span class="hljs-attr">type</span>: <span class="hljs-string">'bar'</span>, <span class="hljs-attr">data</span>: [<span class="hljs-number">5</span>, <span class="hljs-number">20</span>, <span class="hljs-number">36</span>, <span class="hljs-number">10</span>, <span class="hljs-number">10</span>, <span class="hljs-number">20</span>] }] }; <span class="hljs-comment">// 使用刚指定的配置项和数据显示图表。</span> myChart.setOption(option); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span> <span class="hljs-tag"></<span class="hljs-name">body</span>></span> <span class="hljs-tag"></<span class="hljs-name">html</span>></span> </span><span class="copy-code-btn">复制代码</span></code></pre> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a44d22f740dd44d88a8b2f176260e5ea~tplv-k3u1fbpfcp-zoom-1.image" alt="在这里插入图片描述" loading="lazy" referrerpolicy="no-referrer"></p></div>