ECharts入门

最新推荐文章于 2022-12-09 15:46:51 发布

今天不想写代码

最新推荐文章于 2022-12-09 15:46:51 发布

阅读量375

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Luojun904/article/details/103958005

版权

ECharts入门简介和入门实例

ECharts (Enterprise Charts 商业产品图表库)

  一个纯Javascript 的图表库，依赖轻量级的Canvas 类库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表兼容当前绝大部分浏览器(1E8/9/10/11， Chrome， Firefox， Safari等) ，也可以运行在移动设备上

  它提供了折线图、柱状图、饼图、散点图、地图、雷达图、K线图、箱线图、热力图、关系图、矩形树图、平行坐标、桑基图、漏斗图、仪表盘15种图表，并且支持图与图之间的混搭

ECharts(Enterprise Charts )

ECharts图类、组件、基础库

在这里插入图片描述

入门实例

从官网下载界面选择你需要的版本
在这里插入图片描述

引入我们下载好的ECharts写我们的第一个图表


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js\echarts.min.js"></script> 
</head>
<body>
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
     <div id="main" style="width: 600px;height:400px;"></div>
     <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例
         var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
			title : {
				text: '某站点用户访问来源-南丁格尔图',
				subtext: '纯属虚构',//二级标题
				x:'center'	//标题居中对齐，值有三个：left(默认值) center right
			},
			tooltip : {
				trigger: 'item',
			},
			roseType: 'angle',//只有饼状图可以设置成南丁格尔图，通过半径表示数据的大小
			legend: { //图例
				orient: 'vertical', //设置图例方向：vertical（垂直） ，horizontal（水平）
				left: 'left',       //设置图例水平居左对齐，值有三个：left center(默认值) right
				data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
			},
			series : [
				{
					name: '访问来源',
					type: 'pie', //设置图表类型为：饼状图,因为不在直角坐标系上，所以不需要xAxis，yAxis
					radius : '50%', //半径大小
					center: ['50%', '50%'], //圆心位置
					data:[ //绑定数据，key-value方式
						{value:335, name:'直接访问'},
						{value:310, name:'邮件营销'},
						{value:234, name:'联盟广告'},
						{value:135, name:'视频广告'},
						{value:400, name:'搜索引擎'}
					]
				}
			]
		};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
     </script>
</body>
</html>