Echarts入门

一、包的引入

　　1.引入jQuery对应的js

　　　<script type="text/javascript" src="<%=basePath %>/js/jquery-3.1.1.min.js"></script>

　　2.引入Echarts对应的js

　　  <script src="<%=basePath %>echarts-m-1.0.0/source/echarts.js"></script>

二、Echarts初始化与简单应用

　　  <script type="text/javascript">
　　  　　require.config( {
    　　　　paths : {
       　　　　　　 echarts : ‘echarts-m-1.0.0/dist‘
  　　 　　 }
　　　　});

　　　　 require(
    　　　　[ ‘echarts‘,
     　　　　 ‘echarts/chart/pie‘, // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
      　　　　‘echarts/chart/funnel‘,
      　　　　‘echarts/chart/bar‘
     　　　 ],
     　　   function(ec) {
        　　　　var myCharts = ec.init(document.getElementById(‘myCharts‘));
       　　　　 // OPTION - BEGIN

　　　　　　　...

　　　　　　　// OPTION - END
       　　　　 myCharts.setOption(option);
　　　　});

　　　　// 其中id="myCharts"为body正文中对应div的id

　　　　//如下，需设置div的宽度和高度

　　　　<body>
       　　　　 <div id="myCharts" style="height:400px;width:800px"></div>
   　　  </body>

时间： 2024-10-05 18:12:15

Echarts入门的相关文章

echarts入门教程

一.echarts介绍 ECharts是由百度团队开发的,可高度个性化定制的数据可视化图表库.它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上. 二.完成一个简单图标 废话不多说,一起来完成一个简单的图表,体验一下ECharts的神奇吧! 1.引入ECharts ECharts3开始不再强制使用AMD的方式按需引入,那么简单粗暴,直接在官网下

关于ECharts入门系列

前阵子因为项目的需要接触了报表开发工具,经过一番了解之后发现百度的开源项目ECharts是一个很不错的报表开发工具. 项目完成一段时间后,我便进一步了解ECharts的使用,希望能够对ECharts的使用有进一步深入的了解. 一.为什么选择ECharts 在报表开发工具领域,也有很多成熟的开发工具可以用,比如:jFreeChart.FusionChart.HighChart等,他们都能够满足基本的使用需求. 但我选择ECharts的原因主要是因为: 1.ECharts是国内百度的开源项目,文档资

Echarts入门教程精简实用系列

引语:echarts.js是百度团队推出的一款用于图表可视化的插件,用于以图表的形式展现数据,功能强大,上手简单 1.从官方网站中下载所需的echarts.js文件,该文件因功能广泛,包体较大,可自行决定按需打包下载. 2.从前端页面引入echarts.js,后即可使用 <script src="js/echarts.min.js"></script> 3.请查看完整使用案例 介绍:series里面的type值表示使用哪种类型的图表,'bar'表示柱状图,'pi

echarts入门小总结

一.echarts介绍 ECharts是由百度团队开发的,(开源免费的!!)可高度个性化定制的数据可视化图表库.它的底层依赖轻量级的Canvas类库ZRender,是一个纯JavaScript的图标库,兼容(IE8/9/10/11,Chrome,Firefox,Safari等)主流浏览器,可以运行在PC和移动设备上.官方网址: https://echarts.baidu.com/ 二.echarts使用 1. 使用echarts首先要导入官方的js包. 2. 准备一个具备宽高的DOM容器,用于显

ECharts入门学习教程

ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表.这里给大家讲解两个案例带大家入门ECharts. 入门 Demo 01 如下面 demo 展示,我们尝试插入一个简单的柱形图: 下载 ECharts ,由于是初学,随便下什么版本.然后像普通引入外部

echarts入门基础，画折线图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ transform: translate(50%,50%); -webkit-transform: translate(-50%,-50%); -moz-transform: transla

Echarts 入门操作

Echarts具有丰富的图表,可以说是数据可视化的神器: 1.下载Echarts 到官网或者点击以下文字[下载Echarts]即可下载: ①官网下载地址:https://echarts.baidu.com/index.html ②下载Echarts 2.Echarts引用案例 2.1 引入Echarts <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>EC

echarts入门-2

1.组件名词 选项 option timeline title toolbox tooltip legend dataRange dataZoom roamController grid xAxis yAxis axis axisLine axisTick axisLabel splitLine splitArea data polar series(通用) series(直角系) series(饼图) series(雷达图) series(地图) series(热力图) series(力导向布

跟风舞烟学大数据可视化－Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja