ECharts:一个纯 Javascript 的图表库,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
官网:https://www.echartsjs.com/zh/index.html
Step1:CDN引用echarts:
有好几种方法安装引用,个人比较喜欢CDN:
完全版:echarts/dist/echarts.js,体积最大,包含所有的图表和组件,所包含内容参见:echarts/echarts.all.js。
常用版:echarts/dist/echarts.common.js,体积适中,包含常见的图表和组件,所包含内容参见:echarts/echarts.common.js。
精简版:echarts/dist/echarts.simple.js,体积较小,仅包含最常用的图表和组件,所包含内容参见:echarts/echarts.simple.js。
从https://www.jsdelivr.com/package/npm/echarts选择自己需要的版本,我选择的是完全版(echarts/dist/echarts.js),获取:
复制url
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.min.js"></script>
</head>
</html>
Step2:创建echatrs容器:
<div id="main" style="height:40em;"></div>
Step3:绘制图表
let myChart = echarts.init(document.getElementById('main'));
let option = ();
myChart.setOption(option);
其中的option可以从官网实例中下载,创建对应形状的图标,如折线图、柱状图…
https://www.echartsjs.com/examples/zh/index.html
将option代码复制到option中就ok啦!
其中的一些属性可在https://www.echartsjs.com/zh/option.html#title中查看,如:标题的蚊子类型、文字内容…
最后附上一个实例 option为:
let white = '#a2abb9';
let bg = '#faffff';
let bottom = '#9dddfc';
let date = this.getDays(recentSevenDays);
let numOfPeople = res.data.numOfPeople; //res为请求返回的数据
let numOfTimes = res.data.numOfTimes;
let option = {
title: {
text: '日活跃分析表',
textStyle: {
align: 'center',
color: white,
fontSize: 20
},
top: '3%',
left: '5%'
},
backgroundColor: bg,
grid: {
top: '25%',
bottom: '10%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true
}
}
},
legend: {
data: ['日活跃量', '日活跃人数'],
top: '15%',
textStyle: {
color: white
}
},
//横轴
xAxis: {
data: date,
axisLine: {
show: true //隐藏X轴轴线
},
axisTick: {
show: true //隐藏X轴刻度
},
axisLabel: {
show: true,
textStyle: {
color: white //X轴文字颜色
}
},
axisLine: {
lineStyle: {
color: bottom
}
}
},
yAxis: [
{
type: 'value',
name: '日活跃量(次)',
nameTextStyle: {
color: white
},
splitLine: {
show: true
},
splitLine: {
show: true
},
axisTick: {
show: true
},
axisLine: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: white
}
},
axisLine: {
lineStyle: {
color: white
}
}
},
{
type: 'value',
name: '日活跃人数(个)',
nameTextStyle: {
color: white
},
position: 'right',
splitLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: '{value} ', //右侧Y轴文字显示
textStyle: {
color: white
}
}
},
{
type: 'value',
gridIndex: 0,
min: 50,
max: 100,
splitNumber: 8,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
}
}
}
],
series: [
{
name: '日活跃人数',
type: 'line',
yAxisIndex: 1, //使用的 y 轴的 index,在单个图表实例中存在多个 y轴的时候有用
smooth: true, //平滑曲线显示
showAllSymbol: true, //显示所有图形。
symbol: 'circle', //标记的图形为实心圆
symbolSize: 10, //标记的大小
itemStyle: {
//折线拐点标志的样式
color: '#36b5f2'
},
lineStyle: {
color: '#9dddfc'
},
areaStyle: {
color: 'rgba(5,140,255, 0.2)'
},
data: numOfPeople
},
{
name: '日活跃量',
type: 'bar',
barWidth: 15,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#4ece58'
},
{
offset: 1,
color: '#69c67b'
}
])
}
},
data: numOfTimes
}
]
};
效果: