ECharts的研究与学习

来源：互联网发布：控制网络连接管理编辑：程序博客网时间：2024/06/04 17:45

ECharts的学习和研究

学习ECharts必须在其官网中查看文档，下载有关插件，文档地址：

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

首先用到的主要插件有：echarts.min.js ---- 该文件必须放在当前目录" ./ "

1.根据文档说明，进行了一个简单的练习：

<!DOCTYPE html><html style="height: 100%"><head>    <meta charset="utf-8"></head><body style="height: 100%; margin: 0"><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="container" style="height: 100%"></div><!-- 引入 echarts.js --><script type="text/javascript" src="./js/echarts.min.js"></script><script type="text/javascript">    // 基于准备好的dom，初始化echarts实例    var dom = document.getElementById("container");    // 指定图表的配置项和数据    var myChart = echarts.init(dom);    var app = {};    option = null;    option = {        title: {            text: 'ECharts 练习'        }    };    // 使用刚指定的配置项和数据显示图表。    myChart.setOption(option, true);</script></body></html>

注意：首先一定要引入外部js文件，然后为echarts准备好一个容器，根据具体需求进行代码的完善。

2.主要看了ECharts 里面的热力图和地图的知识，其中看了具体的代码示例，可是发现都调用的是已经在使用的接口，我想自己定义一个，最终了解到可以使用svg自定义并渲染，如下：

// 使用 SVG 渲染器var chart = echarts.init(containerDom, null, {renderer: 'svg'});

svg的基础知识可以参考菜鸟教程：
http://www.runoob.com/svg/svg-tutorial.html

阅读全文

0 0