ECharts的使用方法

最新推荐文章于 2023-03-01 21:41:51 发布

小郑要做干饭人

最新推荐文章于 2023-03-01 21:41:51 发布

阅读量3k

点赞数 1

分类专栏： Echarts 文章标签： ajax js java jquery echarts

17831105763@163.com

本文链接：https://blog.csdn.net/a1422655169/article/details/115189828

版权

Echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts库创建条形图，首先从官方网站下载和在线定制Echarts，然后在HTML中引入js文件并创建容器，接着初始化Echarts实例并设置图表参数。通过AJAX获取后台数据，动态更新Echarts的data属性，展示月营业额变化。示例代码包括前端使用jQuery发起请求，以及后台返回JSON数据。

摘要由CSDN通过智能技术生成

No.1 下载资源Js库:
官网下载:https://echarts.apache.org/zh/index.html
在线定制:https://echarts.apache.org/zh/builder.html
No.2 在页面中引用 echarts.js
No.3 创建dom容器,存储报表
No.4 写js初始化echarts,并setOption()设置报表参数
No.5 完成,打开测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <script type="text/javascript" src="echarts.min.js"></script>
    <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]
            }]

项目中使用Echarts

No.1:点击月营业额页面,页面加载函数中发Ajax请求到后台
No.2:后台接收请求,去查询得到每个月的营业额,并且将其放入数组中,返回
No.3前端使用Ajax的回调中获得返回的数组,将数组的值赋值到echarts的data中

前端代码如下:

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

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript" src="/Js/jquery.js"></script>
<script type="text/javascript" src="/Js/echarts.min.js"></script>
<script>
    // 页面加载事件
    $(document).ready(function(){
        $.ajax({
            url:"http://localhost:8080/ajax/month.do",
            type:"get",
            success:function (res) {
                console.log(res.data)
                if (res.code == 200) {
                    var myChart = echarts.init($('#main')[0]);
                    var option = {
                        title: {
                            text: '月营业额'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
                        },
                        yAxis: {},
                        series: [{
                            name: '销量',
                            type: 'bar',
                            data: res.data
                        }]
                    };
                    myChart.setOption(option);
                }
            },
            error:function () {
                alert("失败");
            }
        });
    });


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

后台代码如下:

/**
 * @ResponseBody 可以将java代码中的List集合,数组
 *              变成数组返回.
 */
@RequestMapping("/month")
@ResponseBody
public ResultObject month() {
    ArrayList<Double> list = new ArrayList<Double>( );
    list.add(50.0);
    list.add(40.0);
    list.add(60.0);
    list.add(90.0);
    list.add(1000.0);
    list.add(466.0);
    list.add(345.4);
    list.add(123.4);
    list.add(452.3);
    list.add(12.3);
    list.add(343.4);
    list.add(15.3);
    return new ResultObject(200,"成功",list);
}