一、ECHarts基本介绍
百度公司开源的一个可视化库，满足绝大部分可视化图表的实现，是实现数据可视化的最佳工具之一。
官方网址：Apache ECharts
视频学习地址 echarts数据可视化项目教程_哔哩哔哩_bilibili
ECHarts特点：
1、多种数据格式支持
- key—value数据格式
- 二维表
- TypedArray格式
2、流数据的支持
- 流数据的动态渲染
- 增量渲染技术
3、移动端的优化
4、跨平台的使用
5、绚丽的特效
6、三维可视化
二、ECHarts入门
实现步骤
- 引入echarts.js文件
- 准备一个呈现图表的盒子（定义了高宽的 DOM 容器，相当于vue的div）
- 初始化echarts实例对象
- 准备配置项（最麻烦的配置）
- 将配置项设置给echarts实例对象
<!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>x，y柱状图实例</title>
<!-- 步骤1：引入echarts.js文件 -->
<script src="lib/echarts.min.js"></script>
<!--
步骤1：引入echarts.js文件
步骤2：准备一个呈现图表的盒子
步骤3：初始化echarts实例对象
步骤4：准备配置项（决定元素）
步骤5：将配置项设置给echarts实例对象
-->
</head>
<body>
<!-- 步骤2：准备一个呈现图表的盒子 （理解成定义长宽的容器）-->
<div style="width: 600px;height: 400px"></div>
<script>
// 步骤3：初始化echarts实例对象
// 参数, dom,决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div')) // document.querySelector('div')获取页面上第一个div标签
// 步骤4：准备配置项
var option = {
xAxis: { // x轴
type: 'category', // 类目轴
data: ['小明', '小红', '小王']
},
yAxis: { // y轴
type: 'value' // 数值轴（值根据“series”对象中的data属性自动生成）
},
series: [ // 系列列表
{
name: '语文', // 柱状图的名字
type: 'bar', // 图形类型（柱状图）-- line折线图 -- pie饼图
data: [70, 92, 87] // y轴数据
}
],
// 官网手册练习
title: { // 图形标题
text: '成绩', //标题文本
link: 'https://www.baidu.com/', //标题添加超链接
textStyle: { // 标题美化
color: 'red' // 标题颜色--红
}
},
}
// 步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)
</script>
</body>
</html>效果如图
三、ECHarts七大图表效果
- 柱状图
- 折线图
- 散点图
- 饼图
- 地图
- 雷达图
- 仪表盘图
1、通用配置
- 标题: title
- 提示: tooltip
- 工具按钮: toolbox
- 图列: legend
标题title 和 提示工具tooltip
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
title: { // 标题设置
text: '成绩展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'red' // 标题颜色为红
},
borderWidth: 5, // 标题边框宽度
borderColor: 'blue', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 230, // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
tooltip: { // 工具提示
trigger: 'axis', // trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
triggerOn: 'mousemove', // 触发时机, click代表点击, mousemove代表鼠标移过
// formatter: '{b} 的成绩是 {c}' // {b}（类目值），{c}（数值）
// 注意事项：使用回调函数trigger的属性需要是axis
formatter: function(arg){ // 文字格式化(自定义提示内容)
return arg[0].name + '的分数是:' + arg[0].data
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
工具按钮toolbox
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
title: {
text: '成绩展示',
textStyle: {
color: 'red'
},
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
left: 50,
top: 10
},
tooltip: {
// trigger: 'item'
trigger: 'axis',
triggerOn: 'click',
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){
return arg[0].name + '的分数是:' + arg[0].data
}
},
toolbox: { // 工具箱按钮
feature: {
saveAsImage: {}, // 导出该图表
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html> 
图例legend
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr1 = [88, 92, 63, 77, 94, 80, 72, 86]
var yDataArr2 = [93, 60, 61, 62, 85, 79, 92, 30]
var option = {
title: {
text: '成绩展示',
textStyle: {
color: 'red'
},
borderWidth: 5,
borderColor: 'blue',
borderRadius: 5,
left: 50,
top: 10
},
tooltip: {
// trigger: 'item'
trigger: 'axis',
triggerOn: 'click',
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){
return arg[0].name + '的分数是:' + arg[0].data
}
},
toolbox: {
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
legend: { // 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: yDataArr1
},
{
name: '数学',
type: 'bar',
data: yDataArr2
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
2、柱状图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>柱状图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px; height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']// 准备x轴数据
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86] // 为x轴每一个元素指明数据
var option = {
/* xAxis: {
type: 'category',
data: xDataArr,
name: '名字'
},
yAxis: { // 横纵柱状图切换
type: 'value',
name: '成绩' ,
splitLine: { // 折线图和柱状图刻度线优化
show: true, // 是否显示刻度线
lineStyle: {
width:1, //设置刻度线粗度(粗的宽度)
//颜色数组，数组数量要比刻度线数量大才能不循环使用
//color: ['rgba(0, 0, 0, 0)','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9','#EDF9F9']
color: 'red' // 刻度线为红色
}
}
}, */
backgroundColor: '#ffffff' , // 图形背景设置
xAxis: {
type: 'value',
name: '成绩'
},
yAxis: {
type: 'category',
data: xDataArr,
name: '姓名'
},
series: [{
name: "数学",
type: 'bar',
data: yDataArr,
barWidth: '30%' , // 柱状图每个柱子的宽度
markPoint: { // 标记最大值和最小值
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: { // 标记平均值
data: [
{
type: 'average',
name: '平均值' ,
itemStyle:{
color: '#ff0000' // 平均值线的颜色
}
}
]
},
label: { // 柱状图数值显示
show: true ,// 开启
rotate: 10 ,// 数值旋转 正值顺时针，负值逆时针
position: 'insideTop' // 数值显示在柱状图的位置
},
itemStyle: { // 柱子美化
normal: {
barBorderRadius:[6, 6, 0, 0], // 柱子四角设置
/* color:function (params){ // 柱子颜色
var colorIndex = 0;
if(params.dataIndex == 0){
colorIndex = 1;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1,[
{offset: 0, color: colorList[colorIndex][0]},
{offset: 1, color: colorList[colorIndex][1]}
]);
} */
color: 'green' // 柱子颜色（绿色）
}
}
}],
}
mCharts.setOption(option)
</script>
</body>
</html>
3、折线图
折线图与柱状图基本一样
折线图的常用设置
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. x轴数据:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
//3. y轴数据:[3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
//4. 将type的值设置为line
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false // x轴的第1个元素是否与y轴有距离
},
yAxis: {
type: 'value',
//很重要的一点，开启y轴缩放，使y轴起始点不为0。否则当y轴数据很相近，会近似形成一条直线
scale: true
},
series: [
{
name: '康师傅',
data: yDataArr,
type: 'line',
markPoint: { // 标记最大最小点
data: [
{
type: 'max'
},
{
type: 'min'
}
]
},
markLine: { // 标记平均值的线
data: [
{
type: 'average'
}
]
},
markArea: { // 标记一片区域
data: [
[ // 标记1到2月
{
xAxis: '1月'
},
{
xAxis: '2月'
}
],
[ // 标记7到8月
{
xAxis: '7月'
},
{
xAxis: '8月'
}
]
]
},
smooth: true, // 是否为平滑线
lineStyle: { // 线的样式设置
color: 'green',
type: 'solid' // solid为实线 dashed虚线 dotted点线
},
areaStyle: { // 数据区域填充效果
color: 'pink'
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
折线图堆叠设置
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: yDataArr,
stack: 'all', // 堆叠图的设置 很重要的设置，可以有效避免两组数据交叉，不产生数据堆叠
areaStyle: { //数据区域填充效果
color: 'red'
}
},
{
type: 'line',
data: yDataArr2,
stack: 'all', // 堆叠图的设置
areaStyle: { //数据区域填充效果
color: 'green'
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
4、散点图
散点图入门程序
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. x轴和y轴数据 二维数组 [ [身高,体重],... ]
//3. 将type的值设置为scatter, x轴和y轴的type都是value
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }]
var axisData = []
for( var i=0;i<data.length;i++) { // 将一维数组中保存的一个个对象，变为二维数组
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr) // 使用二维数组保存数据
}
console.log(axisData)
var mCharts = echarts.init(document.querySelector("div"))
var option = {
xAxis: {
type: 'value', // 数值轴
scale: true, // 坐标轴设置不为0开始
name: '身高'
},
yAxis: {
type: 'value',
scale: true,
name: '体重'
},
series: [
{
type: 'scatter', // 指明图表的类型为散点图
data: axisData
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
散点图常见效果图
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. x轴和y轴数据 二维数组 [ [身高,体重],... ]
//3. 将type的值设置为scatter, x轴和y轴的type都是value
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }]
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
}
console.log(axisData)
var mCharts = echarts.init(document.querySelector("div"))
var option = {
xAxis: {
type: 'value',
scale: true,
name: '身高'
},
yAxis: {
type: 'value',
scale: true,
name: '体重'
},
series: [
{
// type: 'scatter',
type: 'effectScatter', // 指明图表为带涟漪动画的散点图
showEffectOn: 'emphasis', // 当鼠标移过出现涟漪动画 render（自动加载动画）
rippleEffect: {
scale: 10 // 涟漪动画时, 散点的缩放比例
},
data: axisData,
// symbolSize: 30 // 控制散点的大小
symbolSize: function (arg) { // 控制达到指定条件的散点的大小
// console.log(arg)
var height = arg[0] / 100 // 身高
var weight = arg[1] // 体重
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 20
}
return 5
},
itemStyle: { // 控制散点的样式
color: function (arg) { // 控制散点 颜色
// console.log(arg)
var height = arg.data[0] / 100
var weight = arg.data[1]
// bmi = 体重kg / (身高m*身高m) 大于28,就代表肥胖
var bmi = weight / (height * height)
if (bmi > 28) {
return 'red'
}
return 'green'
}
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
5、直角坐标系通用配置
grid axis dataZoom
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
dataZoom: [ // 控制区域缩放效果的实现
{
type: 'slider', // 缩放的类型 slide代表滑块 inside代表依靠鼠标滚轮
// type: 'inside'
xAxisIndex: 0 // x轴区域缩放
},
{
type: 'slider',
yAxisIndex: 0, // y轴区域缩放
start: 0, // 滑块的初始值 百分比
end: 80 // 滑块的结束值 百分比
}
],
toolbox: { // 控制区域缩放
feature: {
dataZoom: {}
}
},
grid: { // 控制坐标系的大小和位置等属性
show: true, // 边框是否显示
borderColor: 'red', // 边框颜色
borderWidth: 3 ,// 边框宽度
left: 120, // 坐标系相对位置
top: 120,
width: 300 , // 坐标系的大小
heidth: 150
},
xAxis: {
type: 'category',
data: xDataArr,
position: 'top' // 控制x轴显示位置,默认在下
},
yAxis: {
type: 'value',
position: 'right' // 控制y轴显示位置，默认在左
},
series: [
{
name: '语文',
type: 'bar',
markPoint: {
data: [
{
type: 'max', name: '最大值'
},{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60,
position: 'top'
},
barWidth: '30%',
data: yDataArr
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
6、饼图
饼图的常用设置
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备数据[{name:???, value:??? },{}]
// 淘宝: 11231 京东: 22673 唯品会: 6123 1号店: 8989 聚美优品: 6700
//3. 将type的值设置为pie
var mCharts = echarts.init(document.querySelector("div"))
// pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
var pieData = [
{
name: '淘宝',
value: 11231
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '1号店',
value: 8989
},
{
name: '聚美优品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie', // 设置为饼图
data: pieData // 数据为一个数组，数组里面包含对象，对象里面包含name和value属性
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
饼图的进阶设置
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备数据[{name:???, value:??? },{}]
// 淘宝: 11231 京东: 22673 唯品会: 6123 1号店: 8989 聚美优品: 6700
//3. 将type的值设置为pie
var mCharts = echarts.init(document.querySelector("div"))
// pieData就是需要设置给饼图的数据, 数组,数组中包含一个又一个的对象, 每一个对象中, 需要有name和value
var pieData = [
{
name: '淘宝',
value: 11231
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '1号店',
value: 8989
},
{
name: '聚美优品',
value: 6700
}
]
var option = {
series: [
{
type: 'pie',
data: pieData,
center: ['40%', '50%'], // 饼图在容器内的位置，参数一距离左侧，参数二距离上面
label: { // 饼图文字的显示控制
show: true, // 开启（默认开启）
// 决定文字显示的内容
//formatter: 'hehe',
formatter: function(arg){
// console.log(arg)
return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
}
},
// radius属性：饼图半径的设置
// radius: 20, // 饼图的半径·
// radius: '20%', // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['50%', '75%'], // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
//roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径根据占比显示
selectedMode: 'single' , // 点击哪一块，哪个区域就会偏离一点 ，只能支持一个
//selectedMode: 'multiple', // 点击哪一块，哪个区域就会偏离一点，可以同时支持多个
selectedOffset: 50 // 偏移距离设置
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
7、地图
地图的使用方式
- 百度地图API 需要申请百度地图ak
- 矢量地图 自己准备矢量地图数据
以下内容为矢量地图的学习
矢量地图的实现步骤
- 准备号json地图文件，需要导入项目中
- 使用Ajax获取json地图文件的数据 $.get('json/map/china.json', function (ret) { })
- 在回调函数中向echarts全局对象注册地图的json数据 echarts.registerMap('chinaMap', ret)
- 在geo下设置几个关键参数
矢量地图入门程序
<!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="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px;border: 1px solid #f00"></div> <!-- border增加外边框-->
<script>
//1. ECharts最基本的代码结构
//2. 准备中国地图的矢量数据
//3. 使用Ajax获取矢量地图数据
//4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
//5. 配置geo的type为'map', map为'chinaMap'
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
// console.log(ret)
echarts.registerMap('chinaMap', ret) // 第一个参数为name，随意取
var option = {
geo: {
type: 'map', // 固定值，表示这是一个地图
map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示地图地区名称
},
zoom: 1, // 设置初始化的缩放比例
center: [87.617733, 43.792818] // 设置地图中心点的坐标
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>矢量地图进阶
<!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="lib/echarts.min.js"></script>
<script src="lib/jquery.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px;border: 1px solid #f00"></div>
<script>
//1. 显示基本的中国地图
//2. 将空气质量的数据设置给series下的对象
//3. 将series下的数据和geo关联起来
//4. 配置visualMap
var airData = [
{ name: '北京', value: 39.92 },
{ name: '天津', value: 39.13 },
{ name: '上海', value: 31.22 },
{ name: '重庆', value: 66 },
{ name: '河北', value: 147 },
{ name: '河南', value: 113 },
{ name: '云南', value: 25.04 },
{ name: '辽宁', value: 50 },
{ name: '黑龙江', value: 114 },
{ name: '湖南', value: 175 },
{ name: '安徽', value: 117 },
{ name: '山东', value: 92 },
{ name: '新疆', value: 84 },
{ name: '江苏', value: 67 },
{ name: '浙江', value: 84 },
{ name: '江西', value: 96 },
{ name: '湖北', value: 273 },
{ name: '广西', value: 59 },
{ name: '甘肃', value: 99 },
{ name: '山西', value: 39 },
{ name: '内蒙古', value: 58 },
{ name: '陕西', value: 61 },
{ name: '吉林', value: 51 },
{ name: '福建', value: 29 },
{ name: '贵州', value: 71 },
{ name: '广东', value: 38 },
{ name: '青海', value: 57 },
{ name: '西藏', value: 24 },
{ name: '四川', value: 58 },
{ name: '宁夏', value: 52 },
{ name: '海南', value: 54 },
{ name: '台湾', value: 88 },
{ name: '香港', value: 66 },
{ name: '澳门', value: 77 },
{ name: '南海诸岛', value: 55 }
]
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
console.log(ret)
echarts.registerMap('chinaMap', ret)
var option = {
geo: {
type: 'map',
map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放以及拖动的效果
label: {
show: true // 展示标签
}
},
series: [
{
data: airData,
geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
type: 'map'
}
],
visualMap: { // 左下侧滑块设置
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] // 控制颜色渐变的范围
},
calculable: true // 出现滑块
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
8、雷达图
实现步骤
- 定义各个维度的最大值和name indicator属性
- 准备具体产生的数据 data : { [ ],[ ],[ ] }
- 将series下的type设置为radar
雷达入门程序
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 定义各个维度的最大值, 通过radar属性配置
// 易用性,功能,拍照,跑分,续航, 每个维度的最大值都是100
//3. 准备产品数据, 设置给series下的data
// 华为手机1: 80, 90, 80, 82, 90
// 中兴手机1: 70, 82, 75, 70, 78
//4. 将type的值设置为radar
var mCharts = echarts.init(document.querySelector("div"))
// 各个维度的最大值
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
var option = {
radar: {
indicator: dataMax, // 配置各个维度的最大值
shape: 'polygon' // 配置雷达图最外层的图形 circle是圆形
},
series: [
{
type: 'radar', // radar 此图表是一个雷达图
label: { // 设置标签的样式
show: true // 显示数值
},
areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积
data: [
{
name: '华为手机1',
value: [80, 60, 80, 82, 90]
},
{
name: '中兴手机1',
value: [70, 82, 75, 70, 78]
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>9、仪表盘的使用
实现步骤
- 准备数据 数组里面放入对象
- 设置type属性值为guage
仪表盘程序实现
<!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="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
//1. ECharts最基本的代码结构
//2. 准备数据, 设置给series下的data
//3. 将type的值设置为gauge
var mCharts = echarts.init(document.querySelector("div"))
var option = {
series: [
{
type: 'gauge',
data: [
{ // 每一个对象就代表一个指针
value: 97,
itemStyle: { // 指针的样式
color: 'pink' // 指针的颜色
}
},
{
value: 85,
itemStyle: {
color: 'green'
}
}
],
min: 50 , // min max 控制仪表盘数值范围
max: 200
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
四、ECHarts效果补充
1、柱状图指示器改变形式为虚线
var option = {
// backgroundColor: '#00265f',
tooltip: {
trigger: 'axis',
axisPointer: {
// 指示器类型修改为直线指示器 modify by sunyh 2021-1-5
type: 'line',
// 指示器的显示变为虚线 modify by sunyh 2021-1-26
lineStyle: {
type: 'dashed',
color: '#ffff00'
}
}
}
2、柱状图y轴取消刻度
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
