echarts 专题

Posted 2020-09-25 沧海一滴

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts 专题相关的知识，希望对你有一定的参考价值。

todo:
缩放

5 分钟上手 ECharts

获取 ECharts

你可以通过以下几种方式获取 ECharts。

从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。
在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库。
通过 npm 获取 echarts，npm install echarts --save，详见“在 webpack 中使用 echarts”
cdn 引入，你可以在 cdnjs，npmcdn 或者国内的 bootcdn 上找到 ECharts 的最新版本。

引入 ECharts

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 javascript 库一样用 script 标签引入。

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

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

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

然后就可以通过 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>

这样你的第一个图表就诞生了！

你也可以直接进入 ECharts Gallery 中查看编辑示例

http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

异步数据加载和更新

异步加载

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

var myChart = echarts.init(document.getElementById(\'main\'));

$.get(\'data.json\').done(function (data) {
    myChart.setOption({
        title: {
            text: \'异步数据加载示例\'
        },
        tooltip: {},
        legend: {
            data:[\'销量\']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: \'销量\',
            type: \'bar\',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

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

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
        }]
    });
});

如下：

ECharts 中在更新数据的时候需要通过name属性对应到相应的系列，上面示例中如果name不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的name数据。

loading 动画

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

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

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

数据的动态更新

ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。

所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption

具体可以看下面示例：

var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];

var data = [Math.random() * 150];
var now = new Date(base);

function addData(shift) {
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join(\'/\');
    date.push(now);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

    if (shift) {
        date.shift();
        data.shift();
    }

    now = new Date(+new Date(now) + oneDay);
}

for (var i = 1; i < 100; i++) {
    addData();
}

option = {
    xAxis: {
        type: \'category\',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, \'50%\'],
        type: \'value\'
    },
    series: [
        {
            name:\'成交\',
            type:\'line\',
            smooth:true,
            symbol: \'none\',
            stack: \'a\',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};

setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:\'成交\',
            data: data
        }]
    });
}, 500);

ECharts 实现地图散点图（上）

ECharts 作为国内应用最广泛的前端可视化生成工具，提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。

一、初始准备

1. 新建html

首先，新建项目目录 echartsMapDemo，在其中新建一个 html 文件 index.html。

echartsMapDemo/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>ECharts map Demo</title>
</head>
<body>
</body>
</html>

2.引入echarts文件

从 echarts官网下载最新完整开发包（目前最新版本是3.1.4）。

将下载好的包放置在 echartsMapDemo/dep 目录下并在 html 中以 script 标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
</body>

<script src="/dep/echarts.min.js"></script>

</html>

3.创建图标容器

在 html 中定义一个 div 作为地图的容器，高度设为 500px 。别忘了，一定要保证容器高度不为 0：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>

    <div id="map-wrap" style="height: 500px;">
        <!-- 这里以后是地图 -->
    </div>

</body>
<script src="/dep/echarts.min.js"></script>
</html>

然后，我们还需要一个地图文件，echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下文中我们会分别使用这两种方式实现。

同样去官网上下载，这里选择下载中国地图 china.js 或 china.json 。你也可以根据需要选择其他省份地图或世界地图

好了，准备工作完成，现在就开始绘制地图了~

二、绘制地图

echart 提供两种格式的地图数据，一种是 js 格式，一种是 JSON 格式。下面分别介绍两种格式的用法：

引用js格式地图数据：

1.在官网上下载 js 格式中国地图 china.js，将下载好的 china.js 放在 `echartsMapDemo/map/js` 目录下，以 script 标签引入到 html 中:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
    <div id="map-wrap" style="height: 500px;">
        <!-- 这里以后是地图 -->
    </div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/map/js/china.js"></script>

</html>

2.在js中用 `echarts.init()` 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，

同时定义一个变量 option，作为图表的配置项：

// 初始化echarts示例mapChart
var mapChart = echarts.init(document.getElementById(\'map-wrap\'));

// mapChart的配置
var option = {

};

3.通过配置 option，新建一个地理坐标系 `geo` ，地图类型为中国地图。

var option = {
    geo: {
          map: \'china\'
      }
}

geo.map 属性定义该地理坐标系中的地图数据，这里我们要用 china.js ，设置map值为 ‘china’。

这里需要注意，中国地图的map值为 ‘china’ ，世界地图的map值为 ‘world’ ，但如果要引用省市自治区地图 map 值为简体中文，例如 beijing.js，map 值为’北京’。

4.调用 `setOption(option)` 为图表设置配置项。

mapChart.setOption(option);

引用JSON格式地图数据：

1.同样在官网下载JSON格式的地图数据，放在`echartsMapDemo/map/json`目录下

2.json数据通过异步方式加载，加载完成后需要手动注册地图

这里我们使用 jQuery 的 $.get() 方法异步加载 china.json （首先要在html中引用 jquery ，这里省略操作说明），在回调函数中，以上述同样的方法初始化一个 mapCharts 、注册地图并设置 option：

$.get(\'map/json/china.json\', function (chinaJson) {

        echarts.registerMap(\'china\', chinaJson); // 注册地图

        var mapChart = echarts.init(document.getElementById(\'map-wrap\'));

          var option = {
              geo: {
                  map: \'china\'
              }
          }

              mapChart.setOption(option);

      });
});

现在就可以在页面中看到中国地图了：

为了突出散点效果，先为地图改个颜色

var option = {
    geo: {
        map: \'china\',

        itemStyle: {                    // 定义样式
            normal: {                    // 普通状态下的样式
                areaColor: \'#323c48\',
                borderColor: \'#111\'
            },
            emphasis: {                    // 高亮状态下的样式
                areaColor: \'#2a333d\'
            }
        }
    },
    backgroundColor: \'#404a59\',          // 图表背景色
}

换装后的地图：

中国地图底图

三、绘制散点图

1.新建散点图series

在 option 中添加一个 series ， series 的类型为散点图 scatter ，坐标系为地理坐标系 geo 。

var option = {
    geo: {
          ...
      },
    backgroundColor: \'#404a59\',

    series: [
        {
            name: \'销量\', // series名称
            type: \'scatter\', // series图表类型
            coordinateSystem: \'geo\' // series坐标系类型
        }
    ]
}

2.添加数据

ECharts 中 series.data 是定义图表数据内容的数组，其中每个项数据格式为：

{
    name: \'北京\',    // 数据项名称，在这里指地区名称

    value: [        // 数据项值
        116.46,     // 地理坐标，经度
        39.92,      // 地理坐标，纬度
        340         // 北京地区的数值
    ]
}

首先我们将需要渲染的数据转换成上述数据格式，存在一个变量中：

var myData = [

    {name: \'海门\', value: [121.15, 31.89, 90]},
      {name: \'鄂尔多斯\', value: [109.781327, 39.608266, 120]},
      {name: \'招远\', value: [120.38, 37.35, 142]},
    {name: \'舟山\', value: [122.207216, 29.985295, 123]},
      ...
]

然后，将 myData 赋值给 series.data：

var option = {
    geo: {
          ...
      },
      backgroundColor: \'#404a59\',
    series: [
        {
            name: \'销量\',
            type: \'scatter\',
            coordinateSystem: \'geo\',

            data: myData // series数据内容
        }
    ]
}

数据添加完成，就可以在图表中看到渲染出的散点了：

散点图1

3.添加视觉映射组件

视觉映射组件是标识某一数据范围内数据及颜色对应关系的控件，视觉映射组件分为连续型和分段型，这里我们选用连续型 type:continuous 。同时，通过视觉映射组件可以实现 ECharts 值域漫游功能，即通过拖拽控件手柄选择不同数值范围，达到对图表数据的筛选显示。在 visualMap属性中设置值域控件的相关配置：

var option = {
    ...

    visualMap: {
        type: \'continuous\', // 连续型
        min: 0,               // 值域最小值，必须参数
        max: 200,            // 值域最大值，必须参数
        calculable: true,    // 是否启用值域漫游
        inRange: {
                 color: [\'#50a3ba\',\'#eac736\',\'#d94e5d\']
                             // 指定数值从低到高时的颜色变化
          },
        textStyle: {
            color: \'#fff\'    // 值域控件的文本颜色
        }
         }
}

添加了值域控件的图表效果：

散点图2

这样一个基于中国地图的散点图就基本实现了，如果想要继续完善图表，可以为它添加标题，图例，高亮提示等控件，配置方式在这里查看（ECharts 配置项手册），在此不再详细说明。

http://echarts.baidu.com/blog/2016/04/28/echarts-map-tutorial.html

上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图，这篇中，我们将讲解如何在百度地图上绘制散点图。

一、初始准备

首先要创建 html 和引入 ECharts 包，具体说明详见上篇：ECharts 实现地图散点图（一）。

二、引入echarts百度地图扩展包

在 github 上下载 ECharts 扩展 bmap.js，放在 /extension/ 目录下，并引入 html 中：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>ECharts map Demo</title>
    </head>
    <body>
        <div id="map-wrap" style="height: 500px;">
            <!-- 这里以后是地图 -->
        </div>
    </body>
    <script src="/dep/echarts.min.js"></script>

    <script src="/extension/bmap.js"></script>

    </html>

三、绘制地图

1.在 js 中，新建 ECharts 示例，并为其设置配置项 option：

var bmapChart = echarts.init(document.getElementById(\'map-wrap\'));

var option = {
    // 这里是 ECharts 的配置项，接下来会说明
}

bmapChart.setOption(option);

2.添加百度地图：

在 option 中添加 bmap 相关设置：

var option = {
    bmap: {
          center: [116.307698, 40.056975], // 中心位置坐标
          zoom: 5, // 地图缩放比例
          roam: true // 开启用户缩放
      }

}

ECharts 将百度地图部分配置集成在了 bmap 中，包括：

参数	说明	格式
center	中心点的百度坐标	坐标数组, 如：[116.307698, 40.056975]
zoom	初始缩放比	number
roam	是否允许用户缩放操作	boolean
mapStyle	地图自定义样式	object, 如：{ styleJson: […] }

这样百度地图就加载到页面中了，这里显示百度地图的默认样式，稍后第四部分将为百度地图添加自定义样式的配置：

百度地图1

四、绘制散点图

绘制散点图的方法与上篇中绘制散点图方法相同，需要修改的部分是，将散点图的坐标系 coordinateSystem 改成使用 bmap

var myData = [

    {name: \'海门\', value: [121.15, 31.89, 90]},
      {name: \'鄂尔多斯\', value: [109.781327, 39.608266, 120]},
      {name: \'招远\', value: [120.38, 37.35, 142]},
    {name: \'舟山\', value: [122.207216, 29.985295, 123]},
      ...
]


var option = {
    bmap: {
          ...
      },
      visualMap: {    // 视觉映射组件
        type: \'continuous\',
        min: 0,
        max: 200,
        calculable: true,
        inRange: {
                 color: [\'#50a3ba\',\'#eac736\',\'#d94e5d\']
          },
        textStyle: {
            color: \'#fff\'
        }
         }
    series: [
        {
            name: \'销量\',
            type: \'scatter\',

            coordinateSystem: \'bmap\', // 坐标系使用bmap

            data: myData
        }
    ]
}

绘制散点后的百度地图：

百度地图2

四、自定义百度地图样式

地图的样式配置 bmap.mapStyle 中 styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中定制个性地图章节的介绍。

这里我们设置一个较暗色调的地图,如下：

var option = {
        bmap: {
              center: [116.307698, 40.056975],
                 zoom: 5,

                 roam: true, // 允许缩放

                 mapStyle: {  // 百度地图自定义样式
                     styleJson: [
                         // 陆地
                         {
                        "featureType": "land",
                          "elementType": "all",
                          "stylers": {
                              "color": "#073763"
                          }
                      },
                      // 水系
                      {
                          "featureType": "water",
                          "elementType": "all",
                          "stylers": {
                              "color": "#073763",
                              "lightness": -54
                          }
                      },
                      // 国道与高速
                      {
                          "featureType": "highway",
                          "elementType": "all",
                          "stylers": {
                              "color": "#45818e"
                          }
                      },
                      // 边界线
                      {
                          "featureType": "boundary",
                          "elementType": "all",
                          "stylers": {
                              "color": "#ffffff",
                              "lightness": -62,
                              "visibility": "on"
                          }
                      },
                      // 行政标注
                      {
                          "featureType": "label",
                          "elementType": "labels.text.fill",
                          "stylers": {
                              "color": "#ffffff",
                              "visibility": "on"
                          }
                      },
                      {
                          "featureType": "label",
                          "elementType": "labels.text.stroke",
                          "stylers": {
                              "color": "#444444",
                              "visibility": "on"
                          }
                      }
                     ]
                 }
          },
          ...
    }

实现效果如下图：

百度地图3

除了上述四个配置，其他地图设置都可以通过百度地图提供的API 实现

获取百度地图实例的方法如下：

var bmap = bmapCharts.getModel().getComponent(\'bmap\').getBMap(); // 百度地图实例

例如，我们可以为地图添加一个缩放控件和一个比例尺：

bmap.addControl(new BMap.NavigationControl()); // 缩放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺

百度地图4

http://echarts.baidu.com/blog/2016/06/13/echarts-map-tutorial.html

一个地图的数据示例：

option = {
    title : {
        text: \'iphone销量\',
        subtext: \'纯属虚构\',
        x:\'center\'
    },
    tooltip : {
        trigger: \'item\'
    },
    legend: {
        orient: \'vertical\',
        x:\'left\',
        data:[\'iphone3\',\'iphone4\',\'iphone5\']
    },
    dataRange: {
        min: 0,
        max: 2500,
        x: \'left\',
        y: \'bottom\',
        text:[\'高\',\'低\'],           // 文本，默认为数值文本
        calculable : true
    },
    toolbox: {
        show: true,
        orient : \'vertical\',
        x: \'right\',
        y: \'center\',
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true以上是关于echarts 专题的主要内容，如果未能解决你的问题，请参考以下文章 
 JSP编程专题1之JSP基础
 《分布式微服务电商》专题-电商项目前端Vue模块化开发
 CSDN开源夏令营 百度数据可视化实践 ECharts
 时间序列专题之三 时间序列的分段线性表示
 时间序列专题之三 时间序列的分段线性表示
 echarts分组插件echarts.group代码分享

echarts 专题

获取 ECharts

引入 ECharts

绘制一个简单的图表

异步加载

loading 动画

数据的动态更新

一、初始准备

1. 新建html

2.引入echarts文件

3.创建图标容器

二、绘制地图

引用js格式地图数据：

1.在官网上下载 js 格式中国地图 china.js，将下载好的 china.js 放在 echartsMapDemo/map/js 目录下，以 script 标签引入到 html 中:

2.在js中用 echarts.init() 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，

3.通过配置 option，新建一个地理坐标系 geo ，地图类型为中国地图。

4.调用 setOption(option) 为图表设置配置项。

引用JSON格式地图数据：

1.同样在官网下载JSON格式的地图数据，放在echartsMapDemo/map/json目录下

2.json数据通过异步方式加载，加载完成后需要手动注册地图

三、绘制散点图

1.新建散点图series

2.添加数据

3.添加视觉映射组件

一、初始准备

二、引入echarts百度地图扩展包

三、绘制地图

四、绘制散点图

四、 自定义百度地图样式

1.在官网上下载 js 格式中国地图 china.js，将下载好的 china.js 放在 `echartsMapDemo/map/js` 目录下，以 script 标签引入到 html 中:

2.在js中用 `echarts.init()` 方法初始化一个 ECharts 实例，在 init() 中传入图表容器 Dom 对象，

3.通过配置 option，新建一个地理坐标系 `geo` ，地图类型为中国地图。

4.调用 `setOption(option)` 为图表设置配置项。

1.同样在官网下载JSON格式的地图数据，放在`echartsMapDemo/map/json`目录下

四、自定义百度地图样式