如何使用
1、引入echarts.js文件
2、准备一个呈现图表的盒子
3、初始化echarts实例对象
4、准备配置项（重点、难点）决定图是什么形状的
参考官网文档https://echarts.apache.org/zh/index.html
xAxis：直角坐标系中的 x 轴
yAxis：直角坐标系中的 y 轴
// 设置x轴的相关配置
xAxis: {
type: 'category',
// 是否让我们的线条和坐标轴有缝隙
boundaryGap: false,
data: ['豆豆','皮皮','江江','花花','明明','敏敏']
},
// 设置y轴的相关配置
yAxis: {
type: 'value'
},
series：每个系列通过 type 决定自己的图表类型
series:[
{
name:'语文',
type:'bar',
data:[10,90,60,70,40,30]
}
]
5、将配置项设置给echarts实例对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速上手Echarts</title>
<!--1、引入echarts文件-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--2、准备一个呈现图表的盒子-->
<div align="center">
<div id="ech" style="width: 600px;height: 400px">
</div>
</div>
<script>
<!--3、初始化echarts实力对象-->
let myEcharts = echarts.init(document.getElementById("ech"));
let option = {
xAxis:{type:'category',
data:['豆豆','皮皮','江江','花花','明明','敏敏']},
yAxis:{
type: 'value'
},
series:[
{
name:'语文',
type:'bar',
data:[10,90,60,70,40,30]
}
]
}
<!--将配置项设置给echarts实例对象-->
myEcharts.setOption(option)
</script>
</body>
</html>
上面柱状图：
常见效果：
markPoint:可以标记最大值、最小值
markLine：可以标记平均值
markPoint:{
data:[
{
type:'max',name:'最大值'
},{
type: 'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
}
显示:数值显示、
label:{
show:true,//数值显示
position:'top',//数值显示在顶部
rotate:60,//（逆）旋转60
}
柱宽度显示、
barWidth:'30%',
横向柱状图显示
更改x轴和y轴的角色
通用配置
title：标题组件
文字样式：textStyle
title:{
text:"学生成绩",
textStyle:{
color:'red',
}
}
标题边框：
title:{
text:"学生成绩",
textStyle:{
color:'red',
},
borderColor:'red',
borderWidth:5,
borderRadius:9,
}
标题位置：
title:{
text:"学生成绩",
textStyle:{
color:'red',
},
borderColor:'red',
borderWidth:5,
borderRadius:9,
left:230,
top:3
}
tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框
1、触发类型：trigger
item、axis
tooltip:{
// trigger:'item',
trigger:'axis'
}
2、 触发时机
mouseover、click
tooltip:{
// trigger:'item',
trigger:'axis',
triggerOn:'click'
}
3、格式化：formatter
tooltip:{
// trigger:'item',
trigger:'axis',
triggerOn:'click',
//formatter:'自定义内容'
//formatter:'{b}的语文成绩为{c}'
formatter:function (arg) {
//console.log(arg)
return arg[0].name+"的语文成绩为"+arg[0].data
}
}
toolbox:工具按钮
legend:图例
折线图
与柱状图差不多
这里改为：
type:'line',
常见效果：
标记：最大值 最小者 平均值
标记区间：markArea
markArea:{
data:[
[
{
xAxis:'豆豆'
},
{
xAxis:'皮皮',
}
],
[
{xAxis: '明明'},{xAxis: '敏敏'},
]
]
},
线条控制：
smooth:平滑
lineStyle:风格：实现 虚线 点线
//平滑效果
smooth:true,
//线条样式
lineStyle:{
color: 'black',//颜色
// type:'dashed',//虚线
//type:'dotted',//电线
type:'solid'//实线
},
areaStyle:填充风格
//填充阴影面积
areaStyle:{
color:'green'
},
紧挨边缘：boundryGap
xAxis:{
type:'category',
data:['豆豆','皮皮','江江','花花','明明','敏敏'],
boundaryGap:false,
},
缩放:脱离0值比例，避免数据集中显示看似一条直线
yAxis:{
type: 'value',
scale:false,
},
堆叠图：
stack:'all'
散点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速上手Echarts</title>
<!--1、引入echarts文件-->
<script src="lib/echarts.min.js"></script>
</head>
<body>
<!--2、准备一个呈现图表的盒子-->
<div align="center">
<div id="ech" style="width: 600px;height: 400px">
</div>
</div>
<script>
let scatterMy = echarts.init(document.getElementById("ech"));
let dataX = [190,180,174,183,165,170,155,176,170,169];
let dataY = [100,50,75,80,90,55,45,34,67,86,89,90];
let doubleS = [];
// let d = [[190,100],[180,50],[174,75]];
// console.log(d);
for(let i=0;i<dataX.length;i++){
h = dataX[i];
w = dataY[i];
let newMy = [h,w];
doubleS.push(newMy)
}
console.log(doubleS);
let option = {
xAxis:{
type:'value',
scale:true,
},
yAxis:{
type:'value',
scale:true,
},
series:[
{
// type:'scatter',
//涟漪动画效果：
type:'effectScatter',
rippleEffect: {
scale:10,//控制涟漪大小
},
//鼠标移入涟漪起作用
showEffectOn:'emphasis',
data:doubleS,
//symbolSize:30,
symbolSize:function (arg) {
//console.log(arg[0]);
//console.log(arg[1]);
let height = arg[0]/100;
let width = arg[1];
if(width/(height*height)>28){
return 20;
}
return 5;
},
itemStyle:{
// color:'pink',
color:function (arg) {
//console.log(arg);//每个对象
let height = arg.data[0]/100;
let width = arg.data[1];
if(width/(height*height)>28){
return 'green';
}
return 'pink';
}
}
}
]
}
scatterMy.setOption(option);
</script>
</body>
</html>
实现步骤与开始柱状图差不多
注意x轴数据和y轴的数据：二维数组
数组：[xxx,xxx],[xxx,xxx],[xxx,xxx]…
图表类型：
在series下设置type:scatter
xAxis和yAxis的type都要设置为value
最后将坐标都设置为脱离0值比例，scale：true
常见效果：
气泡图效果：
散点的大小不同：
//symbolSize:30,
symbolSize:function (arg) {
//console.log(arg[0]);
//console.log(arg[1]);
let height = arg[0]/100;
let width = arg[1];
if(width/(height*height)>28){
return 20;
}
return 5;
散点的颜色不同：
itemStyle:{
// color:'pink',
color:function (arg) {
//console.log(arg);//每个对象
let height = arg.data[0]/100;
let width = arg.data[1];
if(width/(height*height)>28){
return 'green';
}
return 'pink';
}
}
涟漪动画效果：
// type:'scatter',
//涟漪动画效果：
type:'effectScatter',
rippleEffect: {
scale:10,//控制涟漪大小
},
//鼠标移入涟漪起作用
showEffectOn:'emphasis',
饼图
这里不再是x轴和y轴
其他一样 引入文件，dom容器 初始化对象 设置option
在series下设置type:pie
准备数据：数组中包含一个个name值和value值
[{name:xxx,value:xxxx},{}]
常用效果
显示数值：
label:{formatter}
label:{
show:true,
formatter:function (arg) {
console.log(arg);
return arg.data.name+"平台"+arg.data.value+"元\n"
+arg.percent+"%";
}
圆环：
//radius: '30%',//参照盒子高宽最小的那个一半进行计算200*0.3 = 60
//radius:60,
radius: ['50%','70%'],//第0个元素设置内圆环半径 第一个元素设置外圆环半径
南丁格尔图：
//南丁格尔图
roseType:'radius'//数值越大半径就大
选中效果：
//selectedMode:'single'//点击偏离
selectedMode:'multiple',
//偏移距离
selectedOffset:30
地图
地图图标的使用方式：
百度地图api
矢量地图：
基本操作常规
然后准备中国的矢量地图json文件
使用Ajax获取josn文件
$.get(“json/map/china.json”,function(chinajson){})
在回调函数中往echarts全局对象注册地图的json数据
echarts.registerMap(‘chinaMap’,chinajson);
在geo下摄者
type:’'map"
map:’'chinaMap"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>快速上手Echarts</title>
<!--1、引入echarts文件-->
<script src="lib/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
</head>
<body>
<!--2、准备一个呈现图表的盒子-->
<div align="center">
<div id="ech" style="width: 600px;height: 400px">
</div>
</div>
<script>
let myE = echarts.init(document.getElementById("ech"));
<!--3、使用ajax获取矢量地图数据-->
$.get("json/map/china.json",function (resp) {
//console.log(resp);
<!--4、注册地图矢量数据-->
echarts.registerMap('chinaMap',resp);
let option = {
<!--geo的配置-->
geo:{
type:'map',
map:'chinaMap'
}
}
myE.setOption(option);
})
</script>
</body>
</html>
常用配置：
拖动和缩放：roam:true,//缩放和移动
名称显示：label:{ show:true, },
初始化比例设置zoom:1,//初始化缩放比例
地图中心点：center:[87.617733,43.792818],//设置地图中心点的坐标（值是地区的经度纬度的值）
显示某个区域
只不过加载的数据不同 其他都一样
不同城市颜色不同
1、显示基本的中国地图
2、城市的空气质量数据设置给series
3、将series下的数据和geo关联起来
geoIndex:0、type:‘map’
series:[{
data:airData,
//将series和geo关联
geoIndex:0,//就关联了一项
type:'map'
}],
4、结合visualMap配合使用
max min inRange
visualMap:{
min:0,
max:300,
inRange:{
color:['white','red'],//控制颜色渐变范围
},
calculable: true,//出现滑块的效果
}
地图和散点图的结合
1、给series增加新对象
2、准备好散点数据，设置给新对象的data
3、配置新对象的type
type:effectScatter
4、让散点图使用坐标系统
5、让涟漪的效果更加明显
rippleEffect:{
scale:10,
}
series:[{
data:airData,
//将series和geo关联
geoIndex:0,//就关联了一项
type:'map'
},{
data:scatterData,
type: 'effectScatter',
//让散点图使用坐标系统
coordinateSystem:'geo',
rippleEffect:{
scale:10,
}
}],
地图的特点：
地图可以快速的从宏观角度快速看出不同地理位置上数据的差异
雷达图
常用效果：
各个维度自己定义
let dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
显示数值：
lable
区域面积：areaStyle
series:[
{
type:'radar',
data:[{name:'华为手机',value:[80,90,80,82,90]},{name:'小米手机',value: [70,82,75,70,78]}],
label:{
show:true,
},
areaStyle:{},//形成阴影面积
}
]
绘制类型shape
radar:{
indicator:dataMax,//定义各个维度的最大值
//shape:'polygon',//这是默认的
shape:'circle',//最外层是个圆
},
let option={
//通过rader属性配置
radar:{
indicator:dataMax,//定义各个维度的最大值
//shape:'polygon',//这是默认的
shape:'circle',//最外层是个圆
},
series:[
{
type:'radar',
data:[{name:'华为手机',value:[80,90,80,82,90]},{name:'小米手机',value: [70,82,75,70,78]}],
label:{
show:true,
},
areaStyle:{},//形成阴影面积
}
]
}
仪表盘
进度监控和数据范围的监测
type:’'gauge"
常用效果：
数值范围：
series:[{
type:'gauge',
data:dataMy,
max:120,
min:20,//仪表盘最大数和最小数
}]
多个指针：
增加data中数组元素
let dataMy = [{
value:99
},{
value: 78
}]
多个指针颜色差异
itemStyle
let dataMy = [{
value:99,
itemStyle:{
color:'pink'
}
},{
value: 78,
itemStyle: {
color: "green"
}
}]
扫一扫
1955
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
