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）指定数据到视觉的映射，从而形成图表。 数据和其他配置可以分开。数据始终在变化，其他配置始终不变。分离易于单独管理。 数据可以被多个系列或组件重用。对于具有大量数据的场景，不必为每个系列创建一个数据。 支持更常见的数据格式，如二维数组、对象数组等，在一定程度上避免用户转换为数据格式。
以上就是ECharts图表使用及异步加载的特性的详细内容，更多关于ECharts图表使用及异步加载的特性的资料请关注编程网其它相关文章！
