Quick start guide for echarts
Preface
Data visualization has become a must-have skill for front-end engineers. There are many tools for data visualization. Let's talk about it todayecharts. Not much to say, let's analyze her structure first
Article directory
1. Installation
Official website: https://echarts.apache.org/examples/zh/index.html
npm install echarts --save
Second, the introduction
1. js file introduction
<script src="echarts.js" charset="utf-8"></script>
2. Introduction of 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>
3. Use
First place a
divcontainer for rendering
Note: The container needs to be placed first before the container can be rendered, and the order cannot be mixed up
<div class="view" style="width:800px;height=600px;"></div>
jsThe content structure in , the relevant parameters are as follows
// 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);
Fourth, the optionstructure is as follows
Configuration item manual: https://echarts.apache.org/en/option.html#title
Five, configuration items
Configuration item manual: https://echarts.apache.org/en/option.html#title
1. Histogram
How to use: write a function
The size of the histogram is set as follows:
title:{
text:"价格指数"
},
grid:{
x:25,
y:45,
x2:5,
y2:20,
borderWidth:1
},
....
The reference source code is as follows:
<!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. Pie chart
2.1. Title setting
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 settings
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. Value range setting
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%', when:
radius: ['30%', '60%'], when:
2.4, prompt box settings
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, font settings
‘1’The text size in the figure is adjusted in the properties‘legend’under the object‘textStyle’
‘2’The text size in the figure is adjusted in the properties‘tooltip’under the object‘textStyle’
‘3’The text size in the figure is adjusted in the properties‘series’under the object‘label’
The source code is as follows:
// 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);