echarts数据化图表入门级教程(附10个案例)
01-Echarts-介绍
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
简单来说
作用:展示图表的(大数据可视化)百度,捐给Apache 免费开源竞品
heightChartsD3
Apache ECharts,一个基于 JavaScript 的开源可视化图表库 官网地址
02-使用
步骤1:下载并引入echarts.js文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/6bc9f6ecf61e47309034f0a5a7d4f58f.png)
步骤2:准备一个具备大小的DOM容器
![在这里插入图片描述](https://img-blog.csdnimg.cn/3e05a15abfbe4a5a95dd7b056c97c981.png)
步骤3:初始化echarts实例对象
![在这里插入图片描述](https://img-blog.csdnimg.cn/4e06dc53ba214f2bba6a0e7b8e278dda.png)
步骤4:指定配置项和数据(option)
![在这里插入图片描述](https://img-blog.csdnimg.cn/fc0e875ca4034a8cb9f402b1ecefa895.png)
步骤5:将配置项设置给echarts实例对象
![在这里插入图片描述](https://img-blog.csdnimg.cn/0e080f00567246fea9c88d27ad8a5e20.png)
03-Echarts-基础配置
![在这里插入图片描述](https://img-blog.csdnimg.cn/eeb77b92b1fb4cd0850f121564d73b32.png)
需要了解的主要配置:series xAxis yAxis grid tooltip title legend color
series
系列列表。每个系列通过 type 决定自己的图表类型大白话:图标数据,指定什么类型的图标,可以多个图表重叠。 xAxis:直角坐标系 grid 中的 x 轴
boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。 yAxis:直角坐标系 grid 中的 y 轴 grid:直角坐标系内绘图网格。 title:标题组件 tooltip:提示框组件 legend:图例组件 color:调色盘颜色列表 数据堆叠,同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
04-ECharts官网使用
记住网址所在 https://echarts.apache.org/zh/index.html入门示例(helloword)https://echarts.apache.org/handbook/zh/get-started/类的方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/c867da030a1d427da483f824f0bb4f8b.png)
实例的方法
![在这里插入图片描述](https://img-blog.csdnimg.cn/b462227281e843d0bd9e9e7577f11c99.png)
动作与事件
![在这里插入图片描述](https://img-blog.csdnimg.cn/fa1b1d3dec084873ba256e33fa6806fb.png)
选项配置option如何修改
![在这里插入图片描述](https://img-blog.csdnimg.cn/a5e2514b6d2244b9b8e5eead718fa1a8.png)
05-简单案例
demo1
运用知识点
里面涉及的单词document文档Option选项data数据type类型bar条(柱状条)chart图表set设置series系列(数据)Axis轴线xAxis水平轴线legend传奇(图例)tooltip 提示init初始化
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/b34f403ccd814df8a53c3242e75c3fdc.png)
代码
#container{
width: 800px;
height: 600px;
}
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 4.2 定义配置项
var option = {
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长"]},
// x轴线
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8]
}
]
}
// 4.3 更新配置
echart.setOption(option);
demo2
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/953877716f1440db8e4b9c854078b4aa.png)
代码
#container{
width: 800px;
height: 600px;
}
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 4.2 定义配置项
var option = {
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
// x轴线
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8]
},
{
// 数据名称
name:"玩游戏时长",
// 类型为柱状图
type:"line",
// 数据data
data:[2,4,1,5,6,8,5]
},
{
// 数据名称
name:"上课时长",
// 类型为柱状图
type:"line",
smooth:true,
// 数据data
data:[6,7,5,8,6,1,0],
areaStyle:"#f70"
},
{
name:"成绩",
// 饼形图
type:"pie",
// radius:80,
// 半径
radius:[80,50],
// 位移
left:-80,
top:-270,
// 数据
data:[
{name:"js",value:90},
{name:"html",value:85},
{name:"jq",value:90},
{name:"vue",value:50},
]
}
]
}
// 更新配置
echart.setOption(option);
demo3
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/9111dc579b114a3bb36476b4304e8c23.png)
代码
去 官网——主题构建工具 下载js的就行,然后引入
![在这里插入图片描述](https://img-blog.csdnimg.cn/6edde0b8b5654068a3c3feba140bb7d8.png)
#container{
width: 800px;
height: 600px;
}
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 主题,light,dark,自定义
// var echart = echarts.init(document.getElementById("container"),'purple-passion')
// 4.2 定义配置项
var option = {
// 调色盘
// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
// x轴线
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8],
color:["#ac4cff"]
},
{
// 数据名称
name:"玩游戏时长",
// 类型为柱状图
type:"line",
// 数据data
data:[2,4,1,5,6,8,5]
},
{
// 数据名称
name:"上课时长",
// 类型为柱状图
type:"line",
smooth:true,
// 数据data
data:[6,7,5,8,6,1,0],
},
{
name:"成绩",
// 饼形图
type:"pie",
// radius:80,
// 半径
radius:[80,50],
// 位移
left:-80,
top:-270,
// 数据
data:[
{name:"js",value:90},
{name:"html",value:85,itemStyle:{
color:"#ffaa00"
}},
{name:"jq",value:90,
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}
},
{name:"vue",value:50},
]
}
]
}
// 更新配置
echart.setOption(option);
demo4
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/52d20a4623d841aaa564a1eefdf62c1e.png)
代码
#container{
width: 800px;
height: 600px;
}
// 定义渐变
var linear = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2:1,
colorStops: [{
offset: 0, color: '#02bcff' // 0% 处的颜色
}, {
offset: 1, color: '#5555ff' // 100% 处的颜色
}],
global: false // 缺省为 false
}
//04 实例化echarts
// 4.1 创建一个实例
var echart = echarts.init(document.getElementById("container"))
// 主题,light,dark,自定义
// var echart = echarts.init(document.getElementById("container"),'purple-passion')
// 4.2 定义配置项
var option = {
// 调色盘
// color:["#55aaff","#aaff7f","#55007f","#ffff00"],
// 图表的标题
title:{
text:"我的第一个图表"
},
// 图表的提示
tooltip:{},
// 图例
legend:{data:["睡眠时长","玩游戏时长","上课时长"]},
// x轴线
xAxis:{data:["周一","周二","周三","周四","周五","周六","周日"]},
// y轴线
yAxis:{},
// 设置数据
series:[
{
// 数据名称
name:"睡眠时长",
// 类型为柱状图
type:"bar",
// 数据data
data:[8,10,4,5,9,4,8],
// color:["#ac4cff"]
itemStyle:{
color:linear,
borderRadius:[30,30,0,0]
}
},
{
// 数据名称
name:"玩游戏时长",
// 类型为柱状图
type:"line",
// 数据data
data:[2,4,1,5,6,8,5]
},
{
// 数据名称
name:"上课时长",
// 类型为柱状图
type:"line",
smooth:true,
// 数据data
data:[6,7,5,8,6,1,0],
// areaStyle:"#f70"
},
{
name:"成绩",
// 饼形图
type:"pie",
// radius:80,
// 半径
radius:[80,50],
// 位移
left:-80,
top:-270,
// 数据
data:[
{name:"js",value:90},
{name:"html",value:85,itemStyle:{
color:"#ffaa00"
}},
{name:"jq",value:90,
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}
},
{name:"vue",value:50},
]
}
]
}
// 4.3 更新配置
echart.setOption(option);
demo5
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/da651221ea884a8f96e5c998d48dc741.png)
代码
html>
#container{
width: 800px;
height: 600px;
}
var echart = echarts.init(document.getElementById("container"))
var option = {
title:{text:"堆叠-蓝蓝-红红"},
legend:{data:["蓝蓝","红红"]},
// tooltip提示 trigger触发器 axis轴线触发,item 当前项触发
tooltip:{trigger:"axis"},
yAxis:{data:["vue","js","html"]},
xAxis:{},
series:[
{name:"蓝蓝",type:"bar",data:[80,60,75],stack:true,
// stack堆叠,label 标签,position位置,inside内部,right右侧,formmater格式
// \n 代表换行,{a}系列名 "蓝蓝" {b}数值名 "vue" {c}数值 80
label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}},
{name:"红红",type:"bar",data:[95,80,35],stack:true,
label:{show:true,position:"insideRight",formatter:"{a}\n{c}分"}}
]
}
echart.setOption(option);
demo6
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/70f546bfcd4842d8ac1df75937f12651.png)
代码
#container {
width: 800px;
height: 600px;
}
var echart = echarts.init(document.getElementById("container"));
var option = {
title: { text: "堆叠-蓝蓝-红红" },
toolbox: {
// 显示工具箱
show: true,
feature: {
// 数据缩放
dataZoom: {
yAxisIndex: "none",
},
// 数据视图只读
dataView: { readOnly: false },
// 魔法类型
magicType: { type: ["line", "bar"] },
// 重置
restore: {},
// 保存图片
saveAsImage: {},
},
},
legend: { data: ["蓝蓝", "红红"] },
// tooltip提示 trigger触发器 axis轴线触发,item 当前项触发
tooltip: { trigger: "axis" },
yAxis: { data: ["vue", "js", "html"] },
xAxis: {},
series: [
{
name: "蓝蓝",
type: "bar",
data: [80, 60, 75],
stack: true,
// stack堆叠,label 标签,position位置,inside内部,right右侧,formmater格式
// \n 代表换行,{a}系列名 "蓝蓝" {b}数值名 "vue" {c}数值 80
label: {
show: true,
position: "insideRight",
formatter: "{a}\n{c}分",
},
},
{
name: "红红",
type: "bar",
data: [95, 80, 35],
stack: true,
label: {
show: true,
position: "insideRight",
formatter: "{a}\n{c}分",
},
},
],
};
echart.setOption(option);
demo7
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/666e6aaf9d684acca703297449110f91.png)
代码
#container{
width: 800px;
height: 600px;
}
var echart = echarts.init(document.getElementById("container"))
var option = {
title:{text:"网站访问来源"},
legend:{data:["其他","百度"]},
tooltip:{},
series:[
{type:"pie",radius:[200,110],data:[
{name:"百度",value:1200,label:{
show:true,
position:"center",
// {d}百分比 {big|内容} 使用样式
formatter:"{big|{d}}{small|%}\n{b}",
// 定义样式(富文本)
rich:{
big:{
color:"#f70",
fontSize:"48px",
fontWeight:900,
},
small:{
color:"#f70"
}
}
}},
{name:"其他",value:360,
// 样式灰色
itemStyle:{color:"#ccc"},
// 标签不显示
label:{show:false},
// 提示不显示
tooltip:{show:false}}
]}
]
}
echart.setOption(option);
demo8
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/1e32c66009374805b935a590bcba12b7.png)
代码
#container{
width: 1200px;
height: 600px;
}
console.log(data);
// sort排序,map映射,slice(-4)切割后四位
var trends = data.data.trends.sort((a,b)=>a.day-b.day);
var echart = echarts.init(document.getElementById("container"))
var option = {
title:{text:"新冠肺炎趋势"},
legend:{data:["累计确诊"]},
tooltip:{},
yAxis:{},
// slice(0,20),只显示前20条数据
xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
series:[{
name:"累计确诊",
type:"bar",
// data:[{name:"",value:""}]
data:trends.slice(0,20).map(item=>item.sure_cnt)
}]
}
// 每隔3秒执行一次move
var id = setInterval(move,3000);
function move(){
// 删除第一个
var first = trends.shift();
// 添加到最后
trends.push(first);
// 更新option
option.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));
option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);
// 更新 图
echart.setOption(option);
}
// 鼠标移入停止动画
echart.on("mouseover",function(){clearInterval(id)})
// 鼠标移出播放
echart.on("mouseout",function(){
id = setInterval(move,3000);
})
echart.setOption(option);
demo9
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/158af2b3b7e2486cab0c5e565daaa8ed.png)
代码
#container{
width: 1200px;
height: 600px;
}
console.log(data);
// sort排序,map映射,slice(-4)切割后四位
var trends = data.data.trends.sort((a,b)=>a.day-b.day);
var echart = echarts.init(document.getElementById("container"))
var option = {
title:{text:"新冠肺炎趋势"},
legend:{data:["累计确诊"]},
tooltip:{},
yAxis:{},
// slice(0,20),只显示前20条数据
xAxis:{data:trends.slice(0,20).map(item=>String(item.day).slice(-4))},
series:[{
name:"累计确诊",
type:"bar",
// data:[{name:"",value:""}]
data:trends.slice(0,20).map(item=>item.sure_cnt)
}],
// 每个执行延迟的时候(idx就是下标,随着下标的增大延迟会长)
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 200;
},
animationDuration:function(idx){
// 每小格动画的时候
return idx*200;
},
// 弹性的方式出现动画
animationEasing:"bounceInOut"
}
// 每隔3秒执行一次move
// var id = setInterval(move,3000);
function move(){
// 删除第一个
var first = trends.shift();
// 添加到最后
trends.push(first);
// 更新option
option.xAxis.data = trends.slice(0,20).map(item=>String(item.day).slice(-4));
option.series[0].data= trends.slice(0,20).map(item=>item.sure_cnt);
// 更新 图
echart.setOption(option);
}
// 鼠标移入停止动画
echart.on("mouseover",function(){clearInterval(id)})
// 鼠标移出播放
echart.on("mouseout",function(){
id = setInterval(move,3000);
})
echart.setOption(option);
demo10
实现效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/6c5d40fb0bcf4c95b12593679ec882b7.png)
代码
#container {
width: 1200px;
height: 600px;
}
console.log(data);
// sort排序,map映射,slice(-4)切割后四位
var trends = data.data.trends.sort((a, b) => a.day - b.day);
var echart = echarts.init(
document.getElementById("container"),
"dark"
);
var option = {
title: { text: "新冠肺炎趋势" },
legend: { data: ["累计确诊"] },
tooltip: {},
yAxis: {},
// slice(0,20),只显示前20条数据
xAxis: {
data: trends
.slice(0, 20)
.map((item) => String(item.day).slice(-4)),
},
series: [
{
name: "累计确诊",
type: "bar",
// data:[{name:"",value:""}]
data: trends.slice(0, 20).map((item) => item.sure_cnt),
},
],
// 每个执行延迟的时候(idx就是下标,随着下标的增大延迟会长)
animationDelay: function (idx) {
// 越往后的数据延迟越大
return idx * 100;
},
animationDuration: function (idx) {
// 每小格动画的时候
return idx * 100;
},
// 弹性的方式出现动画
animationEasing: "bounceInOut",
};
// 每隔3秒移动一个
// 显示提示的下标
var ind = 0;
var id = setInterval(play, 3000);
// 播放
function play() {
// 发送一个显示提示的动作
echart.dispatchAction({
type: "showTip",
// 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
seriesIndex: 0,
// 数据项的 index,如果不指定也可以通过 name 属性根据名称指定数据项
dataIndex: ind,
// 可选,数据项名称,在有 dataIndex 的时候忽略
position: "top",
});
// 让ind加1
ind++;
// 大于20就归0
if (ind >= 20) {
ind = 0;
}
}
echart.setOption(option);
|