Echarts的使用
引入
echarts.js文件
准备一个呈现图标的盒子
初始化echarts实例对象
准备配置项
将配置项设置给echarts实例对象
<body>
<div style="width:'';height:''"></div>
</body>
//首先准备echarts的实例对象,通过echarts中init的方法来创建实例对象
var mCharts = echarts.init(document.quertSelector('div'))
//准备配置项
var option={
//通用配置项
//xAxis x轴的配置
xAxis:{
type:'category', //category类目轴也就是分类的那一轴，写在yAxis中就是侧边的
data:[//数据名称]
},
yAxis:{
type:"value" //不用加data数值轴，他会自动在series找到对应的data值
},
//数据配置项
series:[
{
name:"",
type:'pie',//pie饼图 line折线图 bar柱状图...
data:[//数据]
}
]
}
//最后一步通过setOption方法，将(option)配置项设置给echarts实例对象
mCharts.setOption(option)
除了配置项发生改变外其余代码都是固定不变的
公共配置项
下面都是直接写在option中 下面只是例举出常用的属性完整的看文档
-
title：{}//主标题文本可以通过\n换行
1.text主标题内容 (string类型) eg:‘成绩’
2.link主标题的超链接(string类型) eg:‘https://www.baidu.com’
3.textStyle:{}主标题的字体设置(obj类型)里面可以配置颜色等等具体看文档
4.borderWidth:5边框大小默认是灰色
5.borderColor:'pink'设置边框颜色
6.borderRadius:5边框圆角
7.left ,top ,right ,bottom标题位置 left:50 -
tooltip :{}提示框组件，用于配置鼠标滑过或点击图表时的显示框
1.trigger触发类型(str类型)
item必须在内容才能触发
axis只要在轴上就能触发
2.triggerOn触发时机
mouseover默认值鼠标经过显示
click点击才有提示框
3.formatter格式化后面可以接stringFunction详情abcd代表的内容查看文档
模板字符串的写法
‘{b}的成绩是{c}‘
回调函数的写法
formatter:function(arg){
return arg[0].name + '的分数数：'+arg[0].data //呈现的内容return出来
toolbox:{feature:{//开启内置功能}}内置的功能
1.saveAsImage:{}什么都不用就可以使用导出图片的功能
2.dataView:{}什么都不用写就可以使用数据视图公共也就是转换成表格的样式，并且还可以修改其中的数据，如果要恢复原样就要配合下面的功能
3.restore:{}还原的功能
4.dataZoom:{}区域缩放
5.magicType:{type:['bar','line']}图表切换legend:{}图例用于筛选，需要和series配合使用之前
series我们只存放了一个数组，里面可以存放多个数组，当存在多个数组时
legend:{
data:['name1','name2']//name值必须与series中的name值相对应
}
直角坐标系中的常用配置（柱状图，折线图，散点图）
1.网格（grid）
grid:{}
show:true, 边框是否显示
borderWidth:10 边框大小
borderColor:‘red’ 边框颜色
left:120 可以设置图表的位置
width:300 可以设置图表大小
2.坐标轴（axis）
一个grid中最多有两种位置的x轴和y轴
坐标轴类型（type）
value:数值轴，自动从目标数据中读取数据
category:类目轴，该类型必须通过data设置类目数据
显示位置（position）
默认是底部可以设置top
区域缩放（dataZoom）
这个dataZoom跟上方的有区别这个直接写在配置项（option）下面， 注意这个 dataZoom 是一个 数组 形式存在的
dataZoom:[
{
type:'slider' //提供一个滑块可以左右滑动来进行数据筛选，说白了就是把想看到的数据放大，还有一个属性值`inside`这个是可以直接通过鼠标滚轮进行筛选，内置，下面不会出现滑块
xAxisIndex:0,//指明产生的作用轴，如果想要在y轴添加一个只需在添加一个对象`yAxisIndex`,0代表第几个x轴一般我们只需指明第一个
},{
type:'slider' //提供一个滑块可以左右滑动来进行数据筛选，说白了就是把想看到的数据放大，还有一个属性值`inside`这个是可以直接通过鼠标滚轮进行筛选，内置，下面不会出现滑块
yAxisIndex:0,
start:0, //起始百分比
end:100 //结束百分比
}
]
柱状图(bar)
...省略部分代码
//数据配置项
series:[
{
name:"语文",
type:'bar',//bar柱状图
data:[//数据],
markPoint:{
//最大值最小值配置
data:[
{
type:'max',name:'最大值'},
{
type:'min',name:'最小值'}
]
},
markLine:{
//平均值
data:[
{
type:'average',name:'平均值'}
]
},
label:{
//数值显示
show:true, //默认false true就是显示数值
rotate:60 //旋转角度
position:'inside' //默认值inside显示在内部 top显示在顶部
},
barWidth:'30%' //柱子显示的宽度
}
]
折线图(line)
...省略部分代码
//在xAxis类目轴中配置`boundaryGap：false`默认是false设置为true之后他是可以紧挨坐标轴
//在yAxis数值轴中配置`scale:true` 默认是false 他是可以脱离0轴的，也就是坐标原点不是从0开始
//数据配置项
series:[
{
name:"销量",
type:'line',//bar柱状图
data:[//数据],
markPoint:{
//最大值最小值配置
data:[
{
type:'max',name:'最大值'},
{
type:'min',name:'最小值'}
]
},
markLine:{
//平均值
data:[
{
type:'average',name:'平均值'}
]
},
markArea:{
data:[ //注意下面是一个一个数组,下面这种写法会自动生成两个区间的阴影
[{
xAxis:'1月'},
{
xAxis:'2月'}],
[{
xAxis:'8月'},
{
xAxis:'9月'}]
]
},
smooth：true, //默认是false 设置折现的平滑度
lineStyle:{
color:"颜色",
type:'solid' //默认是solid dashed dotted
},
areaStyle:{
//填充风格 不给属性就是以线条颜色
color:'pink'
},
}
]
折线图之堆叠图，堆叠图他是不会有交叉点的
在series中配置stack:'all'stack后面的值可以随便给，注意每组数据都需要给stack才能显示出堆叠图
散点图(scatter)
**散点图的数据是二维数组**
例如[[22,150],[23,198]]
特别注意散点图的xy轴都是value数值
//xAxis x轴的配置
xAxis:{
type:'value',
scale:true
},
yAxis:{
type:"value"
scale:true
},
//数据配置项
series:[
{
type:'scatter',//散点图(scatter)
data:[//数据注意此时已是二维数组的数据],
}
]
散点图的常见效果
series:symbolSize设置每个散点图的散点大小
symbolSize:function(arg){
var height = arg[0]
var weight = arg[1] //简单来说就是可以通过计算来判断散点
return 50 //返回经过计算判断过后不同的散点不同的大小
}
itemStyle也是在series中设置，也是支持回调函数的
itemStyle:{
color:function(arg){
//特别注意此时的arg跟上方的不一样可以答应出来看一下然后选择符合条件的返回不同的颜色
}
}
散点图之涟漪动画效果
修改
type:'effectScatter'
showEffectOn:'emphasis'//涟漪动画的触发时机render渲染完成就触发默认值emphasis经过才触发
rippleEffect:{ scale:10 }//涟漪动画的范围大小
饼图（pie）
饼图需要准备的是对象形式的数组[{value:key},{value1,key1}]
注意饼图不需要配置xAxis跟yAxis直接配置series节点就行了
var option={
series:[
{
type:'pie',
data:数据,
label:{
//饼图文字的显示
show:true, //默认是显示文字
formatter:function(arg){
//决定文字显示的内容
return arg.name+'平台'+arg.value//返回想要显示的数据
}
},
radius:['20%','50'] //百分比设置圆环的半径取宽高小的那边,20%是内圆半径，50%是外圆半径，这样设置就是一个圆环，如果只有一个值的话就是圆
roseType:'radius' //南丁格尔图 半径取决于数据大小这个跟上面的radius不能同用
selectedMode:'single' //设置选中的效果，能够将选中的区域偏离原点一小段距离,`multiple`可以实现多选偏离因为前面那个属性值离开的时候他会自动还原
selectedOffset:30 //设置偏离的距离
}
]
}
地图(map)
百度地图API
需要申请百度地图的ak
矢量地图
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json',function(ret){
//使用ajax获取矢量地图数据
//ret就是中国的各个省份的矢量地图数据
echarts.registerMap("chinaMap",ret) //在ajax的回调函数中注册地图的矢量数据`chinaMaP`相当于别名
var option = {
geo:{
type:"map", //这个map相当于是图表类型
map:'chinaMap' //这个map相当于对象中的key
roam:true //设置允许拖放或者拖动的效果
label:{
show:true //展示名称
}
zoom:2 //初始化的缩放比例，默认是1
center:[87.6,43.79] //将中心点进行移动
}
}
mCharts.setOption(option);
})
在地图中添加空气质量显示
1.显示基本的中国地图
2.将空气质量的数据设置给series下的对象
3.将series下的数据和geo关联起来
4.配置visualMap
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json',function(ret){
//使用ajax获取矢量地图数据
//ret就是中国的各个省份的矢量地图数据
echarts.registerMap("chinaMap",ret) //在ajax的回调函数中注册地图的矢量数据`chinaMaP`相当于别名
var option = {
geo:{
type:"map", //这个map相当于是图表类型
map:'chinaMap' //这个map相当于对象中的key
roam:true //设置允许拖放或者拖动的效果
label:{
show:true //展示名称
}
zoom:2 //初始化的缩放比例，默认是1
center:[87.6,43.79] //将中心点进行移动
},
series:[
{
data:airData,//airData就是空气质量的数据，自己去查找，类型例如[{name:城市,value:空气质量}]
geoIndex:0 //将空气质量的数据和第0个geo关联在一起
type:"map"
}
],
visualMap:{
//设置不同的区域不同的样式
min:0,
max:300 //颜色变换范围
inRange:{
color:['white','red'] //控制颜色渐变的范围
},
calculable:true //可以对数据进行删选出现滑块的效果
}
}
mCharts.setOption(option);
})
地图与散点图结合
1.给series下增加新的对象
2.准备好散点数据，设置给新对象的data
3.配置新对象的type
type：effectScatter
4.让散点图使用地图坐标系统
coordinateSystem:‘geo’,
5.让涟漪的效果更佳明显
rippleEffect:{
scale：10
}
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/china.json',function(ret){
//使用ajax获取矢量地图数据
//ret就是中国的各个省份的矢量地图数据
echarts.registerMap("chinaMap",ret) //在ajax的回调函数中注册地图的矢量数据`chinaMaP`相当于别名
var option = {
geo:{
type:"map", //这个map相当于是图表类型
map:'chinaMap' //这个map相当于对象中的key
roam:true //设置允许拖放或者拖动的效果
label:{
show:true //展示名称
}
zoom:2 //初始化的缩放比例，默认是1
center:[87.6,43.79] //将中心点进行移动
},
series:[
{
data:airData,//airData就是空气质量的数据，自己去查找，类型例如[{name:城市,value:空气质量}]
geoIndex:0 //将空气质量的数据和第0个geo关联在一起
type:"map"
},{
type:'effectScatter',
data:scatterData//配置散点的坐标数据，散点数据自己去准备，里面代表的是你想要涟漪点的地理位置，格式[{value:[117,31]}]
coordinateSystem:'geo' //指明散点使用的坐标系统 ，geo的坐标系统
rippleEffect:{
scale:10 //设置涟漪动画的缩放比例
}
}
],
visualMap:{
//设置不同的区域不同的样式
min:0,
max:300 //颜色变换范围
inRange:{
color:['white','red'] //控制颜色渐变的范围
},
calculable:true //可以对数据进行删选出现滑块的效果
}
}
mCharts.setOption(option);
})