echarts 知识总结(1)
发布时间
阅读量：
阅读量
echarts 知识总结
- 对echarts的定义
- 核心概念
- 图标的常用类型
- 颜色的修改
- 特别样式
- 数据的堆叠
- label 标签
- 多图表
- 工具箱
对echarts的定义
- javascrit的图表库
- 百度捐给apache基金会
- 比较符合中国人的制表习惯
- HeightCharts，D3为同行
核心概念
- instance 实例
- series 系列
- tooltip 提示
- legend 图裂
- xAxis X轴
- yAxis Y轴
- toolbox 工具箱
- dataZoom 缩放
- vitualMap 虚拟映射
图标的常用类型
bar 柱状
pie 饼形
radius:[“60%”,“40%”]
line 线性
areaStyle 面
smooth:true 平滑
颜色的修改
主题：自定义主题 light,dark 浅色与深色
自定义主题
color：调色盘
color系列调色盘
itemStyle normal默认 emphasis强调状态
特别样式
- 渐变
var linear={
type:'linear',
x:0,
y:0,
x2:0,
y2:1,
colorStops:[{
offset:0,
color:'#0bdcf3'
//0%处的颜色
},{
offset:1,color:'#0093dd'
//100%处的颜色
}],
global:false//缺省为false
}- 线的样式lineStyle
lineStyle:{
width:12,
cap:"round",
opacity:0.7,
}3.面的样式
areaStyle:{
color:linear2,
}数据的堆叠
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/echarts.min.js"></script>
<style>
#container{ width: 1200px; height: 800px;}
</style>
</head>
<body>
<div id="container"></div>
<script>
var echart = echarts.init(document.getElementById("container"),"dark")
var option={
title:{text:"堆叠图"},
legend:{data:["前端","UI","python"]},
tooltip:{
trigger:"axis"
},
xAxis:{},
yAxis:{data:["2019","2020","2021"]},
series:[
{name:"前端",type:"bar",data:[100,50,180],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
{name:"UI",type:"bar",data:[200,100,80],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
{name:"python",type:"bar",data:[180,150,80],stack:true,label:{show:true,position:"insideRight",formatter:"{a}{c}人"}},
]
};
echart.setOption(option);
</script>
</body>
</html>
label 标签
- show true 是否显示
2.formatter:"{a}{b}{c}"格式化
a代表数据名
b系列名
c数字
3.position：位置
inisideRigt内部右侧
top/left/right/bottom/inside
4.color:颜色
多图表
1.grid 网络布局
top/left/right/botton
height
width
2.xAxis,yAxis 轴线指定
gridIndex:0,
gridIndex:1
3.series 数据指定轴线
xAxisIndex:0
yAxisIndex:0
工具箱
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="js/echarts.min.js"></script>
<style>
#container{ width: 1200px; height: 800px;}
</style>
</head>
<body>
<div id="container"></div>
<script>
var echart = echarts.init(document.getElementById("container"),"dark")
var option={
title:{text:"工具箱"},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: { readOnly: false },
magicType: { type: ['line', 'bar'] },
restore: {},
saveAsImage: {}
}
},
legend:{data:"人数"},
tooltip:{},
xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
yAxis:{},
series:[
{name:"人数",type:"bar",data:[30,65,80,65,40],itemStyle:{color:mycolor,borderRadius:[100,100,0,0]}},
]
};
echart.setOption(option);
</script>
</body>
</html>
全部评论 (0)
还没有任何评论哟~