目录
前言
为什么这样说：ECharts是大数据时代的前端“必需品”？
毋庸置疑，这就是事实。当今的大数据时代，人们最直观的感受绝对就是来源于图表。而ECharts是什么？用英文翻译就是图。但是具体时怎么让我们一起来看看吧！
概念出发：什么是ECharts？
- Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11），Chrome，Firefox，Safari等。
- 底层依赖轻量级Canva+库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
- ECharts 3及以上的版本中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
所以什么是ECharts？ECharts是一个可以实现数据可视化的JavaScript图表库。
所以ECharts有什么作用？让数据更加直观。
视觉体验：ECharts是什么样子的？
这是我写的一个简单的ECharts页面，作为新手个人觉得ECharts在使用上并不难。更多就是微调和复制粘贴，配上简单的js局可以做出来一个简单好看的页面。
上手操作：ECharts三部曲完美实现！
第一步：找到就是赚到
- 打开官方网址：Apache ECharts， 点击示例。
- 找到一个你需要的图表 （样式基本一致），下图是我的选择示例。
第二步：结构搭建
- 需要引入两个文件，如下图：
如果没有这两个文件，百度网盘链接：百度网盘 请输入提取码 提取码：mxwp
- 创建一个大小合适的盒子，实际大小根据情况自己定制。
<body>
<div class="box" style="width: 500px; height: 500px;">
我是一个500px的方盒
</div>
</body>第三步：我最擅长的复制粘贴
-
实例化对象：获取一个DOM元素，第二步的就是box；
-
指定配置项和数据：这就是复制粘贴，根据自己的需求稍微修饰，直接就是全选+复制；
-
配置项和数据给我们的实例化对象：让图表显示出来
JavaScript代码
(function () {
// 1. 实例化对象
var myChart = echarts.init(document.querySelector(".box"));
// 2. 指定配置项和数据 复制粘贴
var option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: 'Gradient Stacked Area Chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(128, 255, 165)'
},
{
offset: 1,
color: 'rgba(1, 191, 236)'
}
])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0, 221, 255)'
},
{
offset: 1,
color: 'rgba(77, 119, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
{
name: 'Line 3',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(55, 162, 255)'
},
{
offset: 1,
color: 'rgba(116, 21, 219)'
}
])
},
emphasis: {
focus: 'series'
},
data: [320, 132, 201, 334, 190, 130, 220]
},
{
name: 'Line 4',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 0, 135)'
},
{
offset: 1,
color: 'rgba(135, 0, 157)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 402, 231, 134, 190, 230, 120]
},
{
name: 'Line 5',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 191, 0)'
},
{
offset: 1,
color: 'rgba(224, 62, 76)'
}
])
},
emphasis: {
focus: 'series'
},
data: [220, 302, 181, 234, 210, 290, 150]
}
]
};
// 3. 配置项和数据给我们的实例化对象
myChart.setOption(option);
})()总结
想要实现ECharts在自己的页面中显示很简单，但是达到一定的效果就需要自己探索。但不知道一个属性怎么设置的时候就可以百度一下，会比自己摸索更有效率。学到就是赚到！
扫一扫
2022
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
