ECharts的简单应用

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 比较

1. svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。

2. svg 支持事件处理器，而 canvas 不支持事件处理器。

3. svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。

4. canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。

5. canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。

6. 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 实例对象

var myChart = echarts.init(document.getElementById('MainPU'));

首先我们要包含 echarts.min.js 文件，然后定义一个具有大小的容器，在进行初始化，初始化代码如上所示，后面’MainPU‘则是 div 盒子的 id 名。

4. 指定配置项和数据

var option = {
    tooltip: {
    trigger: 'axis',
    },
    title: {
        text: 'AQI'
    },
    legend: {
        
        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
            }
        },
        
        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',
        
        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 实例对象

myChart.setOption(option);


window.addEventListener("resize", function(){
    myChart.resize();
});

设置到 option 的参数之后，只需要调用 setOption 函数，然后在加上屏幕自动适应，就能建立一个响应式布局的 echarts 图形。

如果想要实现上述代码，在 option 中的 data 处的数据，可以改成 [23,56,78,67] 等等，因为这里我是通过后端传过来的 data 数据，进行实时显示。

扫盲结束