Echart入门介绍

最新推荐文章于 2022-08-11 16:28:31 发布

悲伤日记

最新推荐文章于 2022-08-11 16:28:31 发布

阅读量595

点赞数 1

特性

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

官方入门例子

let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
let chartDom = document.getElementById('chart');
let chart = echarts.init(chartDom);

chart.setOption(option);

官方的入门例子，这里用到了xAxis，yAxis，series。

xAxis指直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。
yAxis指直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。
series指系列列表。每个系列通过 type 决定自己的图表类型。

xAxis设置项介绍

xAxis: {
    show: true,  // => 是否显示 x 轴
    type: 'category',  // => 坐标轴类型，category指类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
    name: 'qianduanka',  // => 坐标轴名称
    data: [],  //  => 类目数据，只有type为category有效
    min: -100,  //  => 坐标轴刻度最小值
    max: 100,  // => 坐标轴刻度最大值
    splitNumber: 5,  // => 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。在类目轴中无效。
}

yAxis与xAxis作用一样。

series-line设置介绍

series: [{
    type: 'line',  // => 折线图是用折线将各个数据点标志连接起来的图表，用于展现数据的变化趋势。可用于直角坐标系和极坐标系上。
    coordinateSystem: 'cartesian2d',   // => 坐标系，cartesian2d指二维直角坐标系
    xAxisIndex: 0,  // => 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
    yAxisIndex: 0,  // => 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
    symbol: 'none',  // => 标记的图形
    markLine: {  // => 图表标线
        data: [],
        lineStyle: {
            normal: {
                color: 'rgb(23,75,143)',
                type: 'solid',
            }
        },
    },
    markArea: {  // => 图表标域，常用于标记图表中某个范围的数据，例如标出某段时间投放了广告
        data: []
    },
}]

对官方的例子升级，新增一组折线图。

let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    },{
        data: [1290, 1320, 934, 901, 820, 1330, 932],
        type: 'line'
    }]
};
let chartDom = document.getElementById('chart');
let chart = echarts.init(chartDom);
chart.setOption(option);

setOption其他介绍

title 标题组件，包含主标题和副标题。
color调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
backgroundColor背景色，默认无背景。
animation是否开启动画。
grid 直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。可以在网格上绘制折线图，柱状图，散点图（气泡图）。
tooltip提示框组件。

对官方的例子再升级，将折线图拆分两部分。

let option = {
    title: {
        text: 'qianduanka'
    },
    grid: [{
        left: '10%',
        top: 40,
        width: 'auto',
        height: 100,
    }, {
        left: '10%',
        top: 180,
        width: 'auto',
        height: 100,
    }],
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        gridIndex: 0,
    },{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        gridIndex: 1,
    }],
    yAxis: [{
        type: 'value',
        gridIndex: 0,
    },{
        type: 'value',
        gridIndex: 1
    }],
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
    },{
        data: [1290, 1320, 934, 901, 820, 1330, 932],
        type: 'line',
        xAxisIndex: 1,
        yAxisIndex: 1,
    }]
};

let chartDom = document.getElementById('chart');
let chart = echarts.init(chartDom);
chart.setOption(option);