echarts可视化
1.去官方网站下载压缩文件echarts.min.js或者echarts.js(未压缩版本也可以)(下载–>dist–>echarts.js或者echarts.min.js–>raw–>右键另存为)
点击Dist进行下载,找到echarts.min.js
点击echarts.min.js,可以点击右上方的Raw进行下载,也可以对该文件进行复制。
2.新建一个网页项目:
(1)新建一个index.html文件(index名字自行命名)
(2)创建一个css的文件夹,用来放置网页样式信息style.css
(3)创建一个js的文件夹,用来放置下载的echarts.min.js,还有其他类型的js
(4)如果有图片,创建一个img文件夹,放置图片资源,比如边框等
3.编码
(1)编写html框架(页面整体布局)
打开VS code,在demo.html输入html:5敲回车键,可以直接生成html5模板
(2)引入echarts(直接将echarts.min.js文件放到创建好的js文件夹)
(3)修改html编码
从echarts官网上面随便找一个图,以折线图为例,先打开echarts官网下载折线图代码
以这个为例
可以点击右下角的Download进行下载,下载该文件的源代码,我们可以用来参考。
参考下面的代码进行改写
首先在我们的demo.html文件对body进行改写(也可以对下载的源代码进行改写),以下载的源代码为例,将下面的代码可以删掉
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
将这一行代码替换为自己的echarts.min.js路径
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
我的路径为./js/echarts.min.js
<script type="text/javascript" src="./js/echarts.min.js"></script>
下面这段代码可以去掉if语句,只写myChart.setOption(option);
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
上述步骤完成之后就可以运行demo.html文件了。