echarts导入ssm详细教程

下面是Echarts导入SSM的详细步骤：

1. 下载Echarts

首先你需要去Echarts官网下载Echarts，官网地址为：https://echarts.apache.org/zh/index.html。下载完成后，解压缩到项目的webapp文件夹下。

2. 导入Echarts相关的JS文件

在项目中，我们需要导入Echarts相关的JS文件，具体操作如下：

- 在项目的webapp目录下创建一个js文件夹，用于存放JS文件；
- 将Echarts中的echarts.min.js文件复制到项目的js文件夹中；
- 在项目中的JSP页面中导入echarts.min.js文件，代码如下：

<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>

3. 创建Echarts图表

在项目中创建Echarts图表，主要有以下两种方式：

- 在JSP页面中直接使用Echarts的API创建图表；
- 在后台Java代码中通过Echarts的API创建图表。

下面分别介绍这两种方式的实现。

方式一：在JSP页面中直接使用Echarts的API创建图表

在JSP页面中直接使用Echarts的API创建图表，具体步骤如下：

- 在JSP页面中创建一个容器，用于显示Echarts图表，代码如下：

<div id="main" style="width: 600px;height:400px;"></div>

- 在JS代码中使用Echarts的API创建图表，代码如下：

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

方式二：在后台Java代码中通过Echarts的API创建图表

在后台Java代码中通过Echarts的API创建图表，具体步骤如下：

- 在Java代码中创建一个Echarts对象，代码如下：

import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.json.GsonOption;
import com.github.abel533.echarts.series.Bar;

Option option = new GsonOption();

- 设置Echarts对象的配置项和数据，代码如下：

option.title("ECharts 入门示例");
option.tooltip();
option.legend().data("销量");
option.xAxis().data("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子");
option.yAxis();
Bar bar = new Bar("销量");
bar.data(5, 20, 36, 10, 10, 20);
option.series(bar);

- 将Echarts对象转换为JSON格式的字符串，代码如下：

String optionJson = option.toString();

- 在JSP页面中创建一个容器，用于显示Echarts图表，代码如下：

<div id="main" style="width: 600px;height:400px;"></div>

- 在JS代码中使用Echarts的API创建图表，代码如下：

var myChart = echarts.init(document.getElementById('main'));

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(${optionJson});

以上就是Echarts导入SSM的详细步骤。