、ECharts是什么?
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
一、折线图
1.平滑折线图
series: [
{
smooth: true, //平滑曲线图。值可为数字
}
]
- smooth:是否平滑曲线显示。 如果是 boolean 类型,则表示是否开启平滑处理。如果是 number 类型(取值范围 0 到
1),表示平滑程度,越小表示越接近折线段,反之则反。设为 true 时相当于设为 0.5。
2.折线图渐变色
series: [
{
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(0, 229, 238, 1)", // 0% 处的颜色
},
{
offset: 1,
color: "#fff", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
}
]
- 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比
- 如果 globalCoord
为 true,则该四个值是绝对的像素位置
3.折线图类目轴
xAxis: {
type: "category",
},
无类目轴
实现类目轴后