给小白老婆写的简易可视化指南（基于ECharts）
2018-06-10 本文已影响0人
精益的Tang
[TOC]
零 准备工作
- 百度“Echarts”，下载完整版放好，比如放到 'E:\Echarts' 下
- 把空的“简易模板.html”文件拷到同一文件夹下（模板的代码附后）
- 注意用notepad++软件打开html文件
壹 数据准备
- 在Excel中，清理好数据
- 选择好数据，直接粘贴到Echarts提供的表格工具中
- 复制右下角自动转换好的数据列表
贰 图形配置
- 从案例库中挑选好目标图形
- 将数据（关键词var）和设置（关键词option）的设置代码分别粘到模板中
// 如果数据简单，可以直接在option中配置。如果复杂，则先配置数据 myChart.setOption({'将案例的option后的整个花括号内容替换此处，注意花括号别重复' }) - 试验下能否正常打开
- 设置好图形大小
叁 自己的图
问题：
-
Office版本过高时，添加liveweb插件可能需要手动添加该插件
在PPT的"开发工具-COM加载项"中，找到liveweb安装目录后手动添加插件
- 无法将某些可编写脚本的 ActiveX 控件插入到 Office 2013 文档，我的是64位win10+office2016，修改注册表如下
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Office\ClickToRun\REGISTRY\MACHINE\Software\Microsoft\Office\16.0\Common\COM Compatibility{8856F961-340A-11D0-A96B-00C04FD705A2}]
将值从400修改为0
注意：
- html的语法十分严格，需要严格注意缩进、标签等是否正确
- 数据十分复杂的情况下，可采用异步数据，以后有空在弄个新模板
- PPT中插入网页效果虽然好，但很容易出现控件问题，并不总是好解决，如果非要使用动态效果，可插入超链接进行演示
附简易模板代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>炫酷图表</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（可改变宽高）的Dom -->
<div id="main" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// 初始化echarts实例，不用修改
var myChart = echarts.init(document.getElementById('main'));
// 图表配置，装载数据
// 如果图表复杂，先配置好数据，即var或动态表
myChart.setOption({
})
</script>
</body>
</html>
