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

目录

一、ECharts绍

1.1 Echarts概述

1.2Echarts特性介绍

二、Excel样式

三、引入

1.1 在标签中引入Jquery库。

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.1 在标签中引入Jquery库。

在html文件中的标签中引入Jquery库，在内引入echarts文件（charts文件放在static文件夹里)，jquery使用jquery.min.js的版本

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