echarts3实战：全面解析柱状图、折线图、饼图及地图绘制
11 浏览量
更新于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页未读，立即下载
583 浏览量
1418 浏览量
567 浏览量
2945 浏览量
3943 浏览量
2024-09-17 上传
1556 浏览量
385 浏览量
weixin_38689191
- 粉丝: 5
我的内容管理
展开
最新资源
- React.js实现的简单HTML5文件拖放上传组件
- iReport：强大的开源可视化报表设计器
- 提升代码整洁性：Eclipse虚线对齐插件指南
- 迷你时间秀：个性化系统时间显示与管理工具
- 使用ruby-install一次性安装多种Ruby版本
- Logality：灵活自定义的JSON日志记录器
- Mogre3D游戏开发实践教程免费分享
- PHP+MySQL实现的简单权限账号管理小程序
- 微信支付统一下单签名错误排查与解决指南
- 虚幻引擎4实现的多边形地图生成器
- TouchJoy：专为触摸屏Windows设备打造的屏幕游戏手柄
- 全方位嵌入式开发工具包：ARM平台必备资源
- Java开发必备：30个实用工具类全解析
- IBM475课程资料深度解析
- Java聊天室程序：全技术栈源码支持与学习指南
- 探索虚拟房屋世界：house-tour-VR应用体验
