一文搞懂echarts 图表的各种使用和技巧
我正在参加「掘金·启航计划」
从 🔪小白 =〉🔪菜鸟 =〉🔪新手=》 🔪普通=》🔪大佬=》🔪大神 【正在修炼中。。。】
🔪小白之路
一直以来我都不断的在echarts的图表的道路上曲曲折折的前进，不是忘记了这个属性，就是丢了那个词语，忘记了叫什么，直到有一天。。。。
我写了这篇文章作为总结：
🌂 有人觉得手头没有环境，直接到这个网址上
在 <https://www.jsdelivr.com/package/npm/echarts>
选择 `dist/echarts.js`，点击并保存为 `echarts.js` 文件
然后直接引进自己的页面中就可以了 ，简单的环境就是这么简单就可以用，那么第一个demo如何搭建？
绘制一个简单的图表需要什么？
🌂 只需要两步
【1】第一步：首先 为 ECharts 准备一个有宽高的 DOM容器
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
【2】第二步：用js为 ECharts 渲染数据
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); //获取元素内容
//给元素设置图表数据
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
</script>
相信这个时候你的效果已经出来了吧？是不是下图这个样子？如果你都说不是，我建议你立马留言点赞，重新返回去再看一遍，如果还不成，联系我吧，我指定包教包会！
如果你已经成功了？恭喜你，你已经成为了一名合格的菜鸟，会复制，就已经成功成为了菜鸟，look，进阶如此简单！
🔪菜鸟之路
成为菜鸟我们学的第一个图表就是
🍎 折线图
作为一名菜鸟，首先我们要简单的知道折线图怎么玩，知道里面的数据怎么玩。 图表里面最值得我们关注的自然就是我们了解属性并且可以自如的进行修改了，先看看这设置里面的基础信息
myChart.setOption({ //设置折线图数据
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
});
里面有一些我们常见的属性，数据。这一阶段我们总是要使用后台给我们的数据，那么如何渲染呢？
🌂 单个数据的渲染很简单，请求接口，获取code状态码，拿到数据，这个时候要注意上面的data和 里面的data就是我们此次需要渲染的数据
先看看横坐标里面的主要就是【xAxis】这里面的数据和属性
xAxis: {
type: 'category', //代表x轴坐标轴类型
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
参数和作用
type: 'category',
- 代表x轴坐标轴类型 ，其中包含了以下几种类型：
'value'数值轴，适用于连续数据，感觉蛮好用的'category'类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 [series.data]或 [dataset.source] 中取，或者可通过 xAxis.data 设置类目数据。🍎正常情况下我们用这个就行'time'时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。- 'log' 对数轴。适用于对数数据。
y轴数据则是与x轴一样，正常情况下【折线图】我们使用的都是 value 类型的 。
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'value' //数据类型
}
]
学完了折线图，菜鸟进阶之路才刚刚开始！ echarts 详细数据参数地址===>
