ECharts与Java进行后台交互入门教程（1）

不念不忘少年蓝@ 2022-05-18 10:26 474阅读 0赞

这篇是简单入门，与 Java 后台交互请移驾：[https://blog.csdn.net/m0\_37574389/article/details/81360526][https_blog.csdn.net_m0_37574389_article_details_81360526]

简单介绍一些ECharts：

Echarts ([http://echarts.baidu.com/][http_echarts.baidu.com])是百度公司出品的，遵循 BSD 开源协议，免费商用，算是百度不可多得的良心之作。要彻底掌握Echarts，你需要掌握一点前端开发的知识，这些知识也是你花几周的时间就可以学会的（这里需要你掌握一点html、css、javascript的知识）。不过即使是小白，也能发现它大大的有用，话不多少，我们直接上案例，通过案例，我们来说明这个神器强大之处。

## 获取 ECharts： ##

你可以通过以下几种方式获取 ECharts。

1.  从[官网下载界面][Link 1]选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载[完整版本][Link 2]。开发环境建议下载[源代码版本][Link 3]，包含了常见的错误提示和警告。
2.  在 ECharts 的 [GitHub][] 上下载最新的 `release` 版本，解压出来的文件夹里的 `dist` 目录里可以找到最新版本的 echarts 库。
3.  通过 npm 获取 echarts，`npm install echarts --save`，详见“[在 webpack 中使用 echarts][webpack _ echarts]”
4.  cdn 引入，你可以在 [cdnjs][]，[npmcdn][] 或者国内的 [bootcdn][] 上找到 ECharts 的最新版本

## 引入 ECharts： ##

引入方式很简单，只需要像普通的 JavaScript 库一样用 script 标签引入。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        
        <script src="echarts.min.js"></script>
    </head>
    </html>

## 绘制一个简单的图表： ##

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init() 方法初始化一个 echarts 实例并通过setOption()方法生成

一个简单的柱状图，下面是完整代码。

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        
        <script src="echarts.min.js"></script>
    </head>
    <body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示，具体类型可进入ECharts官方查找API
                    data: [5, 20, 36, 10, 10, 20]
                }]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>
    </html>

这样图表就诞生了，但是这是前台固定了的，接下来我们就试一试从**后台取数实现动态的折线图**。

![70][]

[https_blog.csdn.net_m0_37574389_article_details_81360526]: https://blog.csdn.net/m0_37574389/article/details/81360526
[http_echarts.baidu.com]: http://echarts.baidu.com/
[Link 1]: http://echarts.baidu.com/download.html
[Link 2]: http://echarts.baidu.com/dist/echarts.min.js
[Link 3]: http://echarts.baidu.com/dist/echarts.js
[GitHub]: https://github.com/ecomfe/echarts
[webpack _ echarts]: http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts
[cdnjs]: https://cdnjs.com/libraries/echarts
[npmcdn]: https://npmcdn.com/echarts@latest/dist/
[bootcdn]: http://www.bootcdn.cn/echarts/
[70]: /images/20220518/7f58c65a51dd471f91a0ad8da2848a70.png