用maven导入echarts

序

前段日子学习了ssm,就想着能不能用Maven来搭建,就自定义了一个idea骨架。

最近学习了用echarts绘图，开一个项目就要放js，感觉很麻烦，就想着能不能用maven导入。

结果还很让我找到了。

Maven导入

到我写这篇博文的日期，可以用maven导入的最新的版本为：4.7.0

<dependencies>
        <!-- https://mvnrepository.com/artifact/org.webjars.bower/echarts -->
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>echarts</artifactId>
            <version>4.7.0</version>
        </dependency>
    </dependencies>

在项目中如何使用

示例：

//1. 导入echarts包
const echarts = import(echarts)

//2.获取容器dom元素--1分
const dom = document.getElementById("container");
//3.实例化echart对象--2分
const charts = echarts.init(dom);
//4.在此定义两个数组，用于存储图形所需的数据--3分
const major = ["计科", "电信", "数电", "计外", "外语", "人文"];
const count = [130, 80, 35, 88, 160, 90];
//5.设定配置
const option = {
    title: {
        //5.1添加标题文本--1分
        text: "XX学校理学院2019级专业人数统计"
    },
    //5.2添加提示组件 --2分
    tooltip: {},
    legend: {
        //5.3定义图例的显示内容--1分
        data: ["专业人数"]
    },
    xAxis: {
        //5.4 定义x轴数据	--1分
        data: major
    },
    yAxis: {},
    series: [{
        name: '专业人数',
        type: 'bar', //5.5 指定图表的类型-2分
        data: count,//5.6 指定图表的数据--2分，
        itemStyle: {
            normal: {
                // 随机显示
                color: function (d) {
                    return "#" + Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16);
                }
            },
        }
    }]
};
//6.使用定义好的配置项显示数据--1分
charts.setOption(option);
//
//7.为此图例添加鼠标单击事件--2分
charts.on('click', function (params) {
    alert("理学院" + params.name + "的人数有【" + params.value + "】人");
});

成果

发布到\(tomcat\)服务器后的效果：