ECharts从零开始（一）

最新推荐文章于 2024-05-26 12:10:26 发布

Artoria____

最新推荐文章于 2024-05-26 12:10:26 发布

阅读量1.8k

点赞数 1

分类专栏：数据可视化 # ECharts

本文链接：https://blog.csdn.net/Artoria_QZH/article/details/100511524

版权

数据可视化同时被 2 个专栏收录

20 篇文章 36 订阅

订阅专栏

ECharts

8 篇文章 0 订阅

订阅专栏

最近发现了一个高逼格的可视化工具ECharts，在简单接触后发现是用JS写的，奈何不会JS。于是在网上搜了搜整理了下，把一些思路及参考文献放在这。

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

下面来看具体如何实现。

一、具体实现

在正式开始前要下载好一些东西，具体如下：

Echarts
Notepad++（写HTML挺方便的）

Echarts建议从Github上下载（具体戳这），我自己选择的是4.2.1，clone到GithubDesktop或者download压缩包都行。

下载好后解压，从dist目录下找到这次会用到的echarts.min，就是这个：
在这里插入图片描述
重新随便在哪创建一个新的文件夹，将这个echarts.min复制到里面。然后在Notepad++上新建，在该文件夹目录下另存为HTML文件。就可以开始copy代码了hhh

其实官网上已经给出了很多模板，稍微修改下数据就行。当然刚开始就用它的示例数据和示例模板了。

在Notepad++上将以下代码粘贴就行啦：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1000px;height:600px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		
		// Generate data
		var category = [];
		var dottedBase = +new Date();
		var lineData = [];
		var barData = [];

		for (var i = 0; i < 20; i++) {
			var date = new Date(dottedBase += 3600 * 24 * 1000);
			category.push([
				date.getFullYear(),
				date.getMonth() + 1,
				date.getDate()
			].join('-'));
			var b = Math.random() * 200;
			var d = Math.random() * 200;
			barData.push(b)
			lineData.push(d + b);
		}
		
		
		
        myChart.setOption(
		{
			backgroundColor: '#0f375f',
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['line', 'bar'],
				textStyle: {
					color: '#ccc'
				}
			},
			
			xAxis: {
				data: category,
				axisLine: {
				lineStyle: {
					color: '#ccc'
				}
				}
			},
			
			yAxis: {
				splitLine: {show: false},
				axisLine: {
					lineStyle: {
						color: '#ccc'
					}
				}
			},
			
			series: [
			{
				name: 'line',
				type: 'line',
				smooth: true,
				showAllSymbol: true,
				symbol: 'emptyCircle',
				symbolSize: 15,
				data: lineData
			},
			
			{
			name: 'bar',
			type: 'bar',
			barWidth: 10,
			itemStyle: {
				normal: {
					barBorderRadius: 5,
					color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#14c8d4'},
                        {offset: 1, color: '#43eec6'}
                    ]
                )
				}
			},
			
			data: barData
			}, 
			
			{
			name: 'line',
			type: 'bar',
			barGap: '-100%',
			barWidth: 10,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: 'rgba(20,200,212,0.5)'},
                        {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
                        {offset: 1, color: 'rgba(20,200,212,0)'}
                    ]
					)
				}
			},
			z: -12,
			data: lineData
			},
			
			{
			name: 'dotted',
			type: 'pictorialBar',
			symbol: 'rect',
			itemStyle: {
				normal: {
					color: '#0f375f'
				}
			},
			
			symbolRepeat: true,
			symbolSize: [12, 4],
			symbolMargin: 1,
			z: -10,
			data: lineData
			}
			]
        })


        

    </script>
</body>
</html>

最后ctrl+s保存，双击这个HTML文件，就可以打开看到效果啦。如果显示的是空白，则代码缩进或者引号存在问题。

二、改进

（1）上述操作必须要echarts.min.js这个文件和你的HTML文件在同一文件下才行。若想要发给自己的小伙伴看看，只有将整个文件夹压缩发给他才能看到效果。那如果想只发送这个HTML文件就能看到效果呢？

我们可以把路径修改下，上述代码的路径为本地路径，若改为网址则可以实现不打包就能看到效果图的目的。具体如下:

将<script src="echarts.min.js"></script>
修改为<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>

（2）那要是想使用官网其他的实例呢（官网实例见此）？

随便打开一个实例，例如Basic Line Chart，将option中的代码复制，粘贴到上述代码myChart.setOption中就行。切记一定要对齐缩进

具体效果如图：
在这里插入图片描述

由于是第一次接触JS和ECharts，可能在描述上存在一定的问题，同时这只是简单地在本地去实现官网中的实例。后续会慢慢的进行改进和部分修改。

参考文献：
Echarts入门
 Echarts手册
 5分钟上手写ECharts的第一个图表

Artoria____

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ECharts从零开始（一）

最近发现了一个高逼格的可视化工具ECharts，在简单接触后发现是用JAVA写的，奈何不会JAVA。于是在网上搜了搜整理了下，把一些思路及参考文献放在这。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safa...
复制链接

扫一扫

专栏目录