一.echarts的通用配置
想要设置图表的在窗口的位置，必须设置图表盒子的位置,
也必须设置盒子的长度和宽度来容纳echart图像
1.title属性:
(1)文字样式textStyle
(2)标题边框:borderWidth,borderColor,borderRadius
(3)标题位置：left,top,right,bottom
var option = {
title:{
text:'成绩单',//定义图表标题
textStyle:{
color:'blue',
fontweight:700
},
top:20,
left:50
}
}2.tooltip框的配置:
(1)触发类型:trigger(可选值:item(必须在柱上),axis(在框内就行))
(2)触发时机:triggerOn(如：'click'表示点击才显示，还有mouseover)
(3)格式化：formatter定义显示的内容格式(两种类型：字符串模板和回调函数)
如：formatter:'{a}的成绩是{b}'。formatter:function(){return ...}
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function(param) {
return `${param.name}的成绩是${param.value}`
}
}
}3.toolbox:echarts提供的工具栏，内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具
(1)在feature:{saveAsImage:{}}导出图片
(2)在feature:{dataView:{}}//数据视图
(3)在feature:{restore:{}}重置
(4)在feature:{dataZoom:{}}区域缩放
(5)在feature:{magicType:{ type:['bar','line']}}实现图表类型的切换
var option = {
toolbox: {
feature: {
saveAsImage: {
name: '保存图片'
},
restore: {},
dataView: {},
dataZoom: {}
}
}
}4.legend:图例，用于筛选系列，需要配合series来使用。相关配置:
可以在series数组中配置多个类型数据来显示多个柱,legend中的data是一个数组，
legend中的data的值需要和series数组中的某组数据的name一致如：legend:['语文'，'数学'] -->
var option{
legend: {
type: 'plain'//图例比较少的时候使用
}
}二.直角坐标系的通用配置
直角坐标系的使用
使用EChart的步骤：
1.引入js文件，DOM容器，初始化配置对象，设置option
2.x轴和y轴数据：一般（柱状图和折线图为一维数组，散点图为二维数组）
3.设置图表类型，在series下设置type：
1.gird配置（图标大小位置和边框宽度颜色的配置）
var option = {
grid: { //图表大小和边框的设置
show: true, //显示上边框和右边框
borderWidth: 10, //设置边框的宽度
borderColor: 'red', //设置边框的宽度
left: 120, //向左移120个像素相对于窗口移动还有right
top: 120, //向上移动120个像素相对于窗口移动bottom
width: 300, //表示设置图标的宽度为300个像素
height:300//设置图表高度为300像素
},
}2.坐标轴axis
坐标轴分为x坐标轴和y坐标轴，一个grid中最多有两种位置的坐标轴，也即是y轴和x轴可以相互转换
1.坐标轴类型type：
value:数值轴，自动会从目标数据中读取数据（即series中）
yAxis: {
type: 'value'
},category:类目轴，该类型必须通过data来设置类目数据（及必须要data属性）
xAxis: {
type: 'category',
data: xData
},2.显示位置position(只改变刻度的显示位置并不会改变图形的变化
yAxis：可取值为top或者bottom
yAxis：可取值为left或者right
3.toolbox中的dataZoom（区域缩放）
1.配置1
var option = {
toolbox: {
feature: {
dataZoom: {}
}
},
}2.配置2-区域缩放dataZoom
dataZoom用于区域缩放，对数据范围过滤，x轴和y轴都可以拥有。
dataZoom是一个数组代表可以配置多个区域缩放器
类型type:
slider(滑块滑动设置区域）,inside:内置，依靠鼠标滚轮显示区域
指明产生作用的轴：
xAxisIndex：设置缩放组件控制的是哪一个x轴，一般写0即可（表示只有一个x轴）
yAxisIndex:设置缩放组件控制的是哪一个y轴，一般写0即可（表示只有一个y轴）
指明初始状态的缩放情况：
start:0表示从坐标轴起始位置算
end:50表示到坐标轴的百分之五十的位置
如：
var option = {
dataZoom:[
{
type:'slider',
xAxisIndex:0,
start:0,
end:50
},
{
type:'inside',
yAxisIndex:0,
start:0,
end:50
}
]
}三.柱形图
柱状图的特点：
1，基本的代码结构
2，x轴和y轴数据
3，series中的type设置为bar
常见效果：
1，最大值和最小值markPoint
2,平均值markLine
3,数据的显示label（show=true，）
4，柱的宽度barWidth
应用： 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图可以看出每个分类数据排名情况
var option = {
title: {
text: 'ECharts 入门示例'
},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
type: 'value',
axisLabel: {//显示刻度值
show: true
},
axisLine: { //竖线
show: true
},
axisTick: {
show: true //显示刻度
}
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
label: {
show: true,
rottate: 20,
position: 'inside'
},
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}
]
},
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
}
}]
};
mChart.setOption(option)四.折线图
折线图的特点：
1，基本的代码结构
2，x轴和y轴数据
3，series中的type设置为line
常见效果在series对象中配置：
1，最大值和最小值markPoint
2,平均值markLine
3,markArea标注区间
4紧挨边缘在xAxis中设置boundaryGap:false
5. 在yAxis设置scale: true表示y轴可以不重0开始
6在series中设置多个配置项再在配置项中设置stack:'all'代表累加效果，再设置areaStyle:{}可以看见累加的效果成为堆叠图
var option = {
title: {
text: '销量'
},
// legend: {
// data: ['销量']
// },
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月', '六月']
},
yAxis: {
type: 'value'
},
series: [{
name: '销量',
type: 'line',
data: yAxisArr,
markPoint: {
data: [{
name: '最大值',
type: 'max'
}, {
name: '最小值',
type: 'min'
}]
},
markLine: {
data: [{
type: 'average'
}]
},
markArea: { //指定区域显示阴影
data: [
[{
xAxis: '一月'
}, //开始值
{
xAxis: '二月'
} //结束值
],
[{
xAxis: '五月'
}, {
xAxis: '六月'
}]
]
},
smooth: true, //设置曲线平滑
lineStyle: {
color: 'skyblue',
type: 'dashed' //虚线
},
areaStyle: { //填充风格
color: 'pink'
}
}],
};
mChart.setOption(option)五.散点图
可以推断出变量间的相关性
1.准备x轴和y轴数据：二维数组
2.数组1：[[x数据1，y数据1],[x数据2，y数据2]]
3.图表类型;在series下设置type:scatter,xAxis和yAxis都要设置为value,且不配置data
// x轴和y轴的数据都是二维数组
// series下设置type:scatter
var axisData = [
[162, 45],
[175, 65],
[165, 67],
[180, 80],
[190, 100]
]
var mChart = echarts.init(document.querySelector('.main'))
var option = {
title: {
text: '散点图'
},
// legend: {
// data: ['销量']
// },
xAxis: {
type: 'value',
scale: true //不必从零开始
},
yAxis: {
type: 'value',
scale: true //不必从零开始
},
series: [{
type: 'effectScatter', //表示涟漪动画效果
rippleEffect: {
scale: 7 //表示涟漪动画效果的范围
},
showEffectOn: 'emphasis', //表示涟漪动画的触发时机，两个值：render表示图形加载完就展示，emphasis表示鼠标经过才触发
// type: 'scatter',
data: axisData,
// symbolSize:10//设置散点的大小
symbolSize: function(arg) {
// arg表示每个点的横纵坐标
var height = arg[0] / 100.0
var weight = arg[1]
return weight / (height * height)
},
// itemStyle:{//设置散点的样式
// color:'green'
// }或者下述方法
itemStyle: {
// 此时的arg为一个对象arg.data[0]和data[1]才为横纵坐标值
color: function(arg) {
if (arg.data[0] / arg.data[1] > 2) {
return 'red'
} else {
return 'green'
}
}
}
}]
};
mChart.setOption(option)六.饼图
实现步骤：
1.引入js文件，DOM容器，初始化对象，设置option
2.数据准备：数组包裹对象类型，其中对象包裹name和value属性
如：[{name:'淘宝',value:1231}],
3.series中的type设置为pie，没有横纵坐标轴
var pieData = [{
name: '淘宝',
value: 11231
}, {
name: '京东',
value: 23223
}, {
name: '唯品会',
value: 9879
}, {
name: '聚美优品',
value: 9867
}]
var mChart = echarts.init(document.querySelector('.main'))
var option = {
title: {
text: '饼图'
},
label: {
show: true, //显示文字
// formatter:'份额'//决定文字显示的内容
formatter: function(arg) {
console.log(arg)
return arg.name + '平台' + arg.value + "元\n" + arg.percent + '%'
}
},
series: {
type: 'pie',
data: pieData,
// radius表示饼图半径的设置
radius: 60, //表示饼图的半径为20像素
// radius: '45%',百分比是相对于盒子容器的高度和宽度中较小的那一部分的一半来进行百分比设置
// radius: ['20%','75%'],//第一个参数表示内圆的半径,第二个参数表示外圆的半径使用为圆环效果，一般默认内圆半径为0
// roseType:'radius',//南丁格尔图:表示饼图的每个区域半径都不同
selectedMode: 'single', //鼠标选中的效果，能够将选中的区域偏离圆点一小段距离,single表示单个分离,multiple表示选中多个
selectedOffset: 30, //表示选中模块之后偏离圆点的距离
center: ['50%', '50%']//表示图表圆心在盒子容器中的横纵坐标
}
};
mChart.setOption(option)开启一个本地服务器可以安装live-server插件,然后在目标页面右击打开本地服务open with live server，注意不要open in browser
七.地图
地图图表的使用方式：
1.百度地图
需要申请百度的access key即ak
2.矢量地图
需要准备矢量地图数据(json格式）
使用步骤：
1.echart最基本的结构，js文件，DOM容器,初始化对象，设置option
2.准备中国的矢量地图json文件，放到json/map/的目录下china.json
3.使用Ajax获取china.json
如：$.get('json/map/china.json',function(chinaJson){})
在回调函数中往echarts全局对象注册地图的json数据
echarts.registerMap('chinaMap',chinaJson);
在geo下设置
type:'map'
map:'chinaMap'
var mChart = echarts.init(document.querySelector('.main'))
$.get('json/map/china.json', function(param) {
console.log(param)
echarts.registerMap('chinaMap', param) //chinaMap类似于key,存储json的解析值，不固定
var option = {
geo: {
type: 'map',
map: 'chinaMap', //需要和上述注册名称保持一致
roam: true, //表示地图可以缩放和拖动的效果
label: {
show: true, //展示每个数组的名称
},
zoom: 1, //初始是否放大或者缩小
// center:[87,42]//表示设置地图那个点为中心
}
};
mChart.setOption(option)
})显示地图中的区域的详细区域:
1.加载该区域的矢量地图数据
2.通过registerMap注册到echarts全局对象中
3.指明geo配置下的type和map属性
4.通过zoom放大该区域
5.通过center定位该区域中心点
var mychart = echarts.init(document.querySelector('div'))
$.get('./json/map/province/guizhou.json', function(param) {
console.log(param)
echarts.registerMap('guizhou', param)
var option = {
geo: {
type: 'map',
map: 'guizhou',
roam: true,
label: {
show: true
}
}
}
mychart.setOption(option)
})各区域显示不同的效果：
1.显示地图
2.将空气质量中的数据设置给series下的对象
3.将series下的数据和geo关联起来
在series中将geoIndex:0,type:'map'
4.配置visualMap
和series平级，需要设置最大值最小值和范围
max,min,inRange
// 1.显示地图
// 2.将空气质量中的数据设置给series下的对象
// 3.将series下的数据和geo关联起来
// 4.配置visualMap
var airData = [{
name: '北京',
value: 39.92
}, {
name: '天津',
value: 39.13
}, {
name: '上海',
value: 31.22
}, {
name: '重庆',
value: 66
}, {
name: '河北',
value: 147
}, {
name: '河南',
value: 113
}, {
name: '云南',
value: 25.04
}, {
name: '辽宁',
value: 50
}, {
name: '黑龙江',
value: 114
}, {
name: '湖南',
value: 175
}, {
name: '安徽',
value: 117
}, {
name: '山东',
value: 92
}, {
name: '新疆',
value: 84
}, {
name: '江苏',
value: 67
}, {
name: '浙江',
value: 84
}, {
name: '江西',
value: 96
}, {
name: '湖北',
value: 273
}, {
name: '广西',
value: 59
}, {
name: '甘肃',
value: 99
}, {
name: '山西',
value: 39
}, {
name: '内蒙古',
value: 58
}, {
name: '陕西',
value: 61
}, {
name: '吉林',
value: 51
}, {
name: '福建',
value: 29
}, {
name: '贵州',
value: 71
}, {
name: '广东',
value: 38
}, {
name: '青海',
value: 57
}, {
name: '西藏',
value: 24
}, {
name: '四川',
value: 58
}, {
name: '宁夏',
value: 52
}, {
name: '海南',
value: 54
}, {
name: '台湾',
value: 88
}, {
name: '香港',
value: 66
}, {
name: '澳门',
value: 77
}, {
name: '南海诸岛',
value: 55
}]
var mychart = echarts.init(document.querySelector('div'))
$.get('./json/map/china.json', function(param) {
echarts.registerMap('chinaMap', param)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
},
series: {
data: airData,
geoIndex: 0,
type: 'map'
},
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red'] //控制颜色渐变的范围
},
calculable: true //出现范围筛选器
}
}
mychart.setOption(option)
})地图和散点图的结合：
1.series下添加新的对象{}
2.准备散点数据，配置给series下的另一个对象
3.配置series下的新对象type值为effectScatter
4.指明散点图坐标系统为即coordinateSystem:'geo'
5.调整涟漪动画效果rippleEffect:{scale:10}
var airData = [{
name: '北京',
value: 39.92
}, {
name: '天津',
value: 39.13
}, {
name: '上海',
value: 31.22
}, {
name: '重庆',
value: 66
}, {
name: '河北',
value: 147
}, {
name: '河南',
value: 113
}, {
name: '云南',
value: 25.04
}, {
name: '辽宁',
value: 50
}, {
name: '黑龙江',
value: 114
}, {
name: '湖南',
value: 175
}, {
name: '安徽',
value: 117
}, {
name: '山东',
value: 92
}, {
name: '新疆',
value: 84
}, {
name: '江苏',
value: 67
}, {
name: '浙江',
value: 84
}, {
name: '江西',
value: 96
}, {
name: '湖北',
value: 273
}, {
name: '广西',
value: 59
}, {
name: '甘肃',
value: 99
}, {
name: '山西',
value: 39
}, {
name: '内蒙古',
value: 58
}, {
name: '陕西',
value: 61
}, {
name: '吉林',
value: 51
}, {
name: '福建',
value: 29
}, {
name: '贵州',
value: 71
}, {
name: '广东',
value: 38
}, {
name: '青海',
value: 57
}, {
name: '西藏',
value: 24
}, {
name: '四川',
value: 58
}, {
name: '宁夏',
value: 52
}, {
name: '海南',
value: 54
}, {
name: '台湾',
value: 88
}, {
name: '香港',
value: 66
}, {
name: '澳门',
value: 77
}, {
name: '南海诸岛',
value: 55
}]
var mychart = echarts.init(document.querySelector('div'))
var scatterData = [{
value: [117.283042, 31.86119]
}]
$.get('../图表/json/map/china.json', function(param) {
console.log(param)
echarts.registerMap('chinaMap', param)
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
},
series: [{
data: airData,
geoIndex: 0,
type: 'map',
}, {
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10
}
}],
visualMap: {
min: 0,
max: 300,
inRange: {
color: ['white', 'red']
},
calculable: true
}
}
mychart.setOption(option)
})八.雷达图
使用步骤：
1.引入js容器，DOM容器，初始化对象，设置option
2.定义各个维度的最大值
在option中配置radar对象的indicator的数据：dataMax
data:[{name:'易用性‘，max:100},{name:'性能’，value:100}...]
3.准备产品的数据
如：data:[{name:'华为手机‘，value:[89,89,90,92..]}，{}...每个对象的value和上面data对应
4.seies中的对象type:'radar'
var mychart = echarts.init(document.querySelector('div'))
var dataMax = [{
name: '易用性',
max: 100
}, {
name: '功能',
max: 100
}, {
name: '拍照',
max: 100
}, {
name: '跑分',
max: 100
}, {
name: '续航',
max: 100
}]
var option = {
radar: {
indicator: dataMax, //指明雷达图各项指标的最大值
label: { //设置标签的样式
show: true, //显示数值
},
shape: 'circle', //配置雷达图的最外层展示，另外polygon是展示多边形
},
series: [{
type: 'radar',
areaStyle: {}, //显示雷达图的阴影面积
data: [{
name: '华为手机',
value: [89, 80, 67, 79, 89]
}, {
name: '中心手机',
value: [76, 86, 87, 76, 68]
}]
}]
}
mychart.setOption(option)九.仪表盘图
使用步骤：
1.引入js文件，DOM容器，初始化对象，设置option
2.准备数据:给series下的data数据设置为data:[{value;97}...]即可
3.在series下设置图表类型为type:gauge
var mychart = echarts.init(document.querySelector('div'))
var option = {
series: [{
type: 'gauge',
data: [{
value: 97
}]
}]
}
mychart.setOption(option)
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
