如何引入本地数据的echarts画图

ECha r ts是一个使用 Jav aSc rip t 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrom e，Fi refox，Sa fa r i等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts，一个纯 Jav a script 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Sa fari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

<script src="../14.5/static/js/jquery-3.6.4.min.js"&gt;</script&gt;

1.2 异步 请求 读取 本地 json数据

在<script>标签中使用 ajax 技术通过异步请求读取本地 json数据，并将数据赋值给配置项option 对象中的各个图形数据参数，并配置图形配置项。ajax 异步请求要写在option 定义之后，option的配置要写在ajax 异步请求的函数里面。下面是示例代码：

<!DOCTYPE html&gt;
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../14.5/static/js/jquery-3.6.4.min.js"></script>
  <script type="text/javascript" src="../14.5/static/js/echarts.min.js"></script>
</head>

<body>
  <div id="chart" style="width:900px; height:500px;"></div>
  <script type='text/javascript'>
    var myChart = echarts.init(document.getElementById('chart'));
    // var chartDom = echarts.init(chartDom);
    var option;
    option = {

      xAxis: {
        type: 'category',
        name: "销售日期",
        data: []
      },
      yAxis: {
        type: 'value',
        name: "销售数量"
      },
      series: [
        {
          data: [],
          name: "牛奶",
          type: 'line',
          color: 'blue',
          smooth: true,
          stack: 'Total',
          //areaStyle: {},
          label: {
            show: true,
            position: 'botton'
          },
        },

        {
          data: [],
          name: "面包",
          type: 'line',
          color: 'red',
          //smooth:true,
          //areaStyle: {},
          label: {
            show: true,
            position: 'botton'
          },
        }
      ]
    }
    $.ajax({
      method: "GET",
      url: "./1.json",
      dataType: "json",
      success: function (e) {
        option.xAxis.data = e.date;
        option.series[0].data = e.milk;
        option.series[1].data = e.bread;
        myChart.setOption(option);
      }
    });

  </script>
</body>

</html>

时间对象数据序列需要转换为字符串序列再导出成json数据，否则导出失败。

json数据样式：

1.3安装 插件“Live Server”

在扩展中下载插件Live Server

并在html 文件中右键选“Open with Live Server”查看图形渲染结果

四、用python将excel转化为json

1.1 实现代码

将excel转化为json的python 代码:

    import json
    import pandas as pd
    df = pd.read_excel('demo.xlsx')
    df_dict = df.to_dict('list')
    with open('1.json','w') as f:
        json.dump(df_dict,f,ensure_ascii=False)