ECharts 学习要点 | 青训营笔记

熊猫盼盼
210 阅读1分钟

ECharts 学习要点 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第10天\color{cyan}这是我参与「第四届青训营」笔记创作活动的第10天

NPM 下载使用ECharts

由于NPM下载缓慢 使用淘宝镜像源 通过 cnpm 获取 echarts：

# 最新稳定版
$ cnpm install echarts --save

安装完成后 ECharts 和 zrender 会放在 node_modules 目录下，我们可以直接在项目代码中使用 require('echarts') 来使用。

使用步骤:\colorbox{cyan}{使用步骤:}
步骤一：下载并引入Echarts；
步骤二：准备一个具备大小的DOM容器；
步骤三：初始化Echarts实例对象；
步骤四：指定配置项和数据；
步骤五：将配置项设置给Echarts实例对象；

实例

`//`引入Echarts
var echarts = require('echarts'); 
// 基于准备好的dom，初始化echarts实例 
var myChart = echarts.init(document.getElementById('main')); 
// 绘制图表 指定配置项和数据 并将配置项设置给Echarts实例对象
myChart.setOption({ 
    title: { 
        text: 'ECharts 入门示例' 
    }, 
    tooltip: {}, 
    xAxis: { 
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] 
    }, 
    yAxis: {}, 
    series: [{ 
        name: '销量', 
        type: 'bar', 
        data: [5, 20, 36, 10, 10, 20] 
    }] 
});

设置配置信息

ECharts 库使用 json 格式来配置。

echarts.init(document.getElementById('main')).setOption(option);

这里 option 表示使用 json 数据格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

title: {
    text: '第一个 ECharts 实例'
}

提示信息

配置提示信息：

tooltip: {},

图例组件

图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。

legend: {
    data: [{
        name: '系列1',
        // 强制设置图形为圆。
        icon: 'circle',
        // 设置文本为红色
        textStyle: {
            color: 'red'
        }
    }]
}

以上三种配置功能作用区域展示如下图所示：

7134005224176561238.png

X 轴

配置要在 X 轴显示的项:

xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}

Y 轴

配置要在 Y 轴显示的项。

yAxis: {}

系列列表

每个系列通过 type 决定自己的图表类型:

series: [{
    name: '销量',  // 系列名称
    type: 'bar',  // 系列图表类型
    data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]

每个系列通过 type 决定自己的图表类型：

  • type: 'bar'：柱状/条形图
  • type: 'line'：折线/面积图
  • type: 'pie'：饼图
  • type: 'scatter'：散点（气泡）图
  • type: 'effectScatter'：带有涟漪特效动画的散点（气泡）
  • type: 'radar'：雷达图
  • type: 'tree'：树型图
  • type: 'treemap'：树型图
  • type: 'sunburst'：旭日图
  • type: 'boxplot'：箱形图
  • type: 'candlestick'：K线图
  • type: 'heatmap'：热力图
  • type: 'map'：地图
  • type: 'parallel'：平行坐标系的系列
  • type: 'lines'：线图
  • type: 'graph'：关系图
  • type: 'sankey'：桑基图
  • type: 'funnel'：漏斗图
  • type: 'gauge'：仪表盘
  • type: 'pictorialBar'：象形柱图
  • type: 'themeRiver'：主题河流
  • type: 'custom'：自定义系列

具体更加详细的配置项选项 可以参考官网文档选项中的配置项手册 如图所示： image.png

ECharts 饼图

饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要 xAxis，yAxis。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 饼图</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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 = {
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        data:[
                            {value:235, name:'视频广告'},
                            {value:274, name:'联盟广告'},
                            {value:310, name:'邮件营销'},
                            {value:335, name:'直接访问'},
                            {value:400, name:'搜索引擎'}
                        ],
                        roseType: 'angle',
                        itemStyle: {
                            normal: {
                                shadowBlur: 200,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

通过设置参数 roseType: 'angle' 把饼图显示成南丁格尔图。
itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等。

Echarts相关实例查询

可搜索Echarts官网Examples - Apache ECharts 进入后点击示例 即可看到各个不同类型图表的配置信息参考 图片如下所示：

image.png

image.png

ECharts 样式设置

颜色主题

ECharts4 开始，除了默认主题外，内置了两套主题，分别为 light 和 dark。 使用方式如下：

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

另外，我们也可以在官方的 主题编辑器 选择自己喜欢的主题下载。
目前主题下载提供了 JS 版本和 JSON 版本。
如果你使用 JS 版本，可以将 JS 主题代码保存一个 主题名.js 文件，然后在 HTML 中引用该文件，最后在代码中使用该主题。
比如上图中我们选中了一个主题，将 JS 代码保存为 wonderland.js。

<!-- 引入主题 -->
<script src="https://www.runoob.com/static/js/wonderland.js"></script>
// HTML 引入 wonderland.js 文件后，在初始化的时候调用
var myChart = echarts.init(dom, 'wonderland');

高亮的样式：emphasis

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。

如果要自定义高亮样式可以通过 emphasis 属性来定制：

        // 高亮样式。
        emphasis: {
            itemStyle: {
                // 高亮时点的颜色
                color: 'red'
            },
            label: {
                show: true,
                // 高亮时标签的文字
                formatter: '高亮时显示的标签内容'
            }
        }

ECharts 异步加载数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>异步加载数据</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/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'));
		myChart.showLoading();  // 开启 loading 效果
	
        $.get('http://www.runoob.com/static/js/echarts_test_data.json', function (data) {
            alert("可以看到 loading 字样。"); // 测试代码，用于查看 loading 效果
			myChart.hideLoading();  // 隐藏 loading 效果
			myChart.setOption({
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',    // 设置图表类型为饼图
                        radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                        data:data.data_pie
                    }
                ]
            })
        }, 'json');
    </script>
</body>
avatar
文章
阅读
粉丝