echarts3实战：全面解析柱状图、折线图、饼图及地图绘制
189 浏览量
更新于2024-09-01
收藏 221KB PDF 举报
“echarts3 使用总结，包括柱状图、折线图、饼图和地图的实现代码。”
本文是对echarts3的使用总结，主要讲解如何利用它来绘制各种图表和地图。Echarts 是一个基于 JavaScript 的数据可视化库，提供了丰富的图表类型，如柱状图、折线图、饼图等，并且支持地图的绘制，适用于Web应用中数据展示的需求。
在开始使用echarts3之前，需要完成以下前期准备：
1. 引入 echarts.js 文件，可以从官方网站下载最新版本的库文件。
2. 在HTML中创建一个具有固定宽度和高度的`div`元素，作为echarts图表的容器。容器的高度是必要的，因为没有高度的话，图表将无法显示。
3. 在JavaScript中，通过`echarts.init()`方法初始化图表，传入`div`元素的ID，然后定义`option`对象配置图表参数，最后使用`setOption()`方法将配置应用到图表上。
以下是一个基本的初始化示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
<script src="js/echarts.js"></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
var option = {
// 配置项在这里
};
myChart.setOption(option);
</script>
</body>
</html>
```
接下来，我们看看如何使用echarts3绘制不同类型的图表：
1. 柱状图：柱状图常用于比较不同类别的数据。以下是一个简单的柱状图代码示例：
```javascript
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}]
};
```
2. 折线图：折线图适合展示数据随时间变化的趋势。例如：
```javascript
var option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
width: 2
}
}]
};
```
3. 饼图：饼图用于表示整体与部分的关系。以下是一个简单的饼图配置：
```javascript
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1048, name: '搜索引擎'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
```
4. 地图：echarts3 支持绘制各种地图，如中国地图。地图的使用需要引入相应的地图主题文件，例如 `echarts/map/js/china.js`。以下是一个简单的中国地图示例：
```javascript
var option = {
tooltip: {},
visualMap: {
min: 0,
max: 150,
left: 'left',
pieces: [{
value: 60,
color: 'green'
}, {
value: 120,
color: 'yellow'
}, {
value: 150,
color: 'red'
}],
text: ['High', 'Low'],
calculable: true
},
series: [{
name: 'China Population',
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true,
textStyle: {
color: 'black'
}
},
emphasis: {
show: true
}
},
data: [
{name: 'Beijing', value: 20},
{name: 'Shanghai', value: 30},
// 其他城市的数据...
]
}]
};
```
以上只是echarts3使用的基本示例，实际应用中可以根据需求调整参数，实现更复杂的交互和视觉效果。Echarts3 提供了丰富的API和配置选项，可以满足大多数数据可视化的需要。在开发过程中，可以参考官方文档和示例，以便更好地理解和使用 echarts3。
echarts3 使用总结（绘制各种图表使用总结（绘制各种图表,地图）地图）
本篇文章主要介绍了echarts3 使用总结，详细的介绍了各种柱状图、折线图、饼图、全国地图等的实现代码，
有需要的可以了解一下。
由于项目需要自学了echarts，下面将学到的东西总结如下，如果有哪里写的不好，请批评指正
一、前期准备一、前期准备
1、使用echarts之前先要引入echarts.js，js可以到官网下载
2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。
3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急往下看），使
用setoption生成图表。
（代码如下）注：后面将不再对引入js，获取id，调用option生成图表做赘述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引入echarts.js -->
<script src="js/echarts.js "></script>
<script>
获取容器的id并赋值给变量myChart
var myChart = echarts.init(document.getElementById('main'));
/*用来配置参数*/
option = {
}
/*调用option生成图表*/
myChart.setOption(option)
</script>
</body>
</html>
二、各种图表使用二、各种图表使用
1、柱状图代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js "></script>
<script>
var myChart = echarts.init(document.getElementById('main'));
myChart.title = '坐标轴刻度与标签对齐';
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
下载后可阅读完整内容，剩余8页未读，立即下载
582 浏览量
1416 浏览量
562 浏览量
2923 浏览量
3928 浏览量
2024-09-17 上传
1550 浏览量
378 浏览量
weixin_38689191
- 粉丝: 5
我的内容管理
展开
最新资源
- 利用jquery和php实现前端高亮点赞效果
- ExtJS中文API文档：学习必备参考手册
- 中国交通标志CTSDB数据集15训练集详细解析
- 移动设备手指滑动图片切换jQuery特效
- 深入解析Oracle分区表技术与应用
- Delphi DLL封装窗体技术详解与Modal模式应用
- SSO系统在Windows平台的安全加固方法研究
- Mercury Bootstrap：创建快速引导组件的HyperScript封装
- 蚁群算法在连续空间多目标优化问题的应用研究
- 蜘蛛侠主题新标签页插件——高清壁纸与游戏
- Windows 64位系统中curl工具的使用与介绍
- 掌握Oracle索引机制与优化工具使用
- C++实现学生成绩管理系统的设计与开发
- PHP开发中的MockForagePHP工具介绍
- 编程必备：全面收录中英文码表资源
- 华胜免费送货单开单软件：简便操作无需注册
