ECharts图表使用及异步加载的特性示例详解

时间:2022-12-23 黎燃人气:0

ECharts

数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。

chart.setOption({
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ],
    // ...
});

ApacheECharts一直致力于让开发人员以更方便的方式创建灵活、丰富的视觉作品。在最新的Apache ECharts 5中，我们专注于加强图表的叙事能力，以便开发人员能够以更简单的方式讲述数据背后的故事。

var themeEC4 = {
    color: [
        '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
        '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
    ]
};
var chart = echarts.init(dom, themeEC4);
chart.setOption(/* ... */);

如果之前使用了import“charts/lib/chart/bar”，则新接口对应于从“charts/charts”导入｛BarChart｝；为了帮助了解配置项需要引入哪些模块，我们的新示例编辑页面添加了生成按需导入代码的功能。在示例编辑页面的完整代码选项卡下选择按需导入后，可以检查需要导入的模块和相关代码。在大多数情况下，我们建议尽可能使用这组新的按需接口。它可以充分利用打包工具树抖动的功能，并可以有效解决命名空间冲突问题，防止内部结构的暴露。如果仍然使用CommonJS模块编写方法，我们仍然支持前面的方法：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([BarChart, GridComponent, CanvasRenderer]);

// 创建 echarts 实例。
var dom = document.getElementById('dom-id');
var chart = echarts.init(dom);
// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。
// option 是个大的 JavaScript 对象。
var option = {
    // option 每个属性是一类组件。
    legend: {...},
    grid: {...},
    tooltip: {...},
    toolbox: {...},
    dataZoom: {...},
    visualMap: {...},
    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。
    xAxis: [
        // 数组每项表示一个组件实例，用 type 描述“子类型”。
        {type: 'category', ...},
        {type: 'category', ...},
        {type: 'value', ...}
    ],
    yAxis: [{...}, {...}],
    // 这里有多个系列，也是构成一个数组。
    series: [
        // 每个系列，也有 type 描述“子类型”，即“图表类型”。
        {type: 'line', data: [['AA', 332], ['CC', 124], ['FF', 412], ... ]},
        {type: 'line', data: [2231, 1234, 552, ... ]},
        {type: 'line', data: [[4, 51], [8, 12], ... ]}
    }]
};
// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。
chart.setOption(option);

ECharts的用户使用选项来描述他们对图表的各种需求，包括他们有什么数据、想要绘制什么图表、图表看起来像什么、包含什么组件以及可以操作什么东西。简而言之，选项描述了如何将数据和数据映射到图形和交互行为中。

myChart.setOption({
    series : [
        {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
                {value:235, name:'视频广告'},
                {value:274, name:'联盟广告'},
                {value:310, name:'邮件营销'},
                {value:335, name:'直接访问'},
                {value:400, name:'搜索引擎'}
            ]
        }
    ]
})

大多数组件和系列可以根据上/右/下/左/宽/高进行绝对定位。这种绝对定位方法类似于CSS的绝对定位。绝对定位基于ecarts容器DOM节点。它们中的每一个都可以是：

itemStyle: {
    // 阴影的大小
    shadowBlur: 200,
    // 阴影水平方向上的偏移
    shadowOffsetX: 0,
    // 阴影垂直方向上的偏移
    shadowOffsetY: 0,
    // 阴影颜色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}

绝对值（例如，底部：54表示距离容器底部边界54个像素）。或者它基于容器的高度和宽度的百分比（例如，右：“20%”表示距容器右边界的距离为容器宽度的20%）。如下图所示，设置轴网构件（即矩形坐标系的底板）的左侧、右侧、高度和底部。

更改全局样式的最简单方法是直接使用颜色主题。例如，在示例集合中，可以选择“主题”来直接查看采用主题的效果。 ECharts4从两个内置主题开始，即“亮”和“暗”，以及通常的默认主题。可以这样使用它们：

var chart = echarts.init(dom, 'light');

$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});

直接样式设置是一种常见的设置方法。在整个ECharts的选项中，itemStyle、lineStyle、areaStyle、label等可以在许多地方设置。在这些地方，可以直接设置图形元素的颜色、线宽、点大小、标签文本、标签样式等。一般来说，所有ECharts系列和组件都遵循这些命名约定，尽管itemStyle、label等可能出现在不同图表和组件的不同位置。

option = {
    series: {
        type: 'scatter',
        itemStyle: {
            // 普通样式。
            normal: {
                // 点的颜色。
                color: 'red'
            },
            // 高亮样式。
            emphasis: {
                // 高亮时点的颜色。
                color: 'blue'
            }
        },
        label: {
            // 普通样式。
            normal: {
                show: true,
                // 标签的文字。
                formatter: 'This is a normal label.'
            },
            // 高亮样式。
            emphasis: {
                show: true,
                // 高亮时标签的文字。
                formatter: 'This is a emphasis label.'
            }
        }
    }
}

异步加载

var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '异步数据加载示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: data.categories
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: data.data
        }]
    });
});

如果长时间加载数据，画布上放置的空坐标轴也会让用户感觉是否存在错误。因此，需要加载动画来提示用户正在加载数据。默认情况下，ECharts提供了一个简单的加载动画。只需调用showLoading方法即可显示。加载数据后，调用hideLoading方法隐藏加载动画。

它直观易懂，适用于为某些特殊图表类型定制特定数据类型。然而，缺点是为了匹配这种数据输入形式，通常需要有一个数据处理过程，并将数据分割设置为每个系列（和类别轴）。此外，这不利于多个系列共享一个数据，也不利于基于原始数据的图表类型和系列的映射排列。因此，ECharts 4提供了一个单独声明数据的数据集组件，这带来了以下效果它可以接近数据可视化的常见思维模式：（I）提供数据，（II）指定数据到视觉的映射，从而形成图表。数据和其他配置可以分开。数据始终在变化，其他配置始终不变。分离易于单独管理。数据可以被多个系列或组件重用。对于具有大量数据的场景，不必为每个系列创建一个数据。支持更常见的数据格式，如二维数组、对象数组等，在一定程度上避免用户转换为数据格式。

加载全部内容