ECharts简单使用

最新推荐文章于 2025-06-17 21:12:12 发布

征鸿过尽边云阔

最新推荐文章于 2025-06-17 21:12:12 发布

阅读量527

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/liuzhengwangyang/article/details/61914741

前端专栏收录该内容

0 篇文章

订阅专栏

本文以服务统计需求为例，介绍了如何使用ECharts进行数据可视化。通过在页面中引入echarts.min.js文件，并配置相应的HTML代码，展示了按小时统计每天24小时服务调用的波动情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面以服务统计需求为例，介绍echarts的简单使用。

需求简介：按小时统计每天24小时的服务调用波动情况。

首先在百度图表官方网站下载echarts.min.js文件，根据自身情况选择合适的js下载。
echarts官网

在jsp中引入echarts.min.js文件

//注意引入时要加入合适的字符编码，否则浏览器可能不兼容
<script src="/njs/plugins/echarts.min.js" charset="utf-8"></script>

在jsp文件body标签中加入如下代码：

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;margin:10px 80px"></div>
<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));

  var values = [];
  //将后台传来的list数据集合赋给values，作为图表展示的数据基础
  <%
      List list = (List)request.getAttribute("data");
      if(list!=null) {
        for(int i=0;i<list.size();i++) {
          %>
  values.push(<%=list.get(i)%>);
  <%
        }
       }
  %>
  function randomData() {
    for(var i=0;i<10;i++) {
      values[i] = Math.round(Math.random()*100);
    }
    return values;
  }

  option = {
    title: {
      text: '服务波动情况',
      textStyle: {
        fontWeight: 'normal',              //标题颜色
        color: '#408829'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: 'category',
      data : [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
        show: false
      }
    },
    series: [{
      name: '调用次数',
      type: 'line',
      showSymbol: false,
      hoverAnimation: false,
      data: values
    }]
  };
  myChart.setOption(option);
</script>

最终展示结果：