Apache ECharts一个基于JavaScript的开源可视化图表库。
- 提供开箱即用的20多种图表和十几种组件，并且支持各种图表以及组件的任意组合。
- Canvas，SVG双引擎[1]一键切换，增量渲染，流加载等技术实现千万级数据的流畅交互。
- 通过数据集管理数据，支持数据过滤、聚类、回归，帮助实现同一份数据的多维度分析。
- 默认设计遵从可视化原则，支持响应式设计，并且提供了灵活的配置项方便开发者定制。
- 活跃的社区用户保证了项目的健康发展，也贡献了丰富的第三方插件满足不同的场景需求。
- 智能生成的图表描述和贴花图案，帮助视力障碍人士了解图表内容，读懂图表背后的故事。
Canvas，SVG双引擎:
Canvas
- 通过 js 来绘制 2D图形。
- canvas 图像单位是像素。
- canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。
SVG
- svg 使用 XML 描述的2D图像。
- svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
- svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。
SVG与Canvas比较
-
svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
-
svg 支持事件处理器，而 canvas 不支持事件处理器。
-
svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
-
canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
-
canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
-
canvas 适合开发游戏，svg 不适合游戏应用。
扫盲逐渐偏离主题，这里实现一个基础的echarts.js图像
- 步骤1：下载并引入echarts.js文件
- 步骤2：准备一个具备大小的DOM容器
- 步骤3：初始化echarts实例对象
- 步骤4：指定配置项和数据（option）
- 步骤5：将配置项设置给echarts实例对象
1.下载并引入echarts.js
如果只是学习的话，可以下载echarts.js文件，如果是开发需求的话，则直接下载echarts.min.js。后者的效率更加的高效。
下载地址：Apache ECharts
2.准备一个具有大小的DOM容器
如上图所示，这里我们设置了两个方框，方框的大小是确定的，便于之后放入可视化图形。
3.初始化echarts实例对象
//1.初始化对象
var myChart = echarts.init(document.getElementById('MainPU'));
首先我们要包含echarts.min.js文件，然后定义一个具有大小的容器，在进行初始化，初始化代码如上所示，后面’MainPU‘则是div盒子的id名。
4.指定配置项和数据
//2.配置参数
var option = {
tooltip: {
trigger: 'axis',
},
title: {
text: 'AQI'
},
legend: {
//top: "0%",
data: ["AQI"],
textStyle:{
color: "rgba(255,255,255, 0.5)",
fontSize: "8"
}
},
grid: {
left: '10',
top: "30",
right: '10',
bottom: '5',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00',"7:00","8:00","9:00","10:00","11:00","12:00","13:00","14:00",
"15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
//文本颜色
axisLabel: {
textStyle:{
color: "rgba(255,255,255,0.6)",
fontSize: 8
}
},
//x轴线的颜色
axisLine:{
lineStyle: {
color: "rgba(255,255,255,0.2)"
}
}
}
],
yAxis: [
{
type: 'value',
axisTick: { show: false},
axisLine: {
lineStyle:{
color: "rgba(255,255,255,0.1)"
}
},
axisLabel: {
textStyle:{
color: "rgba(255,255,255,0.6)",
fontSize: 8
}
},
//修改分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
}
}
],
series: [
{
name: 'AQI',
type: 'line',
//smooth: true,
lineStyle: {
color : "#00d887",
width: "1"
},
areaStyle: {
//渐变色，只需要复制即可
color: new echarts.graphic.LinearGradient(0,0,0,1,[{
offset:0,
color: "rgba(0, 216, 135, 0.4)"
},
{
offset:0.8,
color: "rgba(0, 216, 135, 0.1)"
}
],
false
),
shadowColor:"rgba(0,0,0,0.1)"
},
//这是拐点
symbol: "circle",
//拐点大小
symbolSize: 5,
//设置拐点颜色和样式
itemStyle:{
color: "#00d887",
borderColor: "rgba(221, 220, 107, 0.1)",
borderWidth: 8
},
//开始是不显示的
showSymbol: false,
data: data
},
]
};
这里的option，我选择是一个折线图，你也可以自己在官网上找到自己需要的图，而其中的data部分，我是传了一个参数，数据则是从后端获取的，你这里也可以自己写死。
5.将配置项设置给echarts实例对象
//3.初始化
myChart.setOption(option);
//4.让图片跟最屏幕自动适应
window.addEventListener("resize", function(){
myChart.resize();
});
设置到option的参数之后，只需要调用setOption函数，然后在加上屏幕自动适应，就能建立一个响应式布局的echarts图形。
如果想要实现上述代码，在option中的data处的数据，可以改成[23,56,78,67]等等，因为这里我是通过后端传过来的data数据，进行实时显示。
扫盲结束
