ECharts实现数据可视化超详细基础入门教程
ECharts介绍
ECharts官网： echarts.apache.org/zh/index.ht... ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
博客文章中的所有代码素材下载: www.aliyundrive.com/s/JCX666AEB... 提取码:==3x7o==
使用ECharts五个步骤
1、引入ECharts.js文件 可以通过下载源代码：ECharts.js下载地址
html
复制代码
2、准备一个具备大小的DOM容器
html
复制代码
3、初始化echarts实例对象
javascript
复制代码
var mCharts = echarts.init(document.querySelector(".qwe"));
4、配置项
javascript
复制代码
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对象
javascript
复制代码
mCharts.setOption(option);
一、柱状图
柱状图实现效果展示
实现柱状图代码
html
复制代码
常见配置效果实现 1、title 标题
javascript
复制代码
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 显示图例
javascript
复制代码
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提供的工具栏
javascript
复制代码
toolbox:{
feature: {
// 下载导出图片
saveAsImage: {},
// 数据视图 还可以修改数据
dataView: {},
// 重置
restore: {},
// 区域缩放
dataZoom:{},
// 类型切换
magicType:{
type:['bar','line',]
},
}
},
4、legend:图例，用于筛选系列，需要和series配合使用
javascript
复制代码
legend:{
data:['语文','数学']
},
通用配置效果展示
所有效果代码
html
复制代码
二、折线图
折线图实现效果图 折线图实现完整代码
html
复制代码
折线图常见效果
最大值和最小值:markPoint 平均值:markLine
javascript
复制代码
markPoint:{
data:[
{
type:"max", name:"最大值",
},{
type:"min", name:"最小值",
}
]
},
markLine:{
data:[
{
type:'average', name:'平均值',
}
]
},
标注区间 markArea
javascript
复制代码
markArea:{
data:[
[
{xAxis:'2月'},
{xAxis:'4月'},
],
[
{xAxis:'7月'},
{xAxis:'8月'},
],
]
},
线条平滑 smooth
javascript
复制代码
smooth:true,
改变线条样式 lineStyle
javascript
复制代码
lineStyle:{
color:'#aa00ff',
// 线条样式 与css中边框border像是
type:'solid',
},
三、散点图
散点图实现效果展示 散点图所有代码
html
复制代码
四、饼图
饼图实现效果展示
饼图所有代码
html
复制代码
五、地图
地图实现效果展示
地图所有代码
html
复制代码
六、雷达图
效果图展示
所有代码
html
复制代码
七、仪表盘
效果图展示
所有代码
html
复制代码
部分关键字代码