echart的下载与使用之series.type错误(+web-inf访问webroot资源解决办法)

最新推荐文章于 2023-09-22 10:23:29 发布

心存留恋就不会幸福

最新推荐文章于 2023-09-22 10:23:29 发布

阅读量1.2k

点赞数 1

分类专栏： Coding_通用JAVA Coding_前端开发文章标签： java js javascript

本文链接：https://blog.csdn.net/hachi_rt/article/details/105746599

版权

Coding_通用JAVA 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

Coding_前端开发

2 篇文章 0 订阅

订阅专栏

1.进入echarts官网后，可以点击下载，进入下载页面，该页面有3种下载方式。推荐：

在这个页面下载github源码，可以下载整个zip，也可以进入页面后，进入dist目录，下载自己需要的echarts.js或者echarts.min.js

（https://www.bootcdn.cn/echarts/4.6.0/这个有echart各版本的云js标签，选择合适js，拷贝js引入就行，需要联网，建议自己下载本地文件）

----当然最方便的下载是复制打开这个链接：https://download.csdn.net/download/hachi_rt/12435752

2.如果下载的整个源码，以java的web项目为例，可以将整个文件夹拷贝到webroot目录下，本文仅拷贝dist目录下的echarts.js到webroot的js目录下

然后在需要使用echarts的页面引入这个js，注意，页面在web-INF下面，要访问webROOT的文件，引入方式为：

3.以官网实例动态时间轴为例：

在body创建容器位置，然后将实例的源码完整拷贝到js中，访问页面，会发现，并没有如意料中运行成功，报错： series.type should be specified.

此时，只需添加一句话解决，因为定时器这是定时器刷新页面的时候使用setOption，还需要：

添加后运行访问页面：

漂亮，完整实现！

附：

官网资源下载页面：https://www.echartsjs.com/zh/download.html

github开源下载源码页面：https://github.com/apache/incubator-echarts

动态时间轴为例：https://www.echartsjs.com/examples/zh/editor.html?c=dynamic-data2

js完整代码：

<head>
    <base href="<%=basePath%>">
    
    <title>实时在线</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
  </head>
  
  <body>
    <div id="main" style="width: 600px;height:400px;"></div>
  </body>
<script type="text/javascript">
      //基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      function randomData() {
            now = new Date(+now + oneDay);
            value = value + Math.random() * 21 - 10;
            return {
                name: now.toString(),
                value: [
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(value)
                ]
            };
        }
    
        var data = [];
        var now = +new Date(1997, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var value = Math.random() * 1000;
        for (var i = 0; i < 1000; i++) {
            data.push(randomData());
        }
    
        option = {
            title: {
                text: '动态数据 + 时间坐标轴'
            },
            tooltip: {
                trigger: 'axis',
                formatter: function (params) {
                    params = params[0];
                    var date = new Date(params.name);
                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                },
                axisPointer: {
                    animation: false
                }
            },
            xAxis: {
                type: 'time',
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%'],
                splitLine: {
                    show: false
                }
            },
            series: [{
                name: '模拟数据',
                type: 'line',
                showSymbol: false,
                hoverAnimation: false,
                data: data
            }]
        };
    
        myChart.setOption(option);
        
        setInterval(function () {
    
            for (var i = 0; i < 5; i++) {
                data.shift();
                data.push(randomData());
            }
    
            myChart.setOption({
                series: [{
                    data: data
                }]
            });
        }, 1000);
    </script>

心存留恋就不会幸福

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart的下载与使用之series.type错误(+web-inf访问webroot资源解决办法)

1.在进入echarts官网https://www.echartsjs.com/zh/index.html后，可以点击下载，进入下载页面https://www.echartsjs.com/zh/download.html，该页面有3种下载方式。推荐：https://github.com/apache/incubator-echarts在这个页面下载github源码，可以下载整个zip，也可...
复制链接

扫一扫

专栏目录