快速上手 Echarts

时间:2019-05-25 20:19:00 来源:互联网 作者: 神秘的大神 字体:

最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手。

一.下载

这里选择目前最新版本,4.2.1

地址:https://github.com/apache/incubator-echarts/archive/4.2.1.zip

在解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。

二.上手

不管你使用那种 js 语言,要想实现功能,最核心的就是 下面的三个步骤。

引入 Echarts 之前,要引入 jquery 库

1.引入 ECharts

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </html>

2.准备容器

<body>
    <!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div> </body>

3.绘制图表

通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>

最终效果

 三、使用

到这里,你可以在自己的项目中实现了简单的引入,但是具体实现还要根据自己的业务需求进行定制。

这是官方提供的几个简单的实例:https://echarts.baidu.com/examples/,可以根据需求,选择不同的展示类型。

这些例子都可以点开,在线编辑,实时展示在线修改效果。

1.数据异步加载

入门示例中的数据是在初始化后setOption中直接填入的,但是很多时候可能数据需要异步加载后再填入。ECharts 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。

不管使用那种方式,最关键的的就是 一定要等到   <div id="main" style="width: 600px;height:400px;"></div>  渲染完成!!

方式一:

var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
myChart.setOption({
    title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }); // 异步加载数据 $.get('data.json').done(function (data) { // 填入数据 myChart.setOption({ xAxis: { data: data.categories }, series: [{ // 根据名字对应到相应的系列 name: '销量', data: data.data }] }); });

方式二:

var myChart = echarts.init(document.getElementById('main'));
// 显示标题,图例和空的坐标轴
var option = { title: { text: '异步数据加载示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [] }] }; // 异步加载数据 $.get('data.json').done(function (data) { // 填入数据,根据返回的data里面包含的内容设置 option.xAxis.data = data.categories; option.series[0].data = data.data; myChart.setOption(option); });

注意:这里的 series 是一个数组,后台赋值的时候要注意数值的对应。

说明:x轴与 y轴 数据的对应,其实就是  option.xAxis.data  与 option.series[0].data 数值的对应,这两个数组的长度是一样的,数据也是一一对应的 比如:xAxis.data[0], 对应 series[0].data[0],只要后台对应好数据就可以了。

2.loading 动画 

如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。

ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

3.API

官方地址:https://www.echartsjs.com/api.html#echarts

init:创建一个 ECharts 实例,返回 echartsInstance,不能在单个容器上初始化多个 ECharts 实例。

getInstanceByDom :获取 dom 容器上的实例。

多次调用初始化代码时,可以获取容器实例,没有获取到,再初始化,防止初始多个实例。

var myChartPro = echarts.getInstanceByDom(document.getElementById('projectInvest'));
if(myChartPro === undefined ){ myChartPro = echarts.init(document.getElementById('projectInvest')); }

4.配置项

https://www.echartsjs.com/option.html#title

上面代码的参数,都是可以在这里查到的,并且可以根据自己的需求定制。

常用配置:

导出图片,数据视图,折线 和 柱状图

 toolbox: {
           feature: {
                saveAsImage: {
                    title:'导出'
                },
                dataView:{ readOnly:true }, magicType: { type: ['line', 'bar'] } } },

 类似这样:

区域拖动 :分为内部(看不到滚动条)和 外部(如下)

  dataZoom:[{
            type:'slider',
            minValueSpan:9,
            maxValueSpan:19, endValue:19 }],

 类似这样:

x轴设置 :

 interval :所有数据都显示   rotate:字体倾斜,防止重叠

  xAxis: {
            name:'名称',
            data: [],
            axisLabel:{
                interval:0, rotate:-30 } },

 类似这样:

四、总结 

以上内容都可以在官网查到,上手一个新技术最快的就是参看官方文档,看不懂的可以再去搜索,加深理解。

这里贴 Echarts,常用的文档地址:

上手教程:https://www.echartsjs.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

API:https://www.echartsjs.com/api.html#echarts

配置项:https://www.echartsjs.com/option.html#title