Echarts

最新推荐文章于 2022-09-30 22:33:25 发布

阳光的羊羊羊羊

最新推荐文章于 2022-09-30 22:33:25 发布

阅读量288

点赞数 1

本文链接：https://blog.csdn.net/yjyxw/article/details/106115348

版权

官网地址：http://echarts.baidu.com/

1.首先在官网选择合适的下载版本

http://echarts.baidu.com/download.html

2.引入Echarts

通过标签方式直接引入构建好的 echarts 文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file1.css">
		<script src="jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" href="layui\css\layui.css">
		<script src="echarts.min.js"></script>
		
	</head>	
	<body>
		<div id="main" style="width: 400px; height:600px; "></div>
		
		<script type="text/javascript">
				var myChart = echarts.init(document.getElementById('main'));
				        var option = {
				            title: {
				                text: 'ECharts 入门示例'
				            },
				            tooltip: {},
				            legend: {
				                data:['销量']
				            },
				            xAxis: {
				                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				            },
				            yAxis: {},
				            series: [{
				                name: '销量',
				                type: 'bar',
				                data: [5, 20, 36, 10, 10, 20]
				            }]
				        };
				
				        myChart.setOption(option);
		</script>
		
	</body>
</html>

从Echarts库中拉取了一个图表

颜色主题（Theme）
调色盘
直接样式设置（itemStyle、lineStyle、areaStyle、label、...）
视觉映射（visualMap）

var chart = echarts.init(dom, 'light');

或者

var chart = echarts.init(dom, 'dark');

直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...

直接的样式设置是比较常用设置方式。纵观 ECharts 的 option 中，很多地方可以设置 itemStyle、lineStyle、areaStyle、label 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。

一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，itemStyle、label 等可能出现在不同的地方。

直接样式设置的另一篇介绍，参见个性化图表的样式。

拉取日历图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="new_file1.css">
		<script src="jquery-1.11.3.min.js"></script>
		<link rel="stylesheet" href="layui\css\layui.css">
		<script src="echarts.min.js"></script>
		
	</head>	
	<body>
		   <div id="main" style="width:100%;height:400px;"></div>
		     <script type="text/javascript">
		         var myChart = echarts.init(document.getElementById('main'));
		 
		         // 模拟数据
		         function getVirtulData(year) {
		             year = year || '2017';
		             var date = +echarts.number.parseDate(year + '-01-01');
		             var end = +echarts.number.parseDate(year + '-12-31');
		             var dayTime = 3600 * 24 * 1000;
		             var data = [];
		             for (var time = date; time <= end; time += dayTime) {
		                 data.push([
		                     echarts.format.formatTime('yyyy-MM-dd', time),
		                     Math.floor(Math.random() * 10000)
		                 ]);
		             }
		             return data;
		         }
		         var option = {
		             visualMap: {
		                 show: false,
		                 min: 0,
		                 max: 10000
		             },
		             calendar: {
		                 range: '2017'
		             },
		             series: {
		                 type: 'heatmap',
		                 coordinateSystem: 'calendar',
		                 data: getVirtulData(2017)
		             }
		         };
		         myChart.setOption(option);
		     </script>
	</body>
</html>

阳光的羊羊羊羊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Echarts

官网地址：http://echarts.baidu.com/1.首先在官网选择合适的下载版本 http://echarts.baidu.com/download.html2.引入Echarts通过标签方式直接引入构建好的 echarts 文件<!DOCTYPE html><html><head> <meta charset="utf-8">  ...
复制链接

扫一扫