echarts的快速上手指南
前言
数据可视化已经成为了前端工程师必备的一项技能，数据可视化的工具有好多，今天我们来聊聊echarts。话不多少，我们先分析她的结构
文章目录
一、安装
npm install echarts --save
二、引入
1、js文件引入
<script src="echarts.js" charset="utf-8"></script>
2、CDN引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
三、使用
首先放置一个
div容器用于渲染
注意：需要先放置容器，才能对容器进行渲染，顺序不能搞混
<div class="view" style="width:800px;height=600px;"></div>
js中的内容结构，相关参数如下
// 1、初始化
let view = document.querySelector('.view');
let chart1 = echarts.init(view,'dark');
// 2、参数
let option={
// 配置图表的标题
title:{
text:"这里是标题"
},
// 鼠标炫富在图标折线时显示提示的内容
tooltip:{
trigger:"axis",
formatter:function(params){
console.log(params)
return '鼠标悬浮显示的内容'
},
axisPointer:{
// 是否开启动画
animation:false
}
},
// x轴，配置类型type和横轴数据data
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
splitLinne:{
// 是否展示网格线
show:false
},
// 设置坐标留白
boundaryGap:[0,'100%']
},
// y轴，配置类型type
yAxis: {
type: 'value'
},
// 配置数据series，是数组，可以配合多组集合
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
// 折线图line，柱状图bar
type: 'line'
},
{
data: [150, 230, 224, 218, 135, 147, 260],
// 折线图line，柱状图bar
type: 'bar'
}
]
};
// 3、设置参数，类似于挂载
chart1.setOption(option);
四、option结构如下
五、配置项
1、柱状图
使用方法：编写成函数
柱状图的大小设置如下：
title:{
text:"价格指数"
},
grid:{
x:25,
y:45,
x2:5,
y2:20,
borderWidth:1
},
....
参考源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>柱状图</title>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script>-->
<!-- <script type="text/javascript" src="js/echarts.min.js"></script>-->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body style="background:#000;">
<div id="bar" style="width:500px;height: 250px;"></div>
<script type="text/javascript">
var bar_data = [12,23,34,43,33,23,11,22,6]; //模拟数据
var chart = echarts.init(document.getElementById('bar'));
var option = {
tooltip : {
formatter: '{a}:{c}%'//a 是series中每条数据name值，c 是data数值
},
legend: {
orient: 'vertical', // 'horizontal'
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'],
textStyle: {
// 图列内容样式
color: '#fff', // 字体颜色
},
x: '70%',//图例位置，设置right发现图例和文字位置反了，设置一个数值就好了
y: 'center'//延Y轴居中
},
// 设置柱状图的位置及其大小
grid: {
left: '3%',
right: '30%',
top: '3%',
bottom:'3%',
containLabel: true
},
xAxis : [ //横坐标
{
type : 'category',
data : [''],
axisLine: {
lineStyle: {
color: "#fff",//横坐标线条颜色
}
}
}
],
yAxis : [ //纵坐标
{
type : 'value',
axisLabel: {
show:true,
formatter: '{value}%',//给Y轴数值添加百分号
},
axisLine: {
lineStyle: {
color: "#fff",//纵坐标线条颜色
}
}
}
],
color:['#0287f8','#269cff','#58b1fc','#2fb6f6','#03cdfa','#3ed9fc','#05f6f6','#47fefe','#7dfcfc','#a9ffff'],//柱状图的颜色
series : [
{
name:'直接访问'},
{
name:'邮件营销'},
{
name:'联盟广告'},
{
name:'视频广告'},
{
name:'搜索引擎'},
{
name:'百度'},
{
name:'谷歌'},
{
name:'必应'},
{
name:'其他'}
]
};
for(var i = 0; i< option.series.length; i++){
var style = {
//定义柱状图的样式
normal: {
label: {
show: true,
position: 'top', //柱子上方显示 数值
formatter: '{c}%' //数值加上'%'
}
}
};
option.series[i].type = 'bar'; //每条数据指定类型为'bar'
option.series[i].itemStyle = style; // series中每条数据都加的样式
option.series[i].data = [bar_data[i]]; //series 中 data赋值
};
chart.setOption(option);
</script>
</body>
</html>
2、饼状图
2.1、标题设置
title: {
text: '学生生源地来源分布图',
subtext: '模拟数据',
// x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {
number}（x坐标，单位px）
x: 'center',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {
number}（y坐标，单位px）
y: 'top',
// itemGap设置主副标题纵向间隔，单位px，默认为10，
itemGap: 30,
backgroundColor: '#EEE',
// 主标题文本样式设置
textStyle: {
fontSize: 26,
fontWeight: 'bolder',
color: '#000080'
},
// 副标题文本样式设置
subtextStyle: {
fontSize: 18,
color: '#8B2323'
}
},
2.2、图例设置
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'vertical',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {
number}（x坐标，单位px）
x: 'left',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {
number}（y坐标，单位px）
y: 'center',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
// 设置图例提示的文字样式
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 30,
backgroundColor: '#eee', // 设置整个图例区域背景颜色
data: ['北京','上海','广州','深圳','郑州']
},
2.3、值域设置
series: [
{
name: '生源地',
type: 'pie',
// radius: '50%', // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
radius: ['30%', '60%'], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
center: ['50%', '50%'], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
data: [
{
value:335, name:'北京'},
{
value:310, name:'上海'},
{
value:234, name:'广州'},
{
value:135, name:'深圳'},
{
value:148, name:'郑州'}
],
// itemStyle 设置饼状图扇形区域样式
itemStyle: {
// emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
// emphasis：设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 255，0.5)'
}
},
// 设置值域的那指向线
labelLine: {
normal: {
show: false // show设置线是否显示，默认为true，可选值：true ¦ false
}
},
// 设置值域的标签
label: {
normal: {
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{
b}
// {
a}指series.name {
b}指series.data的name
// {
c}指series.data的value {
d}%指这一部分占总数的百分比
formatter: '{c}',
// 背景颜色
backgroundColor: '#F6F8FC',
// 边框颜色
borderColor: '#8C8D8E',
// 边框宽度
borderWidth: 1,
// 边框弧度
borderRadius: 4,
// formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}：}{c} {per|{d}%} ',
// 设置formatter中的各个样式
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
}
}
}
],
radius: ‘50%’, 的时候：
radius: [‘30%’, ‘60%’], 的时候：
2.4、提示框设置
tooltip: {
// trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
trigger: 'item',
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 20, // 隐藏延迟，单位ms
backgroundColor: 'rgba(255,0,0,0.7)', // 提示框背景颜色
textStyle: {
fontSize: '16px',
color: '#000' // 设置文本颜色 默认#FFF
},
// formatter设置提示框显示内容
// {
a}指series.name {
b}指series.data的name
// {
c}指series.data的value {
d}%指这一部分占总数的百分比
formatter: '{a} <br/>{b} : {c}个 ({d}%)'
},
2.5、字体设置
- 图中
‘1’的文字大小调整在‘legend’对象下的‘textStyle’属性里
- 图中
‘2’的文字大小调整在‘tooltip’对象下的‘textStyle’属性里
- 图中
‘3’的文字大小调整在‘series’对象下的‘label’属性里
源码如下：
// 1、初始化
let view5 = document.querySelector('.view');
let chart5 = echarts.init(view5);
// 2、参数
let option5 = {
"title": {
"text": "",
"subtext": "",
"x": "center"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br\/>{b} : {c}%",
"textStyle": {
"fontSize": 18
}
},
"legend": {
"orient": "vertical",
"left": "left",
"data": ["", "使用场景", "活动", "适用人群", "品牌", "款式", "物流", "价格", "功能", "服务", "质量"],
"textStyle": {
"fontSize": 18
}
},
"toolbox": {
"feature": {
"dataView": {
"show": true,
"readOnly": false
},
"saveAsImage": {
"show": true
}
}
},
"series": [{
"name": "",
"type": "pie",
"radius": ["0%", "100%"],
"data": [{
"name": "使用场景",
"value": 0.23
}, {
"name": "活动",
"value": 0.44
}, {
"name": "适用人群",
"value": 0.83
}, {
"name": "品牌",
"value": 1.09
}, {
"name": "款式",
"value": 4.56
}, {
"name": "物流",
"value": 7.56
}, {
"name": "价格",
"value": 7.62
}, {
"name": "功能",
"value": 17.03
}, {
"name": "服务",
"value": 20.03
}, {
"name": "质量",
"value": 40.6
}],
"label": {
"normal": {
"show": true,
"textStyle": {
"fontSize": 18
}
},
"emphasis": {
"show": true
}
},
"lableLine": {
"normal": {
"show": true
},
"emphasis": {
"show": true
}
}
}]
};
// 3、设置参数
chart5.setOption(option5);
下一篇：百度地图飞线效果