Echarts入门基础命令笔记----＞看这个就够了
柱状图: series中type设置为bar
从下往上
xAxis:{
type:'value',
data:[]
boundaryGap:false \\紧挨边缘->折线图
},
从左往右
yAxis:{
type:'value'
scale:true // 缩放:脱离0值比例->折线图
}
网格 - 控制布局和大小 grid
grid:{
show:true //显示
borderWidth:20 //边框
borderColor:'颜色' //边框颜色
weight:100,height:199,//大小
left:10,top:10,right:10,bottom:10 //位置
containLabel: true// 距离是包含坐标轴上的文字
}
坐标轴的位置
显示位置:position
xAxis:{
x轴只能 上 下
position:'top'或者'bottom'
}
yAxis:{
y轴只能设置 左 右
position:'left'或者'right'
}
区域缩放-->toolbox
toolbox:{
右上角出现一个框,点击一下,再划取想要的位置
feature:{
dataZoom:{}
}
}
区域缩放-->dataZoom
dataZoom:{
{
//slider:滑块 , inside:内置,依赖鼠标滚轮或者双指缩放
type:'slider',
xAxisIndex:0
},
//xAxisIndex:设置缩放组件控制的哪一个轴,一般写0即可
{
type:'slider,
yAxisIndex:0
start:0,//数据窗口范围的起始百分比
end::20,//数据窗口范围的结束百分比
}
}
最大值,最小值 ==>series下
markPoint :{
data:[
{
type:'max',name:'最大值'
},{
type:'min',name:'最小值'
}
]
}
显示平均值==>series下
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
开始到结束值,标记区域==>series下
markArea: { // 标记区域
data: [
[
{
xAxis: '1月'
},
{
xAxis: '2月'
}
],
[
{
xAxis: '7月'
},
{
xAxis: '8月'
}
]
]
},
显示数据信息等==>series下{}里
label:{
show:true,//显示分数
position:'top',//显示分数的位置
textStyle: { // 标题文字样式设置
color: 'white'
},
}
柱的宽度==>series下
barWidth:'30'
通用配置 标题:title 提示:tooltip,工具箱按钮:toolbox,图例:legend
-------------------------------------
title: { // 标题设置
text: '成绩展示', // 标题文字
textStyle: { // 标题文字样式设置
color: 'red'
},
borderWidth: 5, // 标题边框宽度
borderColor: 'blue', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 50, // 标题距离左边的距离
top: 10 // 标题距离顶部的距离
},
-------------------------------------
tooltip: { // 工具提示
// trigger: 'item' 工具提示的类型 item代表的是每个柱本身, axis代表的是坐标轴
trigger: 'axis',
triggerOn: 'click', // 触发时机, click代表点击, mouseOver代表鼠标移过
// formatter: '{b} 的成绩是 {c}'
formatter: function(arg){ // 文字格式化
return arg[0].name + '的分数是:' + arg[0].data
}
//坐标轴背景设置
axisPointer: {
type: 'line',
z: 0, // 层级
lineStyle: {
width: 66,
color: '#2D3443'
}
}
},
-------------------------------------
toolbox: { // 工具箱按钮
feature: {
saveAsImage: {}, // 导出图片
dataView: {}, // 数据视图
restore: {}, // 重置
dataZoom: {}, // 区域缩放
magicType: {
type: ['bar', 'line']
} // 动态图表类型的切换
}
},
------------------------------------
// 图例, 图例中的data数据来源于series中每个对象的name, 图例可以帮助我们对图表进行筛选
legend: {
data: ['语文', '数学']
},
折线图
平滑效果 smooth:true==>series下
线的样式设置==>series下
lineStyle: {
• color: 'green',
• type: 'solid' // dashed:虚线 dotted:电线 solid:默认实线
• }
填充风格==>series下
areaStyle:{
color:'red'
}
折线图多个线数据交错-堆叠图的设置-stack
series: [
{
type: 'line',
data: yDataArr,
stack: 'all', // 堆叠图的设置
areaStyle: {}
},
{
type: 'line',
data: yDataArr2,
stack: 'all', // 堆叠图的设置
areaStyle: {}
}
]
缩放:脱离0值比例->折线图:scale:true
yAxis:{
type:'value'
scale:true // 缩放:脱离0值比例->折线图
}
散点图
散点大小不同 symbolSize
支持回调函数
symbolSize: function (arg) {
arg:代表每一项
}
散点颜色不同 itemStyle.color
itemStyle的color支持回调函数
itemStyle:{
color:function(arg){
arg.data:代表每一项
return 'red'//颜色
}
}
散点图动画效果
将 type: 'scatter' 改成 type: 'effectScatter',
type: 'effectScatter',
showEffectOn:'emphasis', // 默认自动播放render,鼠标经过播放emphasis
rippleEffect:{
scale:10 //控制动画播放范围
},
饼图=>pie
饼图没有x轴跟y轴所以直接在series下type:'pie',name:数据即可
series: [
{
type: 'pie',
data: pieData
}
]
常见效果
series{
{
// 饼图文字的显示
label: {
show: true, // 显示文字
//formatter: 'hehe' // 决定文字显示的内容,也支持回调
formatter: function(arg){
console.log(arg)
return
}
},
// radius: 20 // 饼图的半径
// radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
// radius: ['50%', '55%'] // 第0个元素代表的是內圆的半径 第1个元素外圆的半径
roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
// selectedMode: 'single' // 选中的效果,能够将选中的区域偏离圆点一小段距离
selectedMode: 'multiple',
selectedOffset: 30 //设置选中的区域偏离圆点的距离
}
}
地图 =>map
显示中国地图
var mCharts = echarts.init(document.querySelector("div"))
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
console.log(ret)
echarts.registerMap('chinaMap', ret)
var option = {
mCharts.setOption(option)
})
geo: {
type: 'map',
map: 'chinaMap', // chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 设置允许缩放拖动的效果
label: {
show: true //名称显示
},
zoom: 1, // 设置初始化的缩放比例
center: [87.617733, 43.792818] // 设置地图中心点的坐标
}
不同城市颜色不同
1.显示基本的地图 2.城市的空气质量数据设置给series 3.将series下的数据和geo关联起来 geoindex:0,type:'map' 4.结合visualMap配合使用 min, max, inRange
var mCharts = echarts.init(document.querySelector("div"))//获取div盒子
$.get('json/map/china.json', function (ret) {
// ret 就是中国的各个省份的矢量地图数据
console.log(ret)
echarts.registerMap('chinaMap', ret)//1.设置地图
var option = {
geo: {
type: 'map',// 2.地图
map: 'chinaMap', // 3.chinaMap需要和registerMap中的第一个参数保持一致
roam: true, // 4.设置允许缩放以及拖动的效果
label: {
show: true // 5.展示标签
}
},
series: [
{
data: airData,//airData是需要绑定的数据
geoIndex: 0, // 6.将空气质量的数据和第0(索引)个geo配置关联在一起
type: 'map'//7.为地图进行服务
}
],
visualMap: {// 8
min: 0,
max: 300,
inRange: {// 9
color: ['white', 'red'] // 显示空气质量从白色慢慢变成红色
},
calculable: true //10 出现滑块
}
}
mCharts.setOption(option)
})
☯️地图结合散点图
1.给series下增加新的对象
series:{}
2.准备好散点图数据,设置给新对象的data
series:{
data: scatterData, // 配置散点的坐标数据
}
3.配置新的对象的type
series:{
data: scatterData,
type:effectScatter
}
4.让散点图使用地图坐标系统
series:{
data: scatterData,
type:effectScatter,
coordinateSystem:'geo'// 指明散点使用的坐标系统 geo的坐标系统
}
5.让涟漪的效果更佳明显
series:{
data: scatterData,
type:effectScatter,
coordinateSystem:'geo',
rippleEffect:{
Scale:10// 设置涟漪动画的缩放比例
}
}
雷达图=>radar
var option = {
radar:{
indicator:dataMax,//各个维度的最大值
shape:'circle' //配置李大图最外层的图形 circle 默认polygon
},
series:[
{
type:'radar',//radar 此图表是一个雷达图
label:{
show:true //显示出数值
},
areaStyle:{},//将每一个产品的雷达图形成阴影的面积
data:[
{
name:'华为手机1',
value:[80, 90, 80, 82, 90]
},
{
name:'中兴手机1',
value:[70, 82, 75, 70, 78]
}
]
}
]
}
⌚️仪表盘=>gauge
-
ECharts最基本的代码结构
var mCharts = echarts.init(document.querySelector("div")) var option = { } mCharts.setOption(option) -
准备数据, 设置给series下的data
series: [ { type: 'gauge', data: [ // { // value: 97, // itemStyle: { // 指针的样式 // color: 'pink' // 指针的颜色 // } // } // 每一个对象就代表一个指针 { value: 85, itemStyle: { color: 'red' } } ], min: 10 // min max 控制仪表盘数值范围 } ] -
将type的值设置为gauge
type: 'gauge',
颜色渐变
series: [
{
type: 'bar',
data: yDataArr,
itemStyle: {
barBorderRadius: [0, 33, 33, 0],//圆角设置
// color: {
// type: 'linear', // 线性渐变
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops:[
// {
// offset: 0, color: 'red' // 0%处的颜色为红色
// },
// {
// offset: 1, color: 'blue' // 100%处的颜色为蓝
// }
// ]
// }
color: {
type: 'radial', // 径向渐变
x1: 0.5,
y1: 0.5,
x2: 0.5,
y2: 0.5,
colorStops: [
{
offset: 0, color: 'red' // 0%处的颜色为红色
},
{
offset: 1, color: 'blue' // 100%处的颜色为蓝
}
]
}
}
}
]
}
自适应
1.监听窗口大小变化事件
2.在事件处理函数中调用ECharts实例对象的resize即可
// 监听window窗口大小变化的事件
window.onresize = function(){
// console.log('window.onresize...')
// 调用echarts实例对象的resize方法
mCharts.resize()
}
简写:
window.onresize = mCharts.resize
动画配置
var option = {
animation: true, // 控制动画是否开启
// animationDuration: 7000, // 动画的时长, 它是以毫秒为单位
animationDuration: function(arg){
console.log(arg)
return 2000 * arg
},
animationEasing: 'bounceOut', // 缓动动画
animationThreshold: 8, // 动画元素的阈值
}
全局Echarts对象
初始化方法init 注册主题 registerTheme 注册地图 registerMap 关联多个表图 connect
on/off方法
鼠标事件 常见事件:'click','dblcick','mousemove','mouseup'等 事件参数 arg:和事件相关的数据信息
Echarts 事件 常见事件:legendselectchanged,'datazoom','pieselectchanged','mapselectchanged'等 事件参数 arg:和事件相关的数据信息