For the development of front-end visual display of big data analysis results, data analysts can use Python development or realize it. The recommended solution is to use Pyecharts tool.
About pyecharts
Pyecharts is web page code generated using Echarts components in Python.
Echarts is an open source data visualization by Baidu, with good interaction, exquisite chart design, has been recognized by many developers. Python, on the other hand, is an expressive language that is well suited for data processing. When data analysis meets data visualization, Pyecharts was born.
Note: Pyecharts comes in two major versions: v0.5.X and v1. V0.5. X and v1 are incompatible. V1 is a new version.
For example, earlier versions of the code on the web:
from pyecharts import Funnel, Gauge, Graph
# dashboard
gauge = Gauge("Dashboard")
gauge.add('Business Indicators'.'Completion rate'.66.66)
gauge.show_config()
gauge.render(path="./data/02-02 dashboard.html")
Copy the codeError: Unresolved import Gauge.
Modify the code with the new version:
from pyecharts import options as opts
from pyecharts.charts import Gauge, Page
gauge=(
Gauge()
.add("", [("Hair oil efficiency".76.6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Gauge- Basic Example"))
)
gauge.render('gauge.html')
Copy the code
<! DOCTYPE html> <html> <head> <meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="5360c84721be44868cfcbb4c57951b02" class="chart-container" style="width:900px; height:500px;"> animation": true, "animationThreshold": 2000,"animationDuration": 1000, the following code is omittedCopy the codeThis paper introduces the practice of the latest V1 version. Source code from pyecharts official website Pyecharts-gallery.
from pyecharts import options as opts
from pyecharts.charts import Grid, Liquid
from pyecharts.commons.utils import JsCode
l1 = (
Liquid()
.add("lq"[0.6.0.7], center=["60%"."50%"])
.set_global_opts(title_opts=opts.TitleOpts(title="Multiple Liquid displays"))
)
l2 = Liquid().add(
"lq"[0.3254],
center=["25%"."50%"],
label_opts=opts.LabelOpts(
font_size=50,
formatter=JsCode(
"""function (param) { return (Math.floor(param.value * 10000) / 100) + '%'; } "" "
),
position="inside",
),
)
grid = Grid().add(l1, grid_opts=opts.GridOpts()).add(l2, grid_opts=opts.GridOpts())
grid.render("multiple_liquid.html")
Copy the code
from pyecharts.charts import Bar
from pyecharts.faker import Faker
from pyecharts.globals import ThemeType
c = (
Bar({"theme": ThemeType.MACARONS})
.add_xaxis(Faker.choose())
.add_yaxis("Merchants A", Faker.values())
.add_yaxis(Merchants "B", Faker.values())
.set_global_opts(
title_opts={"text": "Bar- Configured via dict"."subtext": "I'm also configured with dict."}
)
.render("bar_base_dict_config.html"))Copy the code
About ECharts
ECharts is an open source visualization library implemented in JavaScript that covers industry charts for a variety of needs.
ECharts is free to use under the Apache-2.0 open source license.
ECharts is compatible with most current browsers (IE8/9/10/11, Chrome, Firefox, Safari, etc.) and a wide range of devices, and can be displayed anytime, anywhere.
The sample code is from www.runoob.com/
<! DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>First instance of ECharts</title>
<! Echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<! -- Prepare a Dom with size (width and height) for ECharts
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
// Initializes the echarts instance based on the prepared DOM
var myChart = echarts.init(document.getElementById('main'));
// Specify the chart configuration items and data
var option = {
title: {
text: 'First ECharts instance'
},
tooltip: {},
legend: {
data: ['sales']},xAxis: {
data: ["Shirt"."Cardigan"."Chiffon shirt."."Pants"."High heels"."Socks"]},yAxis: {},
series: [{
name: 'sales'.type: 'bar'.data: [5.20.36.10.10.20]]}};// Display the chart using the configuration items and data you just specified.
myChart.setOption(option);
</script>
</body>
</html>
Copy the code