前言
在前端工作中,加图表是一个非常常见的任务,今天分享的就是echarts的学习笔记。
一、echarts是什么?
一个基于 JavaScript 的开源可视化图表库
百度开发团队制作,开源交给apache基金管理
同类型产品:Highcharts、HighchartsD3
二、基础使用步骤
1.下载
当前学习中,是导入了官网下载的源文件,如需要可去官网下载👇
Apache ECharts 一个基于 JavaScript 的开源可视化图表库https://echarts.apache.org/zh/download.html
2.使用步骤
①、初始化
var echart = echarts.init(dom节点);
②、定义选项option
var option = {
title: {
text: "第一个表格"
},
color: ["#e01f54", "#001852", "#f5e8c8",],
legend: {
data: ["成绩"]
},
tooltip: {},
xAxis: {
data: ["3.1", "3.2", "3.3", "3.4", "3.5"]
},
yAxis: {},
series: [{
type: "bar",
data: [90, 80, 100, 60, 80],
name: "成绩"
}]
}
③、更新选项
echart.setOption(option);
三、属性详解
option 选项
title 标题
text:"标题文本"
color 调色盘
color: ["#e01f54", "#001852", "#f5e8c8", "#b8d2c7",],
legend 图例
{data:["name1","name2"]}
注意:与series中图的name保持一致
tooltip 提示
xAxis x轴线
{data:["x1","x2",...]}
yAxis y轴线
{data:["y1","y2",...]}
series 系列数据
[
{type: "bar",data: [...],name: "..."},
{type: "line",data: [...],name: "..."},
{type: "pie",data: [...],name: "..."},
]
type 类型
bar 柱状图
{
name:"名称",
type:"bar",
data:[10,{value:10}],
itemStyle:{color:xxx}//图的颜色
}
line 线
{
name:“名称”,
type:"line",
smooth:true, //平滑
areaStyle:{面的样式},
lineStyle:{线的样式}
}
pie 饼状图
{
name:"名称",
type:"pie",
radius:["10%","50%"],//内圈,外圈
data:[{name:"n1",value:40},{name:"n2",value:60}],
left:"距左侧距离",
top:"距顶部距离"
}
以上为常见的属性,更详细的配置信息请参考👇
echarts配置项手册https://echarts.apache.org/zh/option.html#title
四、特别设置
颜色样式控制
主题
light 亮 dark 暗
init(dom节点,"light"/"dark")
不写则为默认颜色
自定义主题
echarts 主题编辑器https://echarts.apache.org/zh/theme-builder.html官网配置好后,下载js 导入 引用
<script src="./js/shine.js"></script>
init(dom,"shine")
调色板
在option中,定义color数组
itemStyle
具体数据:在某个图的data中给某个数据设置
data: [90, 80, 100, {
value: 60,
itemStyle: {
color: "#2e4783"
}
}, 80],
系列数据:给某个图设置
写法1:设置默认颜色,选中颜色默认比设置的颜色亮一些
itemStyle: {
color: "#a4d8c2",
}
写法2:详细设置
itemStyle: {
normal: {//默认样式
color: "#a4d8c2"
},
emphasis: {//强调样式
color: "#d3758f"
}
}
线
lineStyle: {
width: 10,//10像素
cap: "round"//端点平滑
}
柱状图
itemStyle:{borderRadius:[100,100,100,100],}
//圆角,左上,右上 ,右下,左下
渐变颜色
渐变需要先定义渐变颜色,引用时直接引用定义的变量名
var mycolor = {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(80, 15, 205, 0.7)' // 0% 处的颜色
}, {
offset: .7,
color: 'rgba(29, 249, 231, 0.1)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
堆叠图
在series的数据中,添加stack: true属性,即可实现堆叠效果
{name:"ui",data:[],stack:true},
{name:"web",data:[],stack:true}
富文本
主要是label属性
eg:给“中国”big样式
label: {
show: true,
position: "center",
rich:{big:{fontSize:"24px"}}
formatter:"{big|中国}"
}
rich: 定义样式
formatter :字符串的模板
- {a} 系列名称
- {b} 名称
- {c} 值
- {d} 百分百
position:定位
- "center" 中间
- "insideRight" 内部右侧
五、地图
{name:"china",type:"map",mapType:"china",data:[{name:"",value:100}]}
getMap()
fetch(url)
.then(res=>res.json())
.then(res=>{
echarts.registerMap("china",res);
option.series[0].mapType("china");
echart.setOption(option);
})
重要↓
echarts.registerMap(name,res);