图表工具ECharts的入门使用教程

最新推荐文章于 2024-07-09 13:56:40 发布

Satisfy_555

最新推荐文章于 2024-07-09 13:56:40 发布

阅读量736

点赞数

分类专栏：图表工具

本文链接：https://blog.csdn.net/Satisfy_555/article/details/81743841

版权

图表工具专栏收录该内容

1 篇文章 0 订阅

订阅专栏

===================================

说明：东西肯定是别人写好的，只不过最近有使用到，所以解锁一项新技能。。。以后做统计什么的就可以考虑用这个了。

===================================

首先是官方参考文档、实例什么的http://echarts.baidu.com/echarts2/doc/example.html

然后我把代码剥离了一下：

1.新建一个web工程，然后把从官网上下载好的echarts-all.js这个文件导到web目录下（我这里是建的一个没Maven工程，但是都一样）。

2.新建一个jsp，注意是jsp！！！！反正我建html是没有测试成功。。。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="${request.getContextPath()}static/js/echarts-all.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        
        var option = {
        	    title : {
        	        text: '未来一周气温变化',
        	        subtext: '纯属虚构'
        	    },
        	    tooltip : {
        	        trigger: 'axis'
        	    },
        	    legend: {
        	        data:['最高气温','最低气温']
        	    },
        	    toolbox: {
        	        show : true,
        	        feature : {
        	            mark : {show: true},
        	            dataView : {show: true, readOnly: false},
        	            magicType : {show: true, type: ['line', 'bar']},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },
        	    calculable : true,
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data : ['周一','周二','周三','周四','周五','周六','周日']
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value',
        	            axisLabel : {
        	                formatter: '{value} °C'
        	            }
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'最高气温',
        	            type:'line',
        	            data:[11, 11, 15, 13, 12, 13, 10],
        	            markPoint : {
        	                data : [
        	                    {type : 'max', name: '最大值'},
        	                    {type : 'min', name: '最小值'}
        	                ]
        	            },
        	            markLine : {
        	                data : [
        	                    {type : 'average', name: '平均值'}
        	                ]
        	            }
        	        },
        	        {
        	            name:'最低气温',
        	            type:'line',
        	            data:[1, -2, 2, 5, 3, 2, 0],
        	            markPoint : {
        	                data : [
        	                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
        	                ]
        	            },
        	            markLine : {
        	                data : [
        	                    {type : 'average', name : '平均值'}
        	                ]
        	            }
        	        }
        	    ]
        	};

        // 为echarts对象加载数据 
        myChart.setOption(option); 
    </script>
</body>
</html>

测试结果：

=====================================================

这里只是测试一种显示的方式，官网上有各种各样的图形，我们只需要把官网上例子中option的代码扣过来，那么静态的图表就已经实现了。。如果需要动态的填充数据，那么自己后台传数据过来就好了。。。

Satisfy_555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图表工具ECharts的入门使用教程

=================================== 说明：东西肯定是别人写好的，只不过最近有使用到，所以解锁一项新技能。。。以后做统计什么的就可以考虑用这个了。===================================首先是官方参考文档、实例什么的http://echarts.baidu.com/echarts2/doc/example.h...
复制链接

扫一扫

专栏目录