绘制echarts词云图、折线图、柱形图、地图的知识讲解

本文链接：https://blog.csdn.net/CherryBlossom_77/article/details/144478372

绘制echarts词云图、折线图、柱形图、地图的知识讲解

ECharts 是一个功能强大的开源数据可视化库，基于 JavaScript 开发，适用于各种数据可视化需求。以下是关于 ECharts 的详细介绍：

1. 概述

功能: ECharts 提供多种图表类型，包括折线图、柱状图、散点图、饼图、雷达图、地图等，支持数据的动态更新和交互式操作。
特点:
- 丰富性: 支持几乎所有主流图表类型，并且可以混搭使用。
- 可定制性: 提供高度个性化的定制选项，用户可以根据需求调整图表的样式和行为。
- 跨平台: 兼容主流浏览器（IE8/9/10/11, Chrome, Firefox, Safari等），并支持PC和移动设备。

2. 使用步骤

下载和引入:
- 访问 ECharts 官方网站下载最新版本。
- 在 HTML 页面中引入 ECharts 的 JavaScript 文件。
创建图表容器:
- 在 HTML 中创建一个具有固定大小的 DOM 元素，用于显示图表。
初始化图表实例:
- 使用 JavaScript 代码在容器中初始化 ECharts 实例。
配置图表:
- 使用 JavaScript 配置图表的样式、数据等属性。ECharts 提供了丰富的配置选项，如标题、图例、工具箱、提示框等。
加载数据:
- 将需要展示的数据传递给图表实例。
渲染图表:
- 调用图表实例的 setOption 方法，将图表渲染到指定的 DOM 元素中。

3. 示例代码

以下是一个简单的 ECharts 示例代码，用于创建一个柱状图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: '示例柱状图'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);
    </script>
</body>
</html>

4. 资源获取

官方文档: ECharts 官方网站提供了详细的文档和教程，适合初学者快速上手。
模板和案例: 网上有许多 ECharts 的模板和案例，可以参考学习。

5. 应用场景

ECharts 被广泛应用于数据分析、监控仪表盘、地理信息系统等领域。其强大的可视化能力使其成为数据可视化的首选工具之一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据大屏</title>
    <script src="../static/js/echarts.min.js"></script>
    <script type="text/javascript" src='../static/js/jquery-3.7.1.min.js'></script> 
    <script type="text/javascript" src='../static/js/china.js'></script> 
    <link rel="stylesheet" href="../static/css/charts.css"/>
</head>
<body>
    <div class="title">袋装螺蛳粉销售数据大屏</div>
    <div class="mainbox">
        <div class="column-1">
            <div class="charts" id="bar"></div>
            <div class="charts" id="line"></div>
        </div>
        <div class="column-2">
            <div class="number-title">
                <div>今日销量</div>
                <div>累计销量</div>
            </div>
            <div class="number">
                <div id="today">100000</div>
                <div id="total">500000</div>
            </div>
            <div class="map" id="map"></div>
        </div>
        <div class="column-1">
            <div class="charts" id="pie"></div>
            <div class="charts" id="wordcloud"></div>
        </div>
    </div>
    <script type="text/javascript" src="../static/js/bar.js"></script>
    <script type="text/javascript" src="../static/js/line.js"></script>
    <script type="text/javascript" src="../static/js/map.js"></script>
    <script type="text/javascript" src="../static/js/pie.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts-wordcloud.min.js"></script>
    <script type="text/javascript" src="../static/js/wordcloud.js"></script>
</body>
</html>

HTML 文件
引入资源:

引入 ECharts (echarts.min.js)。
引入 jQuery (jquery-3.7.1.min.js)。
引入中国地图数据 (china.js)。
引入自定义样式 (charts.css)。
页面布局:

标题: 使用

显示页面标题“袋装螺蛳粉销售数据大屏”。
主容器: 使用

包含多个子容器，用于放置不同的图表和数字信息。
第一列: 包含柱状图 (bar) 和折线图 (line)。
第二列:
显示今日销量和累计销量，使用

和

显示数字。
中国地图 (map)。
第三列: 包含饼图 (pie) 和词云图 (wordcloud)。
引入 JavaScript 文件:

分别引入 bar.js, line.js, map.js, pie.js, wordcloud.js 来绘制相应的图表。
JavaScript 文件
柱状图 (bar.js): 负责绘制柱状图，展示不同产品的销量。
折线图 (line.js): 负责绘制折线图，展示销量随时间的变化趋势。
地图 (map.js): 负责绘制中国地图，展示各地区的销量分布。
饼图 (pie.js): 负责绘制饼图，展示各产品占比。
词云图 (wordcloud.js): 负责绘制词云图，展示热门关键词或标签。

import random
from flask import Flask, jsonify,render_template
import utils
import pandas as pd


app = Flask(__name__)

#柱形图数据
@app.route('/bar')
def bar():
  bar_data = utils.get_province_data()
  df_pro = pd.DataFrame(bar_data,columns=['省份','总销量'])
  df_pro['总销量'] = (df_pro['总销量']/10000).round(2)
  df_pro = df_pro.sort_values(by='总销量',ascending=False).head(10)
  return jsonify(df_pro.to_dict(orient='list'))

#折线图数据
@app.route('/line')
def line():
  data = utils.get_daily_data()
  df = pd.DataFrame(data,columns=['日期','总销量'])
  df['日期'] = df['日期'].dt.strftime('%m-%d')
  df['总销量'] = (df['总销量']/10000).round(1)
  return jsonify(df.to_dict(orient='list'))


#地图数据
@app.route('/map')
def map():
    data = utils.get_province_data()
    data_list = []
    for i in data:
      data_list.append({'name':i[0],'value':i[1]})
    return jsonify(data_list)

#饼图数据
@app.route('/pie')
def pie():
    pie_data = utils.get_taste_data()
    data_list = [
      {'name':'origin','value':pie_data[0][0]},
      {'name':'spicy','value':pie_data[0][1]},
      {'name':'sauerkraut','value':pie_data[0][2]},
      {'name':'tomato','value':pie_data[0][3]},
      {'name':'smelly','value':pie_data[0][4]},
      {'name':'upgrade','value':pie_data[0][5]},
    ]
    return jsonify(data_list)

#词云图
@app.route('/wordcloud')
def wordcloud():
   wordcloud_data=utils.get_city_data()
   data_list=[]
   for i in wordcloud_data:
      data_list.append({'name': i[0], 'value': random.randint(0,100)})
   return jsonify(data_list)


@app.route('/charts')
def charts():
   return render_template('charts.html')
app.config['JSON_AS_ASCII'] = False


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

代码结构
Flask 应用:

初始化 Flask 应用并定义多个路由，每个路由对应一个图表的数据接口。
使用 utils 模块获取数据，并使用 pandas 处理数据。
路由:

/bar: 返回柱状图数据（省份销量前10）。
/line: 返回折线图数据（每日销量）。
/map: 返回地图数据（省份销量）。
/pie: 返回饼图数据（不同口味销量）。
/wordcloud: 返回词云图数据（城市销量，随机生成）。
/charts: 返回图表页面 charts.html。
数据处理:

使用 pandas 对数据进行排序、格式化等处理。
/wordcloud 路由中，value 使用随机数生成，可能不符合实际需求。

html,body{
    height:100%;
}
body{
    background: url(../图片/整体背景.jpeg) no-repeat;
    background-size: cover;
}
.title{
    height: 10%;
    /* border: 3px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: 1000;
    color: white;
    background: url(../图片/大标题背景.png) no-repeat;
    background-size: cover;
}
.mainbox{
    height: 90%;
    /* border: 3px solid red; */
    display: flex;
}
.column-1{
    flex: 2;    
    /* border: 3px solid yellow; */
}
.column-2{
    flex: 3;    
    /* border: 3px solid yellow; */
}
.charts{
    height: 50%;
    /* border: 3px solid pink; */
}
.map{
    height: 75%;
    /* border: 3px solid pink; */
}
.number-title{
    height: 6%;
    /* border: 3px solid pink; */
    display: flex;
}
.number-title div{
    flex: 1;
    /* border: 3px solid skyblue; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}
.number{
    height: 15%;
    /* border: 3px solid pink; */
    display: flex;
}
@font-face{
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}
.number div{
    flex: 1;
    /* border: 3px solid skyblue; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: yellow;
    font-size: 50px;
    font-family:electronicFont;
}