利用echarts实现简单的可视化

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文件了。