echarts统计图使用及案例（ssm框架）

最新推荐文章于 2020-01-06 18:01:52 发布

扛刀仔

最新推荐文章于 2020-01-06 18:01:52 发布

阅读量3k

点赞数 6

分类专栏： Struts2+spring3+hibernate3 java 文章标签：统计图 echarts统计图

本文链接：https://blog.csdn.net/weixin_44540005/article/details/87918917

版权

java 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

Struts2+spring3+hibernate3

3 篇文章 0 订阅

订阅专栏

某人的代码（改了一下），本文主要是写的是如何使用，各种统计图。

1、jsp （后台数据在js里已写好定值，这个自己可以改，所以我就不写后台了（主要是表数据问题，我这直接给数组），效果复制就有了）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set value="${pageContext.request.contextPath}" scope="page" var="ctx"></c:set>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="${ctx}/assets/echarts.js"></script>
<!-- <script type="text/javascript" src="../../../assets/echarts.js"></script> -->
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="border:1px solid red;width:900px;height:600px;
margin-left:18%;"></div>
<script type="text/javascript">

//先加载后台数据 对获取的数据进行分组 且写入对应位置的数组中
var mycars=new Array('日', '一', '二', '三', '四', '五', '六');//string型数组
var mycarstow=new Array(10, 940, 908, 940, 1300, 1350, 1450);//int型数组


// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

//折线统计图
optionone = {
    xAxis: {
        type: 'category',
      //data: ['日', '一', '二', '三', '四', '五', '六']   //这个是原来的
        data: mycars
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        //data: [810, 940, 908, 940, 1300, 1350, 1450], //这个是原来的
        data: mycarstow,
        type: 'line',
        smooth: true
    }]
};

//病状统计图
optiontow = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};


// 使用刚指定 optiontow 的配置项和数据显示图表。 optiontow是上面定义的样式 ，这个样式网站在下面
myChart.setOption(optiontow);
</script>
</body>
</html>

2、上面代码，主要是myChart.setOption(optiontow);， optiontow可以去

https://echarts.baidu.com/examples/#chart-type-line （点入其中的一个案例）

3d的统计图没试过

要用到的js下载：echarts.js

https://www.echartsjs.com/download.html

兄弟们上面网站好像改了页面（要下载 echarts.js 到我百度网盘下载）

https://pan.baidu.com/s/1xbN1ETM0aHO9m-FytmlG6g 提取码：2hb9

扛刀仔

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
echarts统计图使用及案例（ssm框架）

某人的代码（改了一下），本文主要是写的是如何使用，各种统计图。1、jsp （后台数据在js里已写好定值，这个自己可以改，所以我就不写后台了（主要是表数据问题，我这直接给数组），效果复制就有了）<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = requ...
复制链接

扫一扫