Echarts实例

最新推荐文章于 2024-08-13 19:09:24 发布
最新推荐文章于 2024-08-13 19:09:24 发布
阅读量1k 收藏 3
点赞数
分类专栏： 大数据 文章标签： 大数据可视化 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_Hzx/article/details/82692550
版权

一、先在mysql建一张表（goods）如下：

二、工程的目录结构为：

三、具体的代码：

配置文件：别忘记改成自己相应的配置

<?xml version="1.0" encoding="UTF-8"?>
<c3p0-config>
    <default-config>
        <property name="driverClass">com.mysql.jdbc.Driver</property>
        <property name="jdbcUrl">jdbc:mysql://localhost:3306/数据库名</property>
        <property name="user">用户名</property>
        <property name="password">密码</property>

        <property name="acquireIncrement">5</property>
        <property name="initialPoolSize">10</property>
        <property name="minPoolSize">5</property>
        <property name="maxPoolSize">30</property>
    </default-config>
</c3p0-config>

bean类：

public class Goods {
    private int id;
    private String name;
    private double price;
    private int sales;
    private int stock;
    private String detail;

    public Goods() {
    }

    public Goods(String name, double price, int sales, int stock, String detail) {
        this.name = name;
        this.price = price;
        this.sales = sales;
        this.stock = stock;
        this.detail = detail;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

    public int getSales() {
        return sales;
    }

    public void setSales(int sales) {
        this.sales = sales;
    }

    public int getStock() {
        return stock;
    }

    public void setStock(int stock) {
        this.stock = stock;
    }

    public String getDetail() {
        return detail;
    }

    public void setDetail(String detail) {
        this.detail = detail;
    }

    @Override
    public String toString() {
        return "Goods{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", price=" + price +
                ", sales=" + sales +
                ", stock=" + stock +
                ", detail='" + detail + '\'' +
                '}';
    }
}

dao层：

public interface GoodsDao {
    List<Goods> queryAllGoods() throws SQLException;
}

daoimp：

public class GoodsDaoimp implements GoodsDao{
    DataSource dataSource = ReadDataSource.getDataSource();

    @Override
    public List<Goods> queryAllGoods() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(dataSource);
        String sql = "select * from goods";
        return queryRunner.query(sql, new BeanListHandler<>(Goods.class));
    }
}

测试类：

public class Test {
    public static void main(String[] args) throws SQLException {
        GoodsDao goodsDao = new GoodsDaoimp();
        List<Goods> goods = goodsDao.queryAllGoods();
        for (Goods good : goods) {
            System.out.println(good);
        }
    }
}

测试结果：

到echarts官网下载echarts.js导入到webapp下的a目录下

servlet：别忘记改成对应的jsp

@WebServlet(name = "ServletQueryAllGoods", value = "/ServletQueryAllGoods")
public class ServletQueryAllGoods extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        GoodsDao goodsDao = new GoodsDaoimp();
        List<Goods> goodsList;
        try {
            goodsList = goodsDao.queryAllGoods();
            request.setAttribute("goodsList", goodsList);
            request.getRequestDispatcher("/zhe.jsp").forward(request, response);
        } catch (SQLException e) {
            e.printStackTrace();
        }

    }
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
</web-app>

index.jsp

<html>
<body>
<a href="ServletQueryAllGoods">Go</a>
</body>
</html>

zhe.jsp

<%--
  Created by IntelliJ IDEA.
  User: hzx
  Date: 2018/9/13
  Time: 18:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ECharts</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/a/echarts.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 sale = new Array;
    var index = 0;
    <c:forEach items="${goodsList}" var="goods">
    sale[index++] = ${goods.sales};
    </c:forEach>

    option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: '超市商品销量图',
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [
                <c:forEach items="${goodsList}" var="g">
                ["${g.name}"],
                </c:forEach>
            ]
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }],
        series: [
            {
                name:'商品销量',
                type:'line',
                smooth:true,
                symbol: 'none',
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: 'rgb(255, 70, 131)'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    }
                },
                data: sale
            }
        ]
    };

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

柱状图：zhu.jsp

<%--
  Created by IntelliJ IDEA.
  User: hzx
  Date: 2018/9/13
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ECharts</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/a/echarts.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 arr = new Array();
    var index = 0;
    <c:forEach items="${goodsList}" var="goods">
    arr[index++] = ${goods.sales};
    </c:forEach>

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {
            show: true
        },
        legend: {
            data:['销量']
        },
        xAxis : [
            {
                type : 'category',
                data : [
                    <c:forEach items="${goodsList}" var="g">
                    ["${g.name}"],
                    </c:forEach>
                ]
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'销量',
                type:'bar',
                data: arr
            }
        ]
    };

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

饼状图：bing.jsp

<%--
  Created by IntelliJ IDEA.
  User: hzx
  Date: 2018/9/13
  Time: 18:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>ECharts</title>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="${pageContext.request.contextPath}/a/echarts.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'));

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '超市商品销售统计',
            subtext: '纯属虚构',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: [
                <c:forEach items="${goodsList}" var="g">
                ["${g.name}"],
                </c:forEach>
            ]
        },
        series : [
            {
                name: '销售数量',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    <c:forEach items="${goodsList}" var="goods">
                    {value:"${goods.sales}", name:"${goods.name}"},
                    </c:forEach>
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

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

最终效果图：

csdn_Hzx
关注
专栏目录
echarts 实例
qq_43343499的博客
10-29 1952
echarts 实例 官方文档地址:/echarts.apache.org 一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。 系列（series） 系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”
echarts例子
qq_41540768的博客
02-02 235
折线图–以时间作为横坐标 option={ title:{ text:'动态数据+时间坐标轴' }, tooltip:{ trigger:'axis', }, xAxis:{ type:'time', splitLine:{ show:false } }, yAxis:{ type:'value', boundaryGap:[0,'100%'], splitLine:{ show:false } ...
echarts案例
慢慢的博客
08-07 488
导入js依赖 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </h...
ECharts数据可视化 数据集与事件 入门基础知识【2】
最新发布
weixin_43483590的博客
08-13 1098
echarts一个基于 JavaScript 的开源可视化图表库。其有丰富的图表类型、强大的渲染引擎、专业多维度的数据分析、灵活配置的可视化设计。这里主要回顾echarts的点击事件以及回调函数、服务端渲染数据、异步获取数据等基本知识
echarts实例
08-29
输入数据会形成表格装数据,同时数据会形成对应的统计图,还可以选择统计图的类型.
echarts的几个例子
07-21
echarts使用的包含柱状图等几个例子，其中zoomData图表中添加了计算选择的区间的方法，可以进行及时查询。
在Vue中使用Echarts实例图的方法实例
10-14
安装完成后，需要在项目中全局引入Echarts库，并将其绑定到Vue的原型上，这样在Vue组件中就可以通过`this.$echarts`访问到Echarts实例。 在Vue组件中创建图表容器，通常是通过在组件的`<template>`部分添加一个`...
Echarts实例_stronge1l_搜索_echarts实例_echarts_echarts书_
10-04
在本资源中，"Echarts实例_stronge1l_搜索_echarts实例_echarts_echarts书_" 似乎指向一个包含 ECharts 示例和相关教程的资料，可能是电子书或一系列示例代码。 首先，"stronge1l" 可能是关键词或作者名，但在这里...
echarts简单案例
m0_65912225的博客
06-30 676
【代码】echarts简单案例。
echarts完整实例
10-20
这是我实际项目中的一个echarts完整实例，将echarts数值通过json方式从后台数据库中读取。
echarts示例代码
04-22
百度echarts的示例代码，有柱状图，折线图，雷达图
echarts及实例
02-26
最新版本的echarts,免费的图标控件，纯javascript实现，并有一些实例。
echarts的简单案例
水痕
04-21 1057
var myChart0 = echarts.init(document.getElementById("list0")); option0 = { title: { text: '单次抽奖活动统计', subtext: '2016-12-25至2017-01-25', }, legend: {
Echart 的实例
csdn_chenli
05-26 5493
这是我自己做的一些实例  有Echarts 部分属性的注释 学习网站：http://echarts.baidu.com/index.html ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直
Java面试基础篇
m0_67392010的博客
07-29 3731
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。Java的强引用、弱引用、软引用、虚引用。Java语言基础常识。Java12新特性。JavaIO详解。...
vue清除echarts实例
06-06
在Vue中清除ECharts实例，可以通过以下步骤实现： 1. 在Vue组件的生命周期钩子函数中，创建ECharts实例并渲染图表。 2. 在组件销毁前，调用ECharts实例的`dispose`方法，清除实例并释放内存。 以下是示例代码： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值