快速使用ECharts

最新推荐文章于 2023-10-21 11:36:57 发布

JH丨听书人

最新推荐文章于 2023-10-21 11:36:57 发布

阅读量139

点赞数

分类专栏：其他

本文链接：https://blog.csdn.net/incarnation_ll/article/details/108028129

版权

其他专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ECharts

下载

在线定制

在项目中导入js

<script src="echarts.js的路径"></script>
//如果效果没出来可使用在线的js
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

在body中编写

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>ECharts</title>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<%--定义图标显示区域--%>
<div id="my" style="white:600px;height: 600px"></div>
<script type="text/javascript">
  //初始化echarts对象
  var myehart = echarts.init(document.getElementById('my'));
  //指定图标的配置项和数据
  var option = {
    //设置图标的标题
    title:{
      //主标题
      text:"Echarts 入门实例"
    },
    //图例
    legend:{
      data: ["销量","成本"]
    },
    //x轴数据
    xAxis:{
      data:["x1","x2","x3","x24","x5"]
    },
    //y轴数据
    yAxis:{

    },
    //根据相应的系列配置
    series:[
      {
        name:'销量',
        type:'bar',
        data:[5,20,34,31,11]
      },
      {
        name:'成本',
        type:'bar',
        data:[0.5,2,3.4,3.1,1.1]
      }
    ]
  }
  myehart.setOption(option);
</script>
</body>
</html>

运行即可

在这里插入图片描述

复杂图表（地图等）

步骤

引入Echarts文件（如果报错使用在线文件）
定义图标区域（div）
初始化echarts对象
复制官网代码
下载需要引入的文件（json，jQuery）
渲染图表

JH丨听书人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
快速使用ECharts

ECharts下载在线定制在项目中导入js<script src="echarts.js的路径"></script>//如果效果没出来可使用在线的js<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>在body中编写<%@ page contentType="text/html;charset=UTF-8" language="j
复制链接

扫一扫