一、绘图五部曲
- 1、引入echarts.js文件
<script src="js/echarts.min.js"></script>
- 2、准备一个呈现图表的盒子
<div style="width: 600px;height: 400px;"></div>
- 3、初始化echarts实例对象
var mCharts = echarts.init(document.querySelector("div"))
- 4、准备配置项
var option = {
...
}
- 5、将配置项设置给echarts实例对象
mCharts.setOption(option)
二、柱状图
- bar：绘制柱状图
var option = {
xAxis:{
type:"category",
data:['小明','小红','小王']
},
yAxis:{
type:"value",
},
series:[
{
name:"语文",
type:"bar",
data:[70,92,87]
}
]
}
- 图例展示：
1、常见效果
标记：最大值 最小值 平均值
- markPoint：在series中设置显示最大值或最小值
//显示针形圆
markPoint:{
data:[
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
},
- markLine：在series中设置平均值线
//显示平均线
markLine:{
data:[
{
type:"average",
name:"平均值"
}
]
},
显示：数值显示 柱宽度 横向柱状图
- lable：在series中设置柱值
label:{
show:true,//是否显示数值
rotate:60,//数值是否旋转
position:'inside'//设置显示数值位置 top：顶部 bottom：底部
},
- barWidth：在series中设置柱宽度
barWidth:'30%'//设置柱宽度
- itemStyle：在series中设置柱样式
itemStyle:{
color:'red',
}
-
图例展示
-
横纵向柱状图
//横向柱状图
xAxis:{
type:"value",
},
yAxis:{
type:"category",
data:xDataArr
}
- 图例展示：
//纵向柱状图
xAxis:{
type:"category",
data:xDataArr
},
yAxis:{
type:"value",
},
2、通用配置
- title：设置标题
title:{
text:"成绩展示",//设置标题内容
//设置标题样式
textStyle:{
color:"red",//字体颜色
fontSize:28,//字体大小
fontWight:"bold"//字体宽度
},
//设置标题边框
borderWidth:5,//边框宽度
borderColor:'blue',//边框颜色
borderRadius:5,//棱角弧度
left:50,//距离页面左边距离
top:10//距离页面顶部距离
},
- tooltip：设置鼠标移动或点击显示内容
tooltip:{
// trigger:"item"
trigger:"axis",
triggerOn:"click",//默认值：mousemove
//自定义显示内容
// formatter:"{b}的成绩是{c}"
formatter:function(arg){
return arg[0].name+"的分数是："+arg[0].data
}
}
- toolbox：ECharts提供的工具栏
toolbox:{
feature:{
saveAsImage:{
},//导出图片的功能
dataView:{
},//数据视图
restore:{
},//重置
dataZoom:{
},//区域缩放
magicType:{
type:['bar','line']
}//动态图表类型的切换
}
}
-
legend：设置图例
***注意：***与series数组中的数据的name值一致
legend:{
data:["语文","数学"]
}
-
图例展示：
-
grid：在option中设置图标的大小,边框,位置
grid:{
show:true,//显示grid
//边框设置
borderWidth:10,
borderColor:"red",
//位置设置
left:120,
top:120,
//大小设置
width:100,
height:100
}
-
图例展示：
-
position：在xAxis和yAxis设置坐标轴位置
xAxis:{
type:"category",
data:xDataArr,
position:"top"//默认为bottom
},
yAxis:{
type:"value",
position:"right"//默认为left
}
- dataZoom：在option中设置区域缩放
dataZoom:[
{
type:"slider",//滑块
// type:"inside",//内置依靠鼠标滚轮滑动或者双指缩放
xAxisIndex:0//设置x轴缩放
},
{
yAxisIndex:0,//设置y轴缩放
start:0,//数据窗口初始百分比
end:80//数据窗口百分比
}
]
- 图例展示：
三、折线图
- line：绘制折线图
var option = {
xAxis:{
type:"category",
data:xDataArr,
},
yAxis:{
type:"value",
},
series:[
{
type:"line",
data:yDataArr,
stack:"all",
areaStyle:{
}
},
]
}
- 图例展示：
1、常见效果
标记：最大值 最小值 平均值 标注区间
扫描二维码关注公众号，回复：
13786604 查看本文章
- markPoint：在series中设置显示最大值或最小值
markPoint:{
data:[
{
type:"max",
name:"最大值"
},
{
type:"min",
name:"最小值"
}
]
}
- markLine：在series中设置平均值线
markLine:{
data:[
{
type:"average",
name:"平均值"
}
]
}
- markArea:在series中设置标注区间
markArea:{
data:[
[
{
xAxis:"1月",
},
{
xAxis:"2月"
}
],
[
{
xAxis:"7月",
},
{
xAxis:"8月"
}
]
]
}
线条控制：平滑 风格
- smooth：在series中设置平滑效果
smooth:true
- lineStyle：在series中设置线条样式
lineStyle:{
color:"green",
type:"dotted"//dashed 虚线 dotted 点线 solid实线
}
- areaStyle：在series中设置面积区域
areaStyle:{
color: 'pink'
}
- boundaryGap：在xAxis设置紧挨边缘
xAxis:{
type:"category",
data:xDataArr,
boundaryGap:false//紧挨边缘
}
-
图例展示：
-
scale：在yAxis设置缩放脱离0值比例
yAxis:{
type:"value",
scale:true
}
- stack：在series中设置堆叠图
series:[
{
type:"line",
data:yDataArr1,
stack:"all",//设置堆叠效果
areaStyle:{
}//设置阴影区域
},
{
type:"line",
data:yDataArr2,
stack:"all",//设置堆叠效果
areaStyle:{
}//设置阴影区域
}
]
- 图例展示：
四、散点图
- scatter：绘制散点图
xAxis:{
type:"value",
scale:true
},
yAxis:{
type:"value",
scale:true
},
series:[
{
type:"scatter",
data:axisData
}
]
- 图例展示：
1、常见效果
- symbolSize：在series中设置散点大小
symbolSize:function(arg){
// console.log(arg)
var height = arg[0]/100
var weight = arg[1]
//bmi = 体重/(身高*身高) 大于28代表肥胖
var bmi = weight/(height*height)
if(bmi>28)
{
return 20
}
return 5
},
- itemStyle：在series中设置散点颜色
itemStyle:{
color:function(arg){
// console.log(arg)
var height = arg.data[0]/100
var weight = arg.data[1]
//bmi = 体重/(身高*身高) 大于28代表肥胖
var bmi = weight/(height*height)
if(bmi>28)
{
return "red"
}
return "green"
}
}
- effectsSatter：在series中设置涟漪效果
type:"effectScatter",
showEffectOn:'emphasis',//render 自动渲染 emphasis 鼠标滑过
rippleEffect:{
scale:10//设置涟漪效果的缩放比例
},
- 图例展示：
五、饼图
- pie：绘制饼图
series:[
{
type:"pie",
data:pieData//数据格式：[{name:??,value:???},{}]
}
]
- 图例展示：
1、常见效果
- label：在series中设置饼图的半径以及圆环设置显示文字内容 常常与formatter一起使用以显示更多信息
label:{
show:true,//显示文字
formatter:function(arg){
//显示文字的格式化
// console.log(arg)
return arg.name+"平台"+arg.value+'元\n'+arg.percent+'%'
}
}
- radius：在series中设置饼图的半径以及圆环
// radius:20,//设置饼图的半径
// radius:20%//百分比参照的是宽度和高度中较小的那一部分的一半进行百分比设置
radius:['50%','75%']//第0个元素代表的是内圆的半径 第1个元素设置的是外圆的半径
- roseType：在series中设置南丁格尔图
roseType:'radius',//南丁格尔图 饼图的每一个区域的半径是不同的
- selectedMode：在series中设置选中效果
- selectedOffset：在series中设置选中偏离距离
// selectedMode:'single', //选中的效果，能够将选中的区域偏离圆点一小段距离 单个偏离效果
selectedMode:'multiple',//多个偏离效果
selectedOffset:30//设置选中偏离距离
- 图例展示：
六、地图
- geo：在option中配置 效果等同于series
var mCharts = echarts.init(document.querySelector('div'))
//使用Ajax获取矢量地图数据
$.get('json/map/china.json',function(ret){
//ret 就是中国的各个省份的矢量地图数据
// console.log(ret)
//在Ajax的回调函数中注册地图矢量数据
echarts.registerMap('chinaMap',ret)
var option = {
geo:{
type:'map',
map:'chinaMap'//chinaMap需要和registerMap中的第一个参数保持一致
}
}
mCharts.setOption(option)
})
1、常见配置
- roam：在geo中设置允许缩放以及拖动的效果
roam:true//设置允许缩放以及拖动的效果
- zoom：在geo中设置初始化缩放比例
zoom:1,//设置初始化的缩放比例
- center：在geo中设置地图中心点的坐标
center:[87.617733,43.792818]//设置地图中心点的坐标
- 图例展示：
2、常见效果
- 显示某一个区域
var mCharts = echarts.init(document.querySelector('div'))
$.get('json/map/anhui.json',function(ret){
//ret 为安徽各市的数据
// console.log(ret)
echarts.registerMap('anhui',ret)
var option = {
geo:{
type:'map',
map:'anhui',
zoom:1.2,
label:{
show:true,
},
center:[116.507676,31.752889]//这个坐标值，我们是可以通过地图矢量数据获取到的
}
}
mCharts.setOption(option)
})
-
图例显示
-
不同的城市显示不同的颜色
$.get('json/map/china.json',function(ret){
//ret 就是中国的各个省份的矢量地图数据
// console.log(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:{
min:0,
max:300,
inRange:{
color:['white','red']//控制颜色渐变的范围
},
calculable:true//出现滑块的效果
}
}
mCharts.setOption(option)
})
-
图例显示
-
在series中设置地图和散点图结合
{
data:scatterData,//配置散点的坐标数据
type:'effectScatter',
coordinateSystem:'geo',//指明散点使用的坐标系统 geo的坐标系统
rippleEffect:{
scale:10//设置涟漪效果的缩放比例
},
}
- 图例显示
七、雷达图
- radar：绘制雷达图
var option = {
radar:{
indicator:dataMax
},
series:[
{
type:'radar',//radar 此图标是一个雷达图
data:[
{
name:'华为手机1',
value:[80,90,80,82,90]
},
{
name:'中兴手机1',
value:[70,82,75,70,78]
}
]
}
]
}
1、常见配置
- label：在series中设置显示数值
label:{
//设置标签样式
show:true//显示数值
},
areaStyle:{
},//将每一个产品的雷达图形成阴影的面积
- shape：在radar中设置雷达图最外层的图形
shape:'circle'//配置雷达图最外层的图形 默认：polygon 圆形：circle
- 图例显示：
八、仪表盘
- gauge：绘制仪表盘
var option = {
series:[
{
type:'gauge',
data:[
{
value:97
}//每一个对象代表一个指针
]
}
]
}
1、常见效果
- max,min：在series中设置数值范围
min:50//min max 控制仪表盘数值范围
- 在data中设置多个指针
data:[
{
value:97,
itemStyle:{
//控制指针样式
color:'pink'//指针的颜色
}
},//每一个对象代表一个指针
{
value:85,
itemStyle:{
color:'green'
}
}
]
- 在data指针对象中设置多个指针的颜色差异
{
value:85,
itemStyle:{
color:'green'
}
}
- 图例显示：
九、图表回顾
- 常用图表
- 只限于直角坐标系的图标
- 通用配置
十、主题设置
- 内置主题设置
// init方法有两个参数,第一个参数代表是一个dom节点,第二个参数,代表你需要哪一个主题
// 默认内置了两套主题：light dark
var mCharts = echarts.init(document.querySelector("div"),'dark')
- 自定义主题设置
// 1、在线编辑主题 https://echarts.apache.org/zh/theme-builder.html
// 2、下载主题的js文件
// 3、在html中导入js文件
// 4、在init方法中指明主题的名称
// itcast为自定义主题文件名称
var mCharts = echarts.init(document.querySelector("div"),'itcast')
十一、ECharts高级
-
调色盘的使用原则是就近原则
-
主题调色盘
//在自定义主题的js文件中
echarts.registerTheme('itcast', {
"color": [
"#893448",
"#d95850",
"#eb8146",
"#ffb248",
"#f2d643",
"#ebdba4"
]
}
- 全局调色盘
//在option中设置
var option = {
color:['red','green','blue','skyblue','purple']
}
- 局部调色盘
//在series中设置
series:[
{
color:['pink','yellow','black','orange','red'],
type:"pie",
data:pieData//数据格式：[{name:??,value:???},{}]
}
]
- 线性渐变
//在series中进行设置
itemStyle:{
color:{
type:'linear', //线性渐变
x:0,
y:0,
x2:0,
y2:1,
colorStops:[
{
offset:0,color:'red'//0%处的颜色为红色
},
{
offset:0.5,color:'yellow'
},
{
offset:1,color:'blue'//100%处的颜色为蓝色
}
]
}
}
- 图例显示：
- 径向渐变
//在series中进行设置
itemStyle:{
color:{
type:'radial',//径向渐变
x:0.5,
y:0.5,
r:0.5,
colorStops:[
{
offset:0,color:'red'
},
{
offset:1,color:'blue'
}
]
}
}
-
图例显示：
-
直接样式
itemStyle:{
...
}
textStyle:{
...
}
lineStyle:{
...
}
areaStyle:{
...
}
label:{
...
}
- 高亮显示样式
//在series中进行设置
//在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
emphasis:{
itemStyle:{
//设置高亮显示
color:'yellow'
},
label:{
color:'green'
}
}
- 图表自适应
//1、监听窗口大小变化事件
//2、在事件处理函数中调用ECharts实例对象的resize即可
window.onresize = function(){
// 调用echarts实例对象的resize方法
mCharts.resize()
}
- 加载动画
//显示加载动画
//一般在获取到数据前进行设置
mCharts.showLoading()
//隐藏加载动画
//一般设置在获取到数据之后
mCharts.hideLoading()
- 增量动画
//添加修改按钮
<button id="modify">修改数据</button>
//setOption 可以设置多册
//新的option 和 旧的option
//新旧option的关系并不是互相覆盖的关系,是互相整合的关系
//在设置新的option的时候,只需要考虑到变化的部分就可以
var btnModify = document.querySelector("#modify")
btnModify.onclick = function(){
var newYDataArr = [68,32,99,77,94,80,72,86]
//setOption 可以设置多册
//新的option 和 旧的option
//新旧option的关系并不是互相覆盖的关系,是互相整合的关系
//在设置新的option的时候,只需要考虑到变化的部分就可以
var option = {
series:[
{
data:newYDataArr,
}
]
}
mCharts.setOption(option)
}
- 动画配置项
//在option中进行配置
animation:true,//控制动画是否开启
// animationDuration:7000,//设置动画时长 以毫秒为单位
animationDuration:function(arg){
console.log(arg)
return 2000*arg
},
animationEasing:"bounceOut",//缓动动画
animationThreshold:7,//动画元素的阈值
- 全局ECharts对象
1、init //创建echarts实例对象
2、registerTheme //注册主题
3、registerMap // 注册地图
- echartsInstance对象
//setOption：设施option
//resize：设置图标自适应
//on\off：绑定或者解绑事件处理函数
//鼠标事件
//'click','dbclick','mousemove','mouseup','mousedown'
//ECharts事件
//legendselectchanged,'datazoom','pieselectchanged','mapselectchange'
//dispatchAction：模拟用户行为方法
//clear：清空图表配置项
//dispose：销毁echarts实例对象
mCharts.on('click',function(arg){
console.log(arg)
})//对事件进行监听
mCharts.off('click') //解绑click的事件
mCharts.on('legendselectchanged',function(arg){
console.log(arg)
})
//通过绑定点击按钮事件进行触发操作
$('#btn1').click(function(){
// 模拟用户的行为
mCharts.dispatchAction({
type:'highlight',
seriesIndex:0, //系列的索引
dataIndex:1 //数据的索引
})
mCharts.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:2
})
})
$('#btn2').click(function(){
//清空图表的实例
mCharts.clear()
})
$('#btn3').click(function(){
//重新设置option
mCharts.setOption(option)
})
$('#btn4').click(function(){
//销毁实例对象mCharts
mCharts.dispose()
})
Instance对象
//setOption：设施option
//resize：设置图标自适应
//on\off：绑定或者解绑事件处理函数
//鼠标事件
//'click','dbclick','mousemove','mouseup','mousedown'
//ECharts事件
//legendselectchanged,'datazoom','pieselectchanged','mapselectchange'
//dispatchAction：模拟用户行为方法
//clear：清空图表配置项
//dispose：销毁echarts实例对象
mCharts.on('click',function(arg){
console.log(arg)
})//对事件进行监听
mCharts.off('click') //解绑click的事件
mCharts.on('legendselectchanged',function(arg){
console.log(arg)
})
//通过绑定点击按钮事件进行触发操作
$('#btn1').click(function(){
// 模拟用户的行为
mCharts.dispatchAction({
type:'highlight',
seriesIndex:0, //系列的索引
dataIndex:1 //数据的索引
})
mCharts.dispatchAction({
type:'showTip',
seriesIndex:0,
dataIndex:2
})
})
$('#btn2').click(function(){
//清空图表的实例
mCharts.clear()
})
$('#btn3').click(function(){
//重新设置option
mCharts.setOption(option)
})
$('#btn4').click(function(){
//销毁实例对象mCharts
mCharts.dispose()
})
这是博主在学习echarts时整理的学习笔记 希望可以帮助你们
以上博主只是展示了重要的知识点，没有放入完整代码，
如若需要源码请在博客下方进行评论