echarts是基于javascript的图表插件(canvas)百度开发捐赠给apache基金会开源
基本框架
<script src="./js/echarts.min.js"></script>
<div id="app">
//定义盒子大小
</div>
//初始化
var echart = echarts.init(document.getElementById('app'));
基础的选项
var option = {
title:{text:'小吴的睡眠时间'}, // 标题文本
legend:{data:['睡眠时长','作业耗时','成绩']}, // 图例
tooltip:{}, // 鼠标提示
yAxis:{}, // y轴线
xAxis:{data:['20日','21日','22日','23日','24日','25日','26日']},// x轴线
series:[ // 系列数据
{name:'睡眠时长',type:'bar',data:[8,5,4,7,3,12,14]}, // 数据
{name:'作业耗时',type:'line',data:[1,2,4,3,5,1,0],smooth:true},
{
name:'成绩',
type:'pie',
data:[
{name:'html',value:90},
{name:'js',value:80},
{name:'nodejs',value:60},
],
radius:[100,60], //半径
left:0, //左偏移
top:-200, //顶部偏移
}
]
}
//设置新选项
echart.setOption(option)
option 常用属性
属性名 | 属性含义 |
title | 标题 |
tooltip | 鼠标经过提示 |
xAxis | x轴线 |
yAxis | y轴线 |
series | 系统数据 |
样式:
主题
默认的主题有两种:light dark
也可以自己在官方网站中设置自定义样式
var echart = echarts.init(document.getElementById('app'),'light);
调色盘 color:["#f30"]
data:[15,{value:20,itemStyle:{}}]
itemStyle
itemStyle:{
normal:{color:'#12f8e9'}, //正常状态
emphasis:{color:'#00ffb3'}, // 强调状态
}
图案类型(type:" "):
bar 柱状图 line 折线图 pie 饼型图
stack 堆叠
var option = {
color:['#1cffce',' #2ef5ff'],
title:{text:'郑州人口留存'},
legend:{data:['新增','流失']},
yAxis:{data:['2019','2020','2021']},
xAxis:{},
tooltip:{},
series:[
{name:'新增',data:[30,50,10],type:'bar',stack:true,
label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
},
{name:'流失',data:[30,20,100],type:'bar',stack:true,
label:{show:true,position:'insideRight',formatter:'{a}:{c}'},
},
]
}
一图多表
var option = {
color:['#1cffce',' #2ef5ff'],
title:{text:'使用分布'},
legend:{data:['手机使用时长','编码时间']},
grid: [
{ left: '7%', top: '7%',width:'50%',height: '38%' },
{ left: '7%', bottom: '7%',width:'50%',height: '38%' },
],
yAxis:[
{gridIndex:0,min:0,max:10},
{gridIndex:1,min:0,max:10},
],
xAxis:[
{data:['周一','周二','周三','周四','周五','周六','周日',],
gridIndex:0
},
{data:['周一','周二','周三','周四','周五','周六','周日',],
gridIndex:1
},
],
tooltip:{
},
series:[
{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
xAxisIndex:0,
yAxisIndex:0,
type:'bar',
itemStyle:{
normal:{color:'#12f8e9'}, //正常状态
emphasis:{color:'#00ffb3'}, // 强调状态
}
},
{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
xAxisIndex:0,
yAxisIndex:0,
type:'bar',
itemStyle:{
normal:{color:'#00ffb3'}, //正常状态
emphasis:{color:'#12f8e9'}, // 强调状态
}
},
{name:'编码时间',data:[10,5,6,4,7,4,1],type:'bar',
xAxisIndex:1,
yAxisIndex:1,
type:'bar',
itemStyle:{
normal:{color:'#00ffb3'}, //正常状态
emphasis:{color:'#12f8e9'}, // 强调状态
}
},
{name:'手机使用时长',data:[3,2,4,3,2,5,10],type:'bar',
xAxisIndex:1,
yAxisIndex:1,
type:'bar',
itemStyle:{
normal:{color:'#12f8e9'}, //正常状态
emphasis:{color:'#00ffb3'}, // 强调状态
}
},
]
}
动态更新
var echart = echarts.init(document.getElementById('container'));
var list = data.data.feiyan.beijingTrends.sort((a,b)=>a.day-b.day);
var option = {
title:{text:'2020北京新冠肺炎趋势'},
legend:{data:['累计确诊']},
xAxis:{data:list.slice(0,10).map(item=>String(item.day).slice(-4))},
yAxis:{},
series:[
{name:'累计确诊',type:'bar',data:list.slice(0,10).map(item=>item.rest_sure_cnt)}
]
};
echart.setOption(option)
function auto(){
var first = list.shift();
list.push(first);
option.xAxis.data = list.slice(0,10).map(item=>String(item.day).slice(-4));
option.series[0].data = list.slice(0,10).map(item=>item.rest_sure_cnt);
echart.setOption(option);
}
var id = null;
id = setInterval(auto,1000);
var box = document.getElementById('container');
box.addEventListener('mouseover',function(){
clearInterval(id)
})
box.addEventListener('mouseout',function(){
id = setInterval(auto,1000);
})
事件: 事件监听 事件触发
echart.on(事件名,function(e){})
echart.off()
echart.dispatchAction({})
type:"showTip"
seriesIndex:系列下标
dataIndex:数据下标
地图
// 初始化
var echart = echarts.init(document.querySelector("#container"));
// 选项
var option = {
// 标题
title:{text:"中国地图"},
tooltip:{},
// 系统数据
series:[{
// 地图类型
type:"map",
// 数据
data:[
{name:"河南",value:"200",en:"henan"},
{name:"湖南",value:"180",en:"hunan"},
]
}]
};
function getMap(obj={en:"china"}){
// h5的内置api fetch 自学内容(ES6新增ajax内置方法)
fetch(`./js/map/json/province/${obj.en}.json`)
.then(res=>res.json())//把获取的数据转换为json res.text()转换为文本
.then(res=>{
// 注册地图
echarts.registerMap(obj.en,res);
// 设置地图的类型
option.series[0].mapType = obj.en;
// 更新选项
echart.setOption(option);
})
.catch(err=>console.error(err))
}
getMap();