ECharts实现数据可视化超详细基础入门教程

ECharts实现数据可视化超详细基础入门教程

ECharts介绍

ECharts官网：https://echarts.apache.org/zh/index.html
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

博客文章中的所有代码素材下载:
https://www.aliyundrive.com/s/JCX666AEBH7
提取码:3x7o

使用ECharts五个步骤

1、引入ECharts.js文件
可以通过下载源代码：ECharts.js下载地址

<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>

2、准备一个具备大小的DOM容器

<div class="qwe" style="width: 600px;height: 400px;"></div>

3、初始化echarts实例对象

var mCharts = echarts.init(document.querySelector(".qwe"));

4、配置项

var option = {title: {text: '成绩',link:"https://t.bilibili.com/",textStyle:{color:'#ffaa00',fontSize:30,}},xAxis: {// type: 类目轴type: 'category',data: ['小明','小黑','小王']},yAxis: {// 数值轴type: 'value'},series: [{name: '语文',type: 'bar',data: [70,92,87]}]
}

5、将配置项设置给echarts对象

mCharts.setOption(option);

一、柱状图

柱状图实现效果展示

实现柱状图代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>柱状图的基本实现</title><link rel="stylesheet" type="text/css" href="css/public.css"/><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.zhu{width: 600px;height: 400px;/* background-color: #ffaa00; */}</style></head><body><div class="zhu"></div><script type="text/javascript">var mCharts = echarts.init(document.querySelector(".zhu"));var xDataArr=['张三','李四','王五','闰土','小明','茅台'];var yDataArr=[88,92,63,77,94,80];var option = {xAxis:{// 类目轴type:'category',data:xDataArr,// type: 'value',},yAxis:{// 数值轴type: 'value',// type:'category',// data:xDataArr,},series:[{name:'语文',// 柱状图:bartype:"bar",// 最大值和最小值:markPoint 平均值:markLinemarkPoint:{data:[{type:"max", name:"最大值",},{type:"min", name:"最小值",}]},markLine:{data:[{type:'average', name:'平均值',}]},// 数值显示label:{show:true,// 文本内容旋转45度rotate:45,// 数值显示在顶部 top// inside 在内部显示 为默认值position:'top',},barWidth:'50%',data:yDataArr,}]}// 将配置项设置给echarts对象mCharts.setOption(option);</script></body>
</html>

常见配置效果实现
1、title 标题

var option = {// 标题title:{link:'https://echarts.apache.org/zh/index.html',text:"成绩展示",textStyle:{color:'#ffaa00',},borderWidth:5,borderColor:'#dfdf00',borderRadius:7,left:50,top:10,},

2、tooltip 显示图例

tooltip:{// 触发类型 trigger// trigger: 'item',// 触发有竖线的那种trigger:'axis',// 触发时机     triggerOn// triggerOn:'click',// 格式化 formatter  {a}（系列名称），{b}（类目值），{c}（数值）// formatter:'{b}的{a}成绩是{c}',formatter: function(arg){// console.info(arg)return arg[0].name + '的分数是' + arg[0].data}
},

3、toolbox ECharts提供的工具栏

toolbox:{feature: {// 下载导出图片saveAsImage: {},// 数据视图 还可以修改数据dataView: {},// 重置restore: {},// 区域缩放dataZoom:{},// 类型切换magicType:{type:['bar','line',]},}
},

4、legend:图例，用于筛选系列，需要和series配合使用

legend:{data:['语文','数学']
},

通用配置效果展示

所有效果代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#main{width: 800px;height: 400px;}</style></head><body><div id="main"></div><script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var xDataArr=['张三','李四','王五','闰土','小明','茅台','二妞','大强'];var yDataArr=[88,92,63,77,94,80,72,86];var yDataArr2=[68,62,43,87,84,70,99,34];var option = {// 标题title:{link:'https://echarts.apache.org/zh/index.html',text:"成绩展示",textStyle:{color:'#ffaa00',},borderWidth:5,borderColor:'#dfdf00',borderRadius:7,left:50,top:10,},// 显示图例tooltip:{// 触发类型 triggertrigger: 'item',// 触发有竖线的那种// trigger:'axis',// 触发时机   triggerOn// triggerOn:'click',// 格式化 formatter  {a}（系列名称），{b}（类目值），{c}（数值）// formatter:'{b}的{a}成绩是{c}',// 回调函数formatter: function(arg){// console.info(arg)return arg.name + '的' + arg.seriesName + '分数是: ' + arg.data;}},// ECharts提供的工具栏toolbox:{feature: {// 下载导出图片saveAsImage: {},// 数据视图 还可以修改数据dataView: {},// 重置restore: {},// 区域缩放dataZoom:{},// 类型切换magicType:{type:['bar','line',]},}},// legend:图例，用于筛选系列，需要和series配合使用legend:{data:['语文','数学']},xAxis:{type:'category',data:xDataArr,// type: 'value',},yAxis:{type: 'value',// type:'category',2// data:xDataArr,},series:[{name:'语文',// 柱状图:bartype:"bar",// 最大值和最小值:markPoint 平均值:markLinemarkPoint:{data:[{type:"max", name:"最大值",},{type:"min", name:"最小值",}]},markLine:{data:[{type:'average', name:'平均值',}]},// 数值显示label:{show:true,// 文本内容旋转45度rotate:30,// 数值显示在顶部 top// position:'top',},// barWidth:'40%',data:yDataArr,},// 数学成绩{name:'数学',type:'bar',data: yDataArr2,label:{show:true,// 文本内容旋转45度// rotate:30,// 数值显示在顶部 topposition:'top',},}]};// 将配置项设置给echarts对象myChart.setOption(option);</script></body>
</html>

二、折线图

折线图实现效果图

折线图实现完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>class2_折线图</title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">#zhe{width: 650px;height: 400px;/* background-color: #ffaa00; */}</style></head><body><div id="zhe"></div><script type="text/javascript">var myCharts = echarts.init(document.querySelector("#zhe"));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=[1560,1600,2300,500,800,1300,1800,1550,900,500,1460,500];var option = {legend:{data:['康帅博','汤达人']},xAxis:{type:'category',data:xDataArr,// type: 'value',// 紧挨边缘boundaryGap:false,},yAxis:{type: 'value',// type:'category',2// data:xDataArr,// 缩放，脱离0值比例scale:true,},tooltip:{// 触发类型 triggertrigger: 'axis',},series:[{name:'康帅博',// 柱状图:bartype:"line",data:yDataArr,stack:'all',areaStyle:{},// 最值markPoint:{data:[{type:'max',}]},// 平均值markLine:{data:[{type:'average', name:'平均值',}]},// 标注区间 markAreamarkArea:{data:[[{xAxis:'2月'},{xAxis:'4月'},],[{xAxis:'7月'},{xAxis:'8月'},],]},// 线条平滑 smoothsmooth:true,// 改变线条样式 lineStylelineStyle:{color:'#0055ff',type:'solid',},// 填充风格areaStyle:{color:'#aaff00',},},{name:'汤达人',type:'line',data:yDataArr2,stack:'all',areaStyle:{},}],}// 将配置项设置给echarts对象myCharts.setOption(option);</script></body>
</html>

折线图常见效果

最大值和最小值:markPoint 平均值:markLine

markPoint:{data:[{type:"max", name:"最大值",},{type:"min", name:"最小值",}]
},
markLine:{data:[{type:'average', name:'平均值',}]
},

标注区间 markArea

markArea:{data:[[{xAxis:'2月'},{xAxis:'4月'},],[{xAxis:'7月'},{xAxis:'8月'},],]
},

线条平滑 smooth

smooth:true,

改变线条样式 lineStyle

lineStyle:{color:'#aa00ff',// 线条样式 与css中边框border像是type:'solid',
},

三、散点图

散点图实现效果展示

散点图所有代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>calss3_散点图</title><!-- 引入 echarts.js --><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div style="width: 600px;height:400px;" class="sandian"></div><script>var data=[{'height': 207, 'weight': 110},{'height': 178, 'weight': 110},{'height': 191, 'weight': 107},{'height': 191, 'weight': 102},{'height': 191, 'weight': 102},{'height': 191, 'weight': 102},{'height': 197, 'weight': 101},{'height': 198, 'weight': 100},{'height': 191, 'weight': 100},{'height': 199, 'weight': 100},{'height': 195, 'weight': 100},{'height': 198, 'weight': 99},{'height': 194, 'weight': 98},{'height': 199, 'weight': 98},{'height': 194, 'weight': 98},{'height': 190, 'weight': 98},{'height': 202, 'weight': 98},{'height': 191, 'weight': 98},{'height': 196, 'weight': 97},{'height': 196, 'weight': 97},{'height': 197, 'weight': 97},{'height': 197, 'weight': 97},{'height': 199, 'weight': 97},{'height': 190, 'weight': 96},{'height': 196, 'weight': 96},{'height': 203, 'weight': 96},{'height': 193, 'weight': 96},{'height': 187, 'weight': 96},{'height': 193, 'weight': 96},{'height': 191, 'weight': 96},{'height': 190, 'weight': 96},{'height': 194, 'weight': 96},{'height': 188, 'weight': 96},{'height': 190, 'weight': 96},{'height': 193, 'weight': 96},{'height': 204, 'weight': 96},{'height': 189, 'weight': 96},{'height': 200, 'weight': 96},{'height': 180, 'weight': 96},{'height': 188, 'weight': 96},{'height': 191, 'weight': 96},{'height': 185, 'weight': 96},{'height': 191, 'weight': 96},{'height': 197, 'weight': 96},{'height': 195, 'weight': 95},{'height': 196, 'weight': 95},{'height': 196, 'weight': 95},{'height': 195, 'weight': 95},{'height': 198, 'weight': 95},{'height': 191, 'weight': 95},{'height': 171, 'weight': 58},{'height': 164, 'weight': 57},{'height': 161, 'weight': 57},{'height': 174, 'weight': 57},{'height': 166, 'weight': 57},{'height': 173, 'weight': 57},{'height': 170, 'weight': 57},{'height': 168, 'weight': 57},{'height': 160, 'weight': 57},{'height': 168, 'weight': 57},{'height': 173, 'weight': 57},{'height': 155, 'weight': 57},{'height': 170, 'weight': 57},{'height': 170, 'weight': 57},{'height': 167, 'weight': 57},{'height': 173, 'weight': 57},{'height': 168, 'weight': 57},{'height': 172, 'weight': 57},{'height': 168, 'weight': 57},{'height': 170, 'weight': 57},{'height': 161, 'weight': 57},{'height': 158, 'weight': 56},{'height': 162, 'weight': 56},{'height': 166, 'weight': 56},{'height': 172, 'weight': 56},{'height': 170, 'weight': 56},{'height': 167, 'weight': 56},{'height': 166, 'weight': 56},{'height': 161, 'weight': 56},{'height': 164, 'weight': 56},{'height': 160, 'weight': 56},{'height': 163, 'weight': 55},{'height': 160, 'weight': 55},{'height': 175, 'weight': 55},{'height': 168, 'weight': 55},{'height': 171, 'weight': 55},{'height': 168, 'weight': 55},{'height': 170, 'weight': 55},{'height': 165, 'weight': 55},{'height': 168, 'weight': 54},{'height': 164, 'weight': 54},{'height': 168, 'weight': 54},{'height': 164, 'weight': 53},{'height': 164, 'weight': 52},{'height': 169, 'weight': 52},{'height': 167, 'weight': 52},{'height': 163, 'weight': 50},{'height': 168, 'weight': 50},{'height': 168, 'weight': 49},{'height': 167, 'weight': 48},{'height': 185, 'weight': 80},{'height': 185, 'weight': 78},{'height': 180, 'weight': 72},{'height': 185, 'weight': 79},{'height': 191, 'weight': 89},{'height': 175, 'weight': 70},{'height': 195, 'weight': 78},{'height': 182, 'weight': 73},{'height': 185, 'weight': 77},{'height': 185, 'weight': 78},{'height': 183, 'weight': 83},{'height': 177, 'weight': 68},{'height': 183, 'weight': 76},{'height': 188, 'weight': 88},{'height': 185, 'weight': 74},{'height': 185, 'weight': 82},{'height': 181, 'weight': 71},{'height': 177, 'weight': 70},{'height': 182, 'weight': 78},{'height': 187, 'weight': 86},{'height': 191, 'weight': 82},{'height': 184, 'weight': 77},{'height': 175, 'weight': 81},{'height': 179, 'weight': 72},{'height': 178, 'weight': 73},{'height': 188, 'weight': 78},{'height': 189, 'weight': 86},{'height': 180, 'weight': 76},{'height': 185, 'weight': 76},{'height': 186, 'weight': 78},{'height': 188, 'weight': 82},{'height': 188, 'weight': 83},{'height': 178, 'weight': 77},{'height': 175, 'weight': 65},{'height': 188, 'weight': 83},{'height': 182, 'weight': 70},{'height': 173, 'weight': 67},{'height': 179, 'weight': 71},{'height': 184, 'weight': 79},{'height': 185, 'weight': 78},{'height': 179, 'weight': 71},{'height': 179, 'weight': 70},{'height': 180, 'weight': 75},{'height': 188, 'weight': 88},{'height': 183, 'weight': 77},{'height': 175, 'weight': 68},{'height': 170, 'weight': 66},{'height': 191, 'weight': 93},{'height': 177, 'weight': 75},{'height': 175, 'weight': 78},{'height': 180, 'weight': 68},{'height': 185, 'weight': 83},{'height': 177, 'weight': 78},{'height': 176, 'weight': 73},{'height': 192, 'weight': 91},{'height': 172, 'weight': 70},{'height': 185, 'weight': 79},{'height': 181, 'weight': 74},{'height': 181, 'weight': 75},{'height': 175, 'weight': 70},{'height': 181, 'weight': 77},{'height': 180, 'weight': 72},{'height': 185, 'weight': 68},{'height': 178, 'weight': 66},{'height': 188, 'weight': 83},{'height': 163, 'weight': 65},{'height': 179, 'weight': 74},{'height': 177, 'weight': 68},{'height': 185, 'weight': 76},{'height': 188, 'weight': 80},{'height': 177, 'weight': 68},{'height': 182, 'weight': 80},{'height': 192, 'weight': 84},{'height': 178, 'weight': 67},{'height': 187, 'weight': 81},{'height': 195, 'weight': 83},{'height': 174, 'weight': 67},{'height': 178, 'weight': 75},{'height': 179, 'weight': 76},{'height': 176, 'weight': 73},{'height': 183, 'weight': 76},{'height': 191, 'weight': 87},{'height': 180, 'weight': 72},{'height': 185, 'weight': 79},{'height': 194, 'weight': 82},{'height': 176, 'weight': 70},{'height': 175, 'weight': 69},{'height': 179, 'weight': 73},{'height': 188, 'weight': 70},{'height': 181, 'weight': 76},{'height': 181, 'weight': 80},{'height': 185, 'weight': 76},{'height': 180, 'weight': 75},{'height': 177, 'weight': 74},{'height': 182, 'weight': 78},{'height': 186, 'weight': 85},{'height': 183, 'weight': 71},{'height': 183, 'weight': 73},{'height': 185, 'weight': 82},{'height': 198, 'weight': 90},{'height': 175, 'weight': 74},{'height': 175, 'weight': 64},{'height': 174, 'weight': 70},{'height': 180, 'weight': 69},{'height': 174, 'weight': 73},{'height': 187, 'weight': 85},{'height': 173, 'weight': 63},{'height': 187, 'weight': 80},{'height': 174, 'weight': 63},{'height': 188, 'weight': 73},{'height': 181, 'weight': 73},{'height': 173, 'weight': 73},{'height': 168, 'weight': 64},{'height': 189, 'weight': 78},{'height': 174, 'weight': 69},{'height': 170, 'weight': 72},{'height': 184, 'weight': 74},{'height': 188, 'weight': 83},{'height': 185, 'weight': 81},{'height': 180, 'weight': 75},{'height': 180, 'weight': 70},{'height': 173, 'weight': 72},{'height': 178, 'weight': 73},{'height': 188, 'weight': 70},{'height': 187, 'weight': 82},{'height': 190, 'weight': 85},{'height': 178, 'weight': 64},{'height': 187, 'weight': 75},{'height': 175, 'weight': 62},{'height': 168, 'weight': 67},{'height': 178, 'weight': 68},{'height': 178, 'weight': 77},{'height': 167, 'weight': 61},{'height': 180, 'weight': 75},{'height': 182, 'weight': 82},{'height': 183, 'weight': 76},{'height': 168, 'weight': 69},{'height': 173, 'weight': 73},{'height': 183, 'weight': 75},{'height': 179, 'weight': 82},{'height': 183, 'weight': 75},{'height': 175, 'weight': 76},{'height': 182, 'weight': 81},{'height': 178, 'weight': 77},{'height': 175, 'weight': 73},{'height': 175, 'weight': 67},{'height': 184, 'weight': 76},{'height': 184, 'weight': 78},{'height': 183, 'weight': 71},{'height': 181, 'weight': 68},{'height': 170, 'weight': 65},{'height': 184, 'weight': 76},{'height': 177, 'weight': 64},{'height': 187, 'weight': 73},{'height': 174, 'weight': 75},{'height': 186, 'weight': 81},{'height': 185, 'weight': 83},{'height': 193, 'weight': 93},{'height': 185, 'weight': 82},{'height': 172, 'weight': 76},{'height': 168, 'weight': 71},{'height': 193, 'weight': 84},{'height': 170, 'weight': 66},{'height': 186, 'weight': 81},{'height': 172, 'weight': 77},{'height': 183, 'weight': 79},{'height': 182, 'weight': 81},{'height': 180, 'weight': 78},{'height': 182, 'weight': 78},{'height': 190, 'weight': 83},{'height': 182, 'weight': 75},{'height': 170, 'weight': 72},{'height': 191, 'weight': 79},{'height': 183, 'weight': 77},{'height': 177, 'weight': 70},{'height': 190, 'weight': 85},{'height': 182, 'weight': 75},{'height': 183, 'weight': 74},{'height': 193, 'weight': 93},{'height': 191, 'weight': 72},{'height': 182, 'weight': 78},{'height': 181, 'weight': 74},{'height': 177, 'weight': 70},{'height': 178, 'weight': 70},{'height': 178, 'weight': 70},{'height': 189, 'weight': 76},{'height': 180, 'weight': 70},{'height': 178, 'weight': 66},{'height': 187, 'weight': 72},{'height': 186, 'weight': 71},{'height': 186, 'weight': 77},{'height': 184, 'weight': 84},{'height': 192, 'weight': 85},{'height': 180, 'weight': 80},{'height': 182, 'weight': 76},{'height': 183, 'weight': 76},{'height': 180, 'weight': 75},{'height': 183, 'weight': 80},{'height': 175, 'weight': 70},{'height': 183, 'weight': 75},{'height': 170, 'weight': 68},{'height': 172, 'weight': 68},{'height': 178, 'weight': 72},{'height': 176, 'weight': 66},{'height': 185, 'weight': 75},{'height': 170, 'weight': 73},{'height': 185, 'weight': 70},{'height': 179, 'weight': 77},{'height': 174, 'weight': 75},{'height': 178, 'weight': 83},{'height': 175, 'weight': 71},{'height': 191, 'weight': 85},{'height': 180, 'weight': 76},{'height': 180, 'weight': 76},{'height': 172, 'weight': 69},{'height': 178, 'weight': 73},{'height': 190, 'weight': 80},{'height': 187, 'weight': 82},{'height': 185, 'weight': 81},{'height': 183, 'weight': 80},{'height': 173, 'weight': 69},{'height': 175, 'weight': 65},{'height': 181, 'weight': 70},{'height': 173, 'weight': 69},{'height': 178, 'weight': 66},{'height': 183, 'weight': 80},{'height': 173, 'weight': 75},{'height': 174, 'weight': 80},{'height': 191, 'weight': 88},{'height': 187, 'weight': 85},{'height': 177, 'weight': 68},{'height': 178, 'weight': 79},{'height': 178, 'weight': 75},{'height': 178, 'weight': 72},{'height': 180, 'weight': 73},{'height': 190, 'weight': 87},{'height': 182, 'weight': 78},{'height': 182, 'weight': 90},{'height': 176, 'weight': 75},{'height': 181, 'weight': 74},{'height': 187, 'weight': 72},{'height': 177, 'weight': 75},{'height': 181, 'weight': 76},{'height': 174, 'weight': 71},{'height': 185, 'weight': 80},{'height': 187, 'weight': 83},{'height': 182, 'weight': 75},{'height': 177, 'weight': 70},{'height': 174, 'weight': 71},{'height': 181, 'weight': 74},{'height': 178, 'weight': 71},{'height': 183, 'weight': 80},{'height': 187, 'weight': 83},{'height': 175, 'weight': 69},{'height': 178, 'weight': 67},{'height': 173, 'weight': 74},{'height': 178, 'weight': 72},{'height': 180, 'weight': 80},{'height': 184, 'weight': 75},{'height': 191, 'weight': 100},{'height': 185, 'weight': 72},{'height': 175, 'weight': 75},{'height': 175, 'weight': 69},{'height': 170, 'weight': 70},{'height': 170, 'weight': 73},{'height': 170, 'weight': 70},{'height': 193, 'weight': 96},{'height': 189, 'weight': 77},{'height': 181, 'weight': 81},{'height': 188, 'weight': 86},{'height': 185, 'weight': 84},{'height': 183, 'weight': 83},{'height': 164, 'weight': 60},{'height': 194, 'weight': 90},{'height': 190, 'weight': 79},{'height': 190, 'weight': 83},{'height': 190, 'weight': 83},{'height': 179, 'weight': 78},{'height': 188, 'weight': 77},{'height': 193, 'weight': 82},{'height': 183, 'weight': 81},{'height': 186, 'weight': 80},{'height': 179, 'weight': 71},{'height': 189, 'weight': 81},{'height': 190, 'weight': 88},{'height': 186, 'weight': 78},{'height': 180, 'weight': 75},{'height': 185, 'weight': 85},{'height': 171, 'weight': 64},{'height': 185, 'weight': 74},{'height': 185, 'weight': 81},{'height': 183, 'weight': 84},{'height': 193, 'weight': 90},{'height': 172, 'weight': 70},{'height': 179, 'weight': 70},{'height': 180, 'weight': 65},{'height': 178, 'weight': 83},{'height': 170, 'weight': 64},{'height': 176, 'weight': 74},{'height': 182, 'weight': 76},{'height': 177, 'weight': 74},{'height': 173, 'weight': 69},{'height': 180, 'weight': 78},{'height': 184, 'weight': 84},{'height': 175, 'weight': 72},{'height': 186, 'weight': 84},{'height': 182, 'weight': 65},{'height': 182, 'weight': 72},{'height': 181, 'weight': 79},{'height': 171, 'weight': 72},{'height': 184, 'weight': 78},{'height': 177, 'weight': 68},{'height': 176, 'weight': 72},{'height': 189, 'weight': 88},{'height': 173, 'weight': 69},{'height': 176, 'weight': 68},{'height': 185, 'weight': 76},{'height': 178, 'weight': 75},{'height': 184, 'weight': 76},{'height': 172, 'weight': 75},{'height': 184, 'weight': 74},{'height': 180, 'weight': 70},{'height': 170, 'weight': 62},{'height': 178, 'weight': 70},{'height': 178, 'weight': 78},{'height': 180, 'weight': 70},{'height': 182, 'weight': 73},{'height': 190, 'weight': 80},{'height': 200, 'weight': 86},{'height': 187, 'weight': 77},{'height': 180, 'weight': 82},{'height': 192, 'weight': 86},{'height': 179, 'weight': 72},{'height': 188, 'weight': 71},{'height': 185, 'weight': 76},{'height': 178, 'weight': 72},{'height': 170, 'weight': 75},{'height': 171, 'weight': 71},{'height': 185, 'weight': 75},{'height': 175, 'weight': 68},{'height': 183, 'weight': 75},{'height': 172, 'weight': 71},{'height': 180, 'weight': 70},{'height': 178, 'weight': 73},{'height': 186, 'weight': 77},{'height': 173, 'weight': 71},{'height': 186, 'weight': 81},{'height': 180, 'weight': 68},{'height': 174, 'weight': 71},{'height': 180, 'weight': 75},{'height': 181, 'weight': 72},{'height': 191, 'weight': 88},{'height': 175, 'weight': 71},{'height': 177, 'weight': 72},{'height': 181, 'weight': 66},{'height': 183, 'weight': 78},{'height': 186, 'weight': 86},{'height': 181, 'weight': 74},{'height': 180, 'weight': 72},{'height': 185, 'weight': 80},{'height': 180, 'weight': 76},{'height': 186, 'weight': 74},{'height': 174, 'weight': 76},{'height': 176, 'weight': 70},{'height': 175, 'weight': 70},{'height': 188, 'weight': 77},{'height': 177, 'weight': 78},{'height': 170, 'weight': 73},{'height': 201, 'weight': 95},{'height': 170, 'weight': 68},{'height': 174, 'weight': 70},{'height': 184, 'weight': 65},{'height': 184, 'weight': 84},{'height': 178, 'weight': 78},{'height': 187, 'weight': 81},{'height': 191, 'weight': 86},{'height': 181, 'weight': 75},{'height': 192, 'weight': 88},{'height': 180, 'weight': 72},{'height': 175, 'weight': 70},{'height': 178, 'weight': 75},{'height': 191, 'weight': 79},{'height': 190, 'weight': 87},{'height': 175, 'weight': 66},{'height': 191, 'weight': 86},{'height': 177, 'weight': 75},{'height': 179, 'weight': 75},{'height': 186, 'weight': 81},{'height': 177, 'weight': 73},{'height': 173, 'weight': 78},{'height': 176, 'weight': 67},{'height': 184, 'weight': 85},{'height': 190, 'weight': 88},{'height': 176, 'weight': 72},{'height': 169, 'weight': 72},{'height': 172, 'weight': 73},{'height': 185, 'weight': 91},{'height': 186, 'weight': 75},{'height': 182, 'weight': 73},{'height': 190, 'weight': 82}];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.info(axisData);// console.log(data)var myCharts = echarts.init(document.querySelector(".sandian"));var option={// 区域缩放dataZoom:[{// 滑块拖动type:'slider',// 鼠标滚轮// type:'inside',// 指明设置的作用轴，一半写 0xAxisIndex:0,},{type:'slider',yAxisIndex:0,// 起始和结束位置的百分比start:0,end:80,}],// grid 是用来控制直角坐标系的布局和大小grid:{show:true,borderWidth: 10,borderColor: '#ecc4ff',left:30,top:30,// width: 300,// height: 150,},xAxis:{type:'value',// 脱离0值比例scale:true,// position:'top',},yAxis:{type:'value',scale:true,},series:[{// type:'scatter',// 涟漪动画效果type:'effectScatter',// 涟漪大小rippleEffect:{scale:3},// 鼠标移上去触发涟漪动画showEffectOn:'emphasis',data:axisData,// 散点大小// symbolSize:20,symbolSize:function(arg){// 回调函数 查看信息// console.info(arg);var height = arg[0]/100;var weight = arg[1];var bmi = weight / (height * height)if(bmi>26) {return 20;};return 9;},// 散点颜色itemStyle:{// color:'#ff55ff',color:function(arg){// console.info(arg);var height = arg.data[0]/100;var weight = arg.data[1];var bmi = weight / (height * height)if(bmi>26) {return '#ffaa7f'}return '#00aaff'},}},],};// 使用刚指定的配置项和数据显示图表。myCharts.setOption(option);</script>
</body>
</html>

四、饼图

饼图实现效果展示

饼图所有代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>饼图的基本实现</title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.bing{width: 600px;height: 400px;}</style></head><body><div class="bing"></div><script type="text/javascript">var mCharts = echarts.init(document.querySelector(".bing"));// pieData 就是需要配置给饼图的数据，数组中包含一个又一个的对象，每一个对象中需要有 name 和 valuevar pieData = [{name:'淘宝',value:11231},{name:'京东',value:22673},{name:'唯品会',value:6123},{name:'拼夕夕',value:8989},{name:'聚美优品',value:6700},];var option = {series:[{type:'pie',data:pieData,// 数值显示label:{ show:true,formatter: function(arg){// console.info(arg);return arg.name+'平台花费'+arg.value+'元\n占比'+arg.percent+'%';},},// radius:180, 饼图的半径设置// 百分比设置，参照宽高中较小的那部分的一般，来进行百分比设置// radius: '60%',// 圆环设置，第0个元素代表内圆半径，第一个元素代表外圆半径// radius:['50%','80%'],// 南丁格尔图 半径是不一样，数值越大，半径越大roseType:'radius',// 选中效果，选中区域，偏离原点一段距离// selectedMode:'single',selectedMode:'multiple',//  偏离距离 像素点selectedOffset:'50',}]};// 将配置项设置给echarts对象mCharts.setOption(option);</script></body>
</html>

五、地图

地图实现效果展示

地图所有代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>地图常见效果_显示空气质量</title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.map{width: 800px;height: 500px;border: 2px solid #ff5500;/* background-color: #efefef; */}</style></head><body><div class="map"></div><script type="text/javascript">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 scatterData = [{value:[117,31]}];var mCharts = echarts.init(document.querySelector(".map"));// 此处是通过使用Ajax获取地图数据$.get('json/map/china.json',function(ret){// ret 就是中国各个省份的矢量地图数据console.info(ret);echarts.registerMap('chinaMap',ret);var option = {// 配置 geo 的 type:'map'geo:{type:'map',map:'chinaMap',// 'chinaMap' 需要和 registerMap 中第一个参数保持一致// 设置允许缩放和拖动的效果roam:true,// 名称显示label:{show:true,},},series:[{data:airData,// 将 series 下的数据和 geo 关联起来geoIndex:0,type:'map',},{data:scatterData,type:'effectScatter',// 指明散点使用的系统coordinateSystem:'geo',// 涟漪动画效果 缩放比例rippleEffect:{scale:10,},}],// 结合 visualMapvisualMap:{min:0,max:300,// 控制颜色渐变范围inRange:{color:['#fff','#ff0004'],},// 出现滑块calculable:true,},};mCharts.setOption(option);});</script></body>
</html>

六、雷达图

效果图展示

所有代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>雷达图的实现</title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.map{width: 600px;height: 400px;border: 2px solid #ff5500;}</style></head><body><div class="map"></div><script type="text/javascript">var mCharts = echarts.init(document.querySelector(".map"));// 设置各个维度的最大值var dataMax = [{name: '易用性',max: 100},{name: '功能',max: 100},{name: '拍照',max: 100},{name: '跑分',max: 100},{name: '续航',max: 100},];var option = {// 配置各个维度的最大值radar:{indicator:dataMax,// 配置雷达图最外层的图形 circle 是圆形 默认为 polygon 多边形shape:'polygon',},series:[{// 'radar'此图是雷达图type:'radar',// label:{//   show:true,// },areaStyle:{},data:[{name:'华为',value:[80,90,60,82,90]},{name:'中兴',value:[70,82,75,70,78]},{name:'小米',value:[88,79,85,78,85]},],}],};// 将配置项设置给echarts对象mCharts.setOption(option);</script></body>
</html>

七、仪表盘

效果图展示

所有代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>仪表盘的实现</title><script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.map{width: 600px;height: 400px;border: 2px solid #ff5500;}</style></head><body><div class="map"></div><script type="text/javascript">var mCharts = echarts.init(document.querySelector(".map"));var option = {series:[{type:'gauge',data:[// 每一个对象代表一个指针{value:70,itemStyle:{color:'#ff5500'},},{value:150,itemStyle:{color:'#55aa00'},},],// 数值范围min:0,max:200,},],};// 将配置项设置给echarts对象mCharts.setOption(option);</script></body>
</html>

部分关键字代码