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

//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数据，进行实时显示。

扫盲结束