Echarts.js使用简单案例
步骤1.引入echarts.js文件
步骤2.准备一个呈现图表的盒子
步骤3.初始化echarts实例对象
步骤4.准备配置项
步骤5.将配置项设置给echarts实例对象
1、柱状图
series:[
{
name:'语文',
type:'bar',
//标记点
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
//标记线
markLine:{
data:[{
type:'average',name:'平均值'
}]
},
//提示文本标签
label:{
show:true,
rotate:60,
position:'inside',
},
//柱状图的宽度
barWidth:'50%',
data:yDataArr
}
]
var option={
// 标题
title:{
text:'成绩展示',
textStyle:{
color:'red',
},
borderWidth:5,
borderColor:"green",
borderRadius:5,
left:50,
top:50
},
// 提示框
tooltip:{
//trigger:'item'
trigger:'axis',
triggerOn:'mousemove|click',
// formatter:'{b}的成绩是{c}'
formatter:function(arg){
// console.log(arg);
return arg[0].name+'的分数是：'+arg[0].data;
}
},
// 工具栏
toolbox:{
feature:{
saveAsImage:{},//导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType:{//动态图表类型切换
type:['bar','line']
}
}
},
// 筛选数据
legend:{
data:['语文','数学'],
//color:['red','pink'],
},
//x轴
xAxis:{
type:'category',
data:xDataArr
},
//y轴
yAxis:{
type:'value'
},
//图形配置
series:[
{
name:'语文',
type:'bar',
data:yDataArr1
},
{
name:'数学',
type:'bar',
data:yDataArr2
}
]
};
2、折线图
var option={
xAxis:{
type:'category',
data:xDataArr,
//紧挨坐标轴边缘
boundaryGap:false
},
yAxis:{
type:'value',
//脱离0值比例
scale:true
},
series:[
{
name:'康师傅',
type:'line',
data:yDataArr,
// 标记点
markPoint:{
data:[{
type:'max'
},{
type:'min'
}]
},
// 标记线
markLine:{
data:[{
type:'average'
}]
},
// 标记区域
markArea:{
data:[
[
{xAxis:'1月'},
{xAxis:'2月'}
],
[
{xAxis:'7月'},
{xAxis:'9月'}
]
]
},
//是否平滑曲线
smooth:true,
//折线图样式
lineStyle:{
color:'green',
type:'solid'//dashed|dotted|solid
},
//面积样式
areaStyle:{
color:"pink"
}
}
]
}
3、堆叠图
var option={
xAxis:{
type:'category',
data:xDataArr,
},
yAxis:{
type:'value',
},
series:[
{
name:'康师傅',
type:'line',
data:yDataArr1,
// 堆叠
stack:'a',
areaStyle:{}
},
{
name:'白象',
type:'line',
data:yDataArr2,
// 堆叠
stack:'a',
areaStyle:{}
}
]
}
4、散点图（涟漪动画）
var option={
xAxis:{
type:'value',
scale:true
},
yAxis:{
type:'value',
scale:true
},
series:[
{
name:'',
type:'scatter',//散点图
/*type:'effectScatter',//涟漪动画
showEffectOn:'emphasis',//点击出现涟漪
rippleEffect:{//涟漪大小
scale:10
}*/
data:axisData,
//设置散点大小
// symbolSize:30
symbolSize:function(arg){
var height=arg[0]/100
var weight=arg[1]
//BMI计算=体重kg/（身高m*身高m）>28肥胖
var bmi=weight/(height*height)
if(bmi>28){
return 20
}
return 5
},
//设置散点颜色
itemStyle:{
color:function(arg){
var height=arg.data[0]/100
var weight=arg.data[1]
var bmi=weight/(height*height)
if(bmi>28){
return 'red'
}
return 'green'
}
}
}
]
}
5、直角坐标系常用配置
var option={
dataZoom:[
{
type:'slider',//滑块缩放
// type:'inside',//鼠标滚轮或双指缩放
xAxisIndex:0
},
{
type:'slider',
// type:'inside',
yAxisIndex:0,
start:0,
}
],
toolbox:{
feature:{
dataZoom:{}
}
},
// 网格
grid:{
/* show:true,
borderWidth:1,
borderColor:'pink',
left:120,
top:120,
/* width:300,
height:150 */
},
//x轴
xAxis:{
type:'category',
data:xDataArr,
position:'top'
},
//y轴
yAxis:{
type:'value',
position:'right'
},
//图形配置
series:[
{
name:'语文',
type:'bar',
data:yDataArr1,
//标记点
markPoint:{
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
//标记线
markLine:{
data:[{
type:'average',name:'平均值'
}]
},
barWidth:'50%',
}
]
};
6、饼图(数据是由name和value组成的对象所形成的数组)
var option={
series:[
{
type:'pie',
data:xpieData,
label:{//饼图文字显示
show:true,//显示文字
formatter:function(arg){//自定义显示文字
return arg.name+'平台花了'+arg.value+'元\n'+arg.percent+'%'
}
},
//radius:200//饼图半径
//radius:'20%'//=（400/2*20%）百分比参照的是：（div宽度和高度中较小的一方的一半）来进行百分比计算
//radius:['50%','75%']//圆环（内圆半径和外圆半径）
roseType: 'radius',//南丁格尔图（饼图的每个区域的半径不同，数值越大半径越大）
selectedMode: 'multiple',//多个选中
selectedOffset:30,//偏移量
}
]
}
7、地图
（1）地图常用配置
//1. ECharts最基本的代码结构
//2. 准备中国地图的矢量数据
//3. 使用Ajax获取矢量地图数据
//4. 在Ajax的回调函数中注册地图矢量数据 echarts.registerMap('chinaMap', 矢量地图数据)
//5. 配置geo的type为'map', map为'chinaMap'
var eChart=echarts.init(document.querySelector('div'));
$.get('json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)
var option={
geo:{
type:'map',
map:'chinaMap',//chinaMap需要和registerMap的第一个参数保持一致
roam:true,//设置允许缩放和拖动
label:{
show:true//展示标签
},
zoom:1,//初始化缩放比例
center:[87.6,43.7],//设置地图中心点坐标
}
}
eChart.setOption(option)
})
（2）地图各个省份显示不同颜色
//1. 显示基本的中国地图
//2. 将空气质量的数据设置给series下的对象
//3. 将series下的数据和geo关联起来
//4. 配置visualMap
$.get('json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)
var option={
geo:{
type:'map',
map:'chinaMap',//chinaMap需要和registerMap的第一个参数保持一致
roam:true,
label:{
show:true
}
},
series:[
{
data:airData,
geoIndex:0,//将空气质量的数据和第一个geo配置关联在一起
type:'map'
}
],
visualMap: {
show: true,
min: 0,
max: 300,
inRange: {
color:['white','red']
},
//calculable:true
},
}
eChart.setOption(option)
})
（3）地图和散点图
min: 0,
max: 300,
inRange: {
color:[‘white’,‘red’]
},
//calculable:true
},
}
eChart.setOption(option)
})
（3）地图和散点图
[^持续更新.........................................................................................................................................]:
533
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
