赞
踩
目录
五、 故可以使用以下方式将excel数据通过echarts的方式进行可视化
ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库.支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表,同时提供标题,详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件,支持多图表、组件的联动和混搭展现。
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 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。
首先我们要将本地数据文件中的中文要改为英文
JS中可以通过Jquery库引入json文件中的数据
在html文件中的<head>标签中引入Jquery库,在<body></body>内引入echarts文件(charts文件放在static文件夹里),jquery使用jquery.min.js的版本
<script src="../14.5/static/js/jquery-3.6.4.min.js"></script>
在<script>标签中使用ajax技术通过异步请求读取本地json数据,并将数据赋值给配置项option对象中的各个图形数据参数,并配置图形配置项。ajax异步请求要写在option定义之后,option的配置要写在ajax异步请求的函数里面。下面是示例代码:
- <!DOCTYPE html>
- <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数据样式:
在扩展中下载插件Live Server
并在html文件中右键选“Open with Live Server”查看图形渲染结果
将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的方式进行可视化
下面是一个折线图样式:
利用ECharts官网上的大量样例代码,快速完成自己所需的个性化图表的制作
可以通过修改配置来美化图像,达到我们想要的效果,例如range_color我们可以修改其中的颜色
参考链接:http://tools.jb51.net/color/jPickerhttp://tools.jb51.net/color/jPicker
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。