Echarts+Tomcat(Idea)可视化

最新推荐文章于 2022-06-22 12:49:57 发布

Jacquelin_1

最新推荐文章于 2022-06-22 12:49:57 发布

阅读量4.3k

点赞数 4

分类专栏：可视化

本文链接：https://blog.csdn.net/Jacquelin_1/article/details/102065511

版权

可视化专栏收录该内容

1 篇文章 0 订阅

订阅专栏

整理一下Echarts做可视化的代码流程~
一、下载Tomcat

https://www.jianshu.com/p/69496fb3495e

安装猫的基本点都有了
二、下载Echarts.min.js
https://www.echartsjs.com/zh/download.html
官网页面往下走，选在线定制，会发现能看到的就是Echarts.min.js，下载后那文件命名就是这个
三、建webapp
idea->new project->maven->create from archetype->maven-archetype-webapp->next（图1）->勾选override后选择自己maven所在位置配好->要点基本完了，按照idea指引走下去就可
在这里插入图片描述
建完之后将echarts.min.js放进新建的js文件夹里

四、可视化代码
在main下webapp新建test.html，代码如下
要点（踩过的坑）：

src=“js/echarts.min.js”>这句写完js会有提示，若没提示看下你放echarts.min.js文件位置
在项目里pom文件 web Maven
Webapp下的URL要改下，这个可能是idea18年这个版本的，我看别人那里是自动，如下图：
代码里想换图表就看option以后的东西

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EchartsHel</title>

    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <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: '堆叠区域图'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        </script>
    </body>
</html>

在这里插入图片描述
关于图表可视化展示这一块，Python的seaborn也很优秀，求快那就用matplotlib，不差于seaborn，多见于成型报告中；只不过很多业务场景可能需要echarts，多用于线上使用，就整理一下以前用这个的步骤

Jacquelin_1

关注

4
点赞
踩
43

收藏

觉得还不错? 一键收藏
1
评论
Echarts+Tomcat(Idea)可视化

整理一下Echarts做可视化的代码流程~一、下载Tomcathttps://www.jianshu.com/p/69496fb3495e安装猫的基本点都有了二、下载Echarts.min.jshttps://www.echartsjs.com/zh/download.html官网页面往下走，选在线定制，会发现能看到的就是Echarts.min.js，下载后那文件命名就是这个三、...
复制链接

扫一扫

专栏目录