Python - 05.怎么使用ECharts实现数据可视化_python和echarts实现数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44021223/article/details/121939088

ECharts是一个基于JavaScript的开源可视化图表库，官方文档【Handbook - Apache ECharts】。
将echarts.js文件引入到目录下，然后利用Flask框架和官方文档的快速上手，可以搭建出基本的可视化框架。
通过Flask框架将整理好的数据传入HTML，替换官方示例的数据，然后运行，即可在网页中得到可视化图表。

import xlrd
from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def index():
    book = xlrd.open_workbook('static/movie.xls')
    sheet = book.sheet_by_name('sheet1')
    row = sheet.nrows
    name = []
    score = []
    people = []
    for i in range(row):
        name.append(sheet.cell(i, 0).value)
        score.append(sheet.cell(i, 2).value)
        people.append(sheet.cell(i, 3).value)
    return render_template('index.html', name=name, score=score, people=people)


if __name__ == '__main__':
    app.run()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 引入 echarts.js 文件 -->
    <script src="static/echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 100%;height:500px;"></div>
<script type="text/javascript">
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['评分', '人数']
        },
        xAxis: [
            {
                type: 'category',
                data: {{ name|tojson }},
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '评分',
                min: 0,
                max: 10,
                interval: 2,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                type: 'value',
                name: '人数',
                min: 0,
                max: 3000000,
                interval: 500000,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: '评分',
                type: 'line',
                data: {{ score|tojson }}
            },
            {
                name: '人数',
                type: 'bar',
                yAxisIndex: 1,
                data: {{ people|tojson }}
            }
        ]
    };

    option && myChart.setOption(option);
</script>
</body>
</html>

在这里插入图片描述