Echarts学习一

最新推荐文章于 2024-03-18 21:10:14 发布

程序媛的格子衫

最新推荐文章于 2024-03-18 21:10:14 发布

阅读量780

点赞数 1

分类专栏： # Echarts

本文链接：https://blog.csdn.net/tangthh123/article/details/83412914

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：Echarts是一个开源项目，它提供了很多可视化的图表，最重要的是开源的，有兴趣的码农们可以去学一下。

1.Echarts的官方学习文档：

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

2.这是在github上开源项目的地址：

https://github.com/apache/incubator-echarts

3.接下来先实现一个小功能（首先是控制层写接口进行页面的跳转）

    @RequestMapping(value = "/toEchart")
    public String toEchart(){
        return "mocrm/echart";
    }

4.接下来就是echart.jsp文件

注:其中的echarts.min.js可以在上面那个github处下载，下面就是我下载的，其中需要的js就在其中啦

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入Echarts.js--%>
    <script src="<%=basePath%>/js/echart/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: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

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

5.接下来就可以看一下效果啦

程序媛的格子衫

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts学习一

前言：Echarts是一个开源项目，它提供了很多可视化的图表，最重要的是开源的，有兴趣的码农们可以去学一下。1.Echarts的官方学习文档：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts2.这是在github上开源项目的地址：https://g...
复制链接

扫一扫