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

目录

一、ECharts 绍

1.1 Echarts 概述

1.2Echarts 特性介绍

二、Excel 样式

三、引入

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

1.3 安装插件“Live Server”

 四、用 python 将 excel 转化为 json

1.1 实现代码

 五、故可以使用以下方式将 excel 数据通过 echarts 的方式进行可视化

 六、运行结果图

1.1 官网链接：Apache ECharts

1.2【工具】查询颜色代码网站

一、ECharts 绍

1.1 Echarts 概述

ECharts 是百度开源的纯 Javascript 图表库，目前开源可以与 highcharts 相匹敌的一个图表库. 支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K 线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等 12 类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等 7 个可交互组件，支持多图表、组件的联动和混搭展现。

1.2Echarts 特性介绍

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari 等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

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

二、Excel 样式

首先我们要将本地数据文件中的中文要改为英文

三、引入

JS 中可以通过 Jquery 库引入 json 文件中的数据

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

在

时间对象数据序列需要转换为字符串序列再导出成 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)

 五、故可以使用以下方式将 excel 数据通过 echarts 的方式进行可视化

按照以下步骤也可将 excel 数据通过 echarts 的方式进行可视化

六、运行结果图

下面是一个折线图样式：

1.1 官网链接：Apache ECharts

利用 ECharts 官网上的大量样例代码，快速完成自己所需的个性化图表的制作

Apache EChartsApache ECharts，一款基于 JavaScript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。https://echarts.apache.org/zh/index.html

1.2【工具】查询颜色代码网站

可以通过修改配置来美化图像，达到我们想要的效果，例如 range_color 我们可以修改其中的颜色

参考链接:http://tools.jb51.net/color/jPickerhttp://tools.jb51.net/color/jPicker