初学echarts

最新推荐文章于 2024-04-03 06:20:41 发布

小码张

最新推荐文章于 2024-04-03 06:20:41 发布

阅读量344

点赞数 1

分类专栏： ECharts

本文链接：https://blog.csdn.net/qq_38789941/article/details/106078878

版权

ECharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.官方网站：

https://echarts.apache.org/zh/index.html

2.官方教程：5分钟上手ECharts

3.简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

4.dome

获取 ECharts
可直接下载js文件，引入到项目中，下载地址：ECharts.js。

引入 ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="/js/echarts.min.js"></script>
    <!-- 引入jquery -->
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>    
</head>
</html>

绘制一个简单的柱状图

<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'));

        //向后台发送处理数据
        $.post(
            "/web/weuser/getData",
            function(data){
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '用户注册量'
                    },
                    tooltip: {},
                    legend: {
                        data:['注册量']
                    },
                    xAxis: {
                        data: data.category
                    },
                    yAxis: {},
                    series: [{
                        name: '注册量',
                        type: 'bar',
                        data: data.totals
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        );
    </script>
</body>

后端异步提供数据

    @RequestMapping("/getData")
    @ResponseBody
    public Map<String, Object> getData() {
        Map<String, Object> map = new HashMap<>();
        map.put("category", Arrays.asList("一月份", "二月份", "三月份", "四月份", "五月份"));
        map.put("totals", Arrays.asList(10, 20, 30, 50, 100));
        return map;
    }

访问页面无法展示，提示：Uncaught ReferenceError: echarts is not defined
解决办法：

引入这行即可

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>

页面展示效果：

小码张

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
初学echarts

1.官方网站：https://echarts.apache.org/zh/index.html2.官方教程：5分钟上手ECharts3.简介ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。4.上手获取 ECharts 可直接下载js文件，引入到项目中，下载地址：ECharts.js。引入 ECharts <!DOCT.
复制链接

扫一扫