我学会了，用Echarts-阿里云开发者社区

Echarts 香不香

阿里的DataV就是基于Echarts做的哟，Echarts连续多年获得中国最受欢迎的开源项目之一，这么受欢迎，通用性非常强，是完全免费的哟。

Echarts特性

可视化类型丰富
支持多种数据格式
千万级的前端数据渲染
动态数据的动画展示
支持基于WebGL的3D效果
跨平台，小程序中也能用
提供了数据深度搜索的系列组件
无障碍访问，盲人可以听到图表内容

Echarts支持“ canvas”和“ svg”两种渲染方式。

简单的环境

Echarts 官方可以直接下载类库压缩包，可以下载源码，也可以下载编译后直接可用的代码。

VS Code 官方可以直接下载开发工具，点击右上角的Download即可完成下载，正常软件的安装方式一路点下一步，即可完成安装。

Echarts 官方文档

Echarts 术语查询手册

术语查询手册

常用组件

系列类型

坐标系

组件

小用一把

图表示例：生成 A-Z的26种产品维度，生成26份随机数据。注意：由于数据是随机的，则每次渲染图表都不会一样。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.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: {
                // 生成 A-Z 产品维度
                data: Array(26).fill(65).map((item, index) => String.fromCharCode(item + index)).map(item => '产品' + item)
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                // 生成26份随机数据
                data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

Echarts 常用

标题、提示框、工具栏、图例、时间轴、数据区域缩放、网格、坐标轴、数据系列、全局字体样式等。

标题 title

text：主标题文本，支持\n换行
subtext：副标题文本，支持\n换行
left：距离左侧容器的距离，单位：像素(10)、百分比(10%)、左中右对齐(left center right)等等
show：是否显示，默认true

提示框 tooltip

在合适的时机向用户提供相关信息

trigger：触发类型，图形触发item、坐标轴触发axis、不触发none
formatter：悬浮层的内容格式化器，有 {a} {b} {c} {d} {e} 这五个占位符，代表系列名、数据名、数据值等。{a} {b}和{c} {d}在不同的图表中表示的含义又不相同。
1. 折线图、区域图、柱状图、条形图、K线图：a 系列名、b 类目值、c 数值、d 无数据
2. 散点图、气泡图：a 系列名、b 数据名、c 数值数组、d 无数据
3. 地图：a 系列名、b 区域名、c 合并数值、d 无数据
4. 饼图、仪表盘、漏斗图：a 系列名称、b 数据项名、c 数值、d 百分比
axisPointer：坐标指示器，子参数项 type 参数值可为：直线指示器 line、阴影指示器 shadow、十字准星指示器cross、none 无指示器
show：是否显示，默认值为true

工具栏 toolbox

可用于将可视化图表下载到本地、查看可视化底层数据等

show：是否显示，默认值为true
feature：常用子参数项有：保存图片 saveAsImage、还原初始配置 restore、可视化底层数据视图 dataView、切换多种可视化类型(如折线图、柱状图等) magicType

图例 legend

show：是否显示
left：距离左侧容器的距离，单位：像素(10)、百分比(10%)、左中右对齐(left center right)等等
top：距离顶部的距离，单位：像素(10)、百分比(10%)、顶中底部对齐（top middle bottom）等等
orient：图例列表的朝向，默认是水平 horizontal，还可设置为垂直 vertical
data：图例中的数据数组，通常与数据展示的系列(series)对应起来，data与series一旦对应起来了，它们之间就是强关联的。

时间轴 timeline

用于切换多套配置项，baseOption、options，每次切换时，baseOption + options配置中某一项的进行合并配置，合并后的配置会用来渲染当前时间的图表。

baseOption：默认配置，子参数项 timeline：是否循环 loop、反向播放 rewind、播放速度 playInterval、播放按钮的位置 controlPosition。
options：配置集合

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.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 = {
            baseOption: {
                timeline: {
                    data: ['2020', '2021', '2022']
                },
                title: {
                    subtext: '秀哇'
                },
                grid: {},
                xAxis: [
                    {
                        'type': 'category',
                        // 生成 A-Z 公司维度
                        data: Array(26).fill(65).map((item, index) => String.fromCharCode(item + index)).map(item => '公司' + item)
                    }
                ],
                yAxis: [
                    {
                        'type': 'value'
                    }
                ],
                series: [
                    { // 系列一的一些其他配置
                        type: 'bar'
                    }
                ]
            },
            options: [
                { // 这是'2020' 对应的 option
                    title: {
                        text: '2020年销量情况'
                    },
                    series: [
                        {                // 生成26份随机数据
                            data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
                        } // 系列一的数据
                    ]
                },
                { // 这是'2021' 对应的 option
                    title: {
                        text: '2021年销量情况'
                    },
                    series: [
                        {                // 生成26份随机数据
                            data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
                        }
                    ]
                },
                { // 这是'2022' 对应的 option
                    title: {
                        text: '2022年销量情况'
                    },
                    series: [
                        {                // 生成26份随机数据
                            data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => ~~item)
                        }
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

数据区域缩放 dataZoom

向用户提供区域缩放的功能

滑动条型的数据区域缩放 dataZoomSlider
内置型的数据区域缩放 dataZoomInside
框选型的数据区域缩放 dataZoomSelect

滑动条形的数据区域缩放和内置型的数据区域缩放

属于dataZoom的子参数项中的配置，常用配置项有

xAxisIndex：要控制的X轴的索引，支持取数字和数组，表示控制一个可视化图表中多个图表(比如多条折线图)的那几个图表，0表示第一条折线图。
filterMode：过滤模式，dataZoom 数据区域缩放的本质就是数据过滤，也就是过滤掉缩放区域外的内容。过滤模式也有多种。
1. filter：过滤掉缩放区域外的数据，当一个可视化图表中包含多个轴时，会影响其它轴的数据范围，对于数据而言，只要有一个维度在缩放区域之外，就会直接被过滤掉。
2. weakFilter：过滤缩放区域外的数据，当一个可视化图表中包含多个轴时，会影响其它轴的数据范围，对于数据而言，当所有的维度在缩放区域之外，才会直接被过滤掉。
3. empty：不影响其它轴的数据范围。
4. none：不过滤掉缩放区域外的数据，只会改变其它轴的数据范围。
type：缩放类型
1. slider：带滑块的缩放，可以看到图表下方有一个滑块
2. inside：不带滑块的缩放，将鼠标悬浮到图表区域，然后滑动滚轮，就能缩放了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="./echarts.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 = {
            dataZoom: [
                {
                    id: 'dataZoomX',
                    type: 'slider',
                    xAxisIndex: [0],
                    filterMode: 'filter'
                },
                {
                    id: 'dataZoomY',
                    type: 'slider',
                    yAxisIndex: [0],
                    filterMode: 'empty'
                }
            ],
            xAxis: { type: 'value' },
            yAxis: { type: 'value' },
            series: {
                type: 'bar',
                data: Array(26).fill(1000).map((item, index) => item * (index + 1) * Math.random()).map(item => [~~item, ~~item]) // 第一项对应 X 轴，第二项对应 Y 轴
            }
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

框选型的数据缩放

属于toolbox的一个feature

在toolbox的feature中新增一个dataZoom的选项，设置show为true即可。toolbox工具箱中就会多两个按钮，分别是区域缩放和区域缩放撤回。

网格 grid

用于在坐标系中控制可视化区域的网格空间大小

grid中常用的配置项：

x、y：x y轴的坐标位置
width、height：网格空间的宽高

坐标轴 xAxis和yAxis

常用的有二维直角坐标系，横轴xAxis和纵轴yAxis。

xAxis、yAxis中常用的配置项：

position：坐标轴放置的位置，x轴可以使用顶部底部 top、bottom，y轴可以使用左边右边 left、right。
type：坐标轴的类型，数值类型的轴 value、类别类型的轴 category、时间类型的轴 time、对数类型的轴 log。value适用于连续的数值、category 适用于离散的类别、time 适用于连续的时间序列、log使用于对数数据。
name：坐标轴的名字
nameLocation：坐标轴名字的显示位置，start 开始位置、x轴的center和y轴的middle 中间位置、end 结束位置。

数据系列 series

series 数据系列是用来作为数据的容器，一个图表可能会包含多个系列，每个系列也可能会包含多个数据。
不同的可视化图表，series的形式并不完全相同哟，例如饼图和柱状图，更多不同请看官网series，有详细描述哟。

全局字体样式 textStyle

用于统一定制化设置字体样式，字体样式和可视化图表的搭配非常重要。设置参数的逻辑参考 CSS 样式

textStyle中常用的配置项：

color：文字颜色，如 ``#fff
fontStyle：文字字体风格，如 normal、italic、oblique。
fontWeight：文字字体的粗细，如 normal、bold、bolder、lighter、100、500等。
fontFamily：文字字体系列，如 sans-serif、serif、monospace、Arial、Courier New、Microsoft YaHei 等。
fontSize：文字字体大小，如 14等。

Echarts 可视化图

通过以上的常用配置学习，是不是感觉echarts多写多练多查阅官方文档就可以搞定大多数图表了？是的，echarts的通用性非常的强，其实我们还有两大利器，echarts官方示例DEMO 和民间echarts画廊。

利器：不仅可以看到很多官方DEMO和民间的DEMO，你还可以对他们的DEMO进行在线编辑，编辑后的结果还可以直接拿来用哟。非常方便嘞。

echarts官方示例DEMO

民间echarts画廊

折线图

折线图是比较常见的展示数据趋势的基础图表，常用于展示时间序列的数据。只需要将series中的type设置为line即可。

如：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

常用配置参数

smooth：折线的平滑度，设置为true时折线图就会变得非常平滑，变成一张曲线图。
stack：对折线图进行分组，当有多条折线图时，都设置这个属性为同一个值时，同一组的折线图的数据会进行累加求和。一般会配合label属性来使用，可以很直观的看到分组后原来的数据值，也可以不配合label来使用。
areaStyle：对折线图区域进行色彩填充，一般配合stack来使用，也可以不配合stack来使用。
label: 折线图每一个顶点的数据值，如果要显示的话，就可以设置show为true，也可以设置数据值的显示位置，如top、bottom、left、right、middle、center等。
emphasis：折线图的高亮效果，可以设置它的focus为 'series'来实现悬浮时高亮当前选中的这条折线图，其它折线图就会呈灰色，就算是有色彩填充的折线图，也会只高亮当前选择这条折线图。

熟悉了这些配置之后，可以去官网瞅瞅折线的DEMO哟，民间画廊中有更多炫酷折线效果的 DEMO哟。
基于折线图变形的有聚合折线图(多条折线图)、堆叠折线图(面积图和层叠面积图)等。

柱状图

柱状图是比较常见的展示数据频数的基础图表，常用于展示离散的数据。只需要将series中的type设置为bar即可。

如：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

常用配置参数

label：柱状图中每一个柱子的数据值，如果要显示的话，就可以设置show为true，也可以设置数据值的显示位置，如top、bottom、left、right、middle、center、side、inside等。
stack：对柱状图进行分组，当有多种颜色的柱状图时，都设置这个属性为同一个值时，同一组的柱状图的数据会进行累加求和。一般会配合label属性来使用，可以很直观的看到分组后原来的数据值，也可以不配合label来使用。
emphasis：柱状图的高亮效果，可以设置它的focus为 'series'来实现悬浮时高亮当前选中的这个颜色的柱状图，其它柱状图就会呈灰色。

基于柱状图变形的有聚合柱状图(垂直)、水平聚合柱状图、堆叠柱状图等。

饼图

饼图是比较常见的展示数据各项比重的基础图表，它没有坐标轴的概念，也就没有xAxis和xAxis属性，只需要将series中的type设置为pie即可。

如：

option = {
    title: {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

常用配置参数

将legend的orient设置为 vertical 是为了防止水平显示与标题重叠在一起。
tooltip中的formatter：{a}表示系列名称、{b}表示数据项名称、{c}表示数值、{d}表示百分比
radius：如果值为一个数组，数组中有两个值，内外部半径的比例，那么饼图会变成一个环形图，表示内半径到外半径之间作为饼图的展示区域。如果值为一个值，则表示内部半径为0，外部半径为这个值。
roseType(玫瑰类型)：南丁格尔类型，false 表示不使用南丁格尔，area 表示使用面积模式，radius 表示使用半径模式。面积模式会以值来计算面积来作为某一块区域来呈现玫瑰图，半径模式会以值来计算半径作为某一块区域来呈现玫瑰图。

基于饼图变形的有环形图、圆角环形图、南丁格尔玫瑰图、日历饼图、折线联动饼图等。

散点图与气泡图

散点图是常见的 比较跨类别的聚合数据 的基础图表，散点图可用于展示二个维度的数据信息比如线性回、指数回归、多项式回归等等。
气泡图是基于散点图的，它可以用于展示三个维度的数据信息，除了x、y轴的坐标，还有大小，也就是可以用于呈现突出效果。
effectScatter 是散点图和气泡图的进阶版，带有动态装饰的效果哟。
普通效果的散点或气泡图只需要将series的type设置为scatter即可，如果要展示突出的动态装饰效果，就将series的type设置为 effectScatter。

普通散点图：

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            // 两个维度的数据
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.20],
            [11.5, 7.20],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
        ],
        type: 'scatter'
    }]
};

普通气泡图：

option = {
    xAxis: {},
    yAxis: {},
    series: [{
        data: [
           // 三个维度的数据
            [4.0, 8.04, 10],
            [9.0, 6.95, 20],
            [23.0, 7.58, 30],
            [18.0, 8.81, 15],
            [12.0, 8.33, 16],
            [28.0, 9.96, 45],
            [10.0, 7.24, 18],
            [14.0, 5.27, 35],
            [12.0, 10.14, 20],
            [10.0, 4.12, 50],
            [7.0, 5.38, 13],
            [37.0, 5.0, 13]
        ],
       // 通过这个参数值来控制每一个点的大小
        symbolSize: function (data) {
            return data[2];
        },
        type: 'scatter'
    }]
};

涟漪气泡图：

雷达图

雷达图是用于多个单位在不同项目上表现差异的图表，只需要将series的type设置为radar即可。

如：


option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        indicator: [
            { name: '销售（sales）', max: 6500},
            { name: '管理（Administration）', max: 16000},
            { name: '信息技术（Information Techology）', max: 30000},
            { name: '客服（Customer Support）', max: 38000},
            { name: '研发（Development）', max: 52000},
            { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data: [
            {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
};

常用配置参数

雷达图也没有坐标系的概念，所以它有一个radar属性，主要也是它radar属性的参数配置

indicator：指示器，用于存放每一个维度的名称和范围。
name：每一个指示器名称的配置项，比如你可以在它里面写textStyle，在里面设置文字颜色color、背景色backgroundColor、边框半径borderRadius等等，设置样式的逻辑和CSS中一致。

基于雷达图变形的有：多雷达图、卫星雷达图、面积雷达图。

漏斗图

漏斗图是用于进行转化率分析的图表，它也没有坐标轴的概念。只需要将series的type设置为funnel即可。

如：

option = {
    title: {
        text: '漏斗图',
        subtext: '纯属虚构'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    legend: {
        data: ['展现','点击','访问','咨询','订单']
    },

    series: [
        {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
                show: true,
                position: 'inside'
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                label: {
                    fontSize: 20
                }
            },
            data: [
                {value: 60, name: '访问'},
                {value: 40, name: '咨询'},
                {value: 20, name: '订单'},
                {value: 80, name: '点击'},
                {value: 100, name: '展现'}
            ]
        }
    ]
};

常用配置参数

left：漏斗的左边距，也就是漏斗距离左边的边距
top：漏斗的上边距，也就是漏斗距离顶部的边距
bottom：漏斗的下边距，也就是漏斗距离底部的边距
width：漏斗的显示宽度
min：漏斗的最小值
max：漏斗的最大值
minSize：漏斗的最小宽度
maxSize：漏斗的最大宽度
sort：漏斗数据的排序方式，降序 descending、升序 ascending
gap：每层漏斗之间的间距
label：每层漏斗显示的名称，show为true时就会显示，名称显示的位置，一般都设置显示在每层漏斗的内部 inside，还可以设置 left、right、top、bottom、center、middle。
itemStyle：每层漏斗的样式，如每层漏斗边框的颜色、每层漏斗边框的宽度
emphasis：高亮时每层漏斗的样式，如 label的fontSize 名称的字体大小。

仪表盘

仪表盘是用于表示事件进度的图表，只需要将series的type设置为gauge即可。

如：

option = {
    tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
    },
    series: [{
        name: 'Pressure',
        type: 'gauge',
        progress: {
            show: true
        },
        detail: {
            valueAnimation: true,
            formatter: '{value}'
        },
        data: [{
            value: 50,
            name: 'SCORE'
        }]
    }]
};

常用配置参数

progress：进度，将它的show设置为true就可以看到进度条。
detail：仪表盘的详情数据，将它的valueAnimation设置为true，就能看到数值跳动的动画效果。通过设置它的formatter可以对要显示的数值进行过滤、格式化的操作。

基于仪表盘的变形非常的多，比如时钟、得分环、多仪表板等等

箱线图(盒须图)

箱线图是用于表示连续性数据分布情况的图表，比如它的呈现效果的逻辑很像是折线图、柱状图这类带趋势和频数的图表。但是数据逻辑并不是，它的原始数据是二维的，一维数据的每一项会作为x轴上离散的类别，那么一维度数据中每一项中的数据会被组合成上四位分数、上下限、异常值等。将它的series的type属性设置为boxplot即可。

如：

var getdata = [
    [34,54,67,75,86],
    [10,25,45,67,73],
    [24,34,45,55,66],
    [32,45,50,60,70]
]
var getname=['机电工程学院','自动化学院','计算机学院','轻工化工学院'];
option = {
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '50',
        right: '20',
        top:'40',
        bottom:'40',
    },
    xAxis: {
        type: 'category',
        data: getname,
        axisLabel: {
            color: '#777777',
            textStyle: {
                fontSize: '13'
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: '#333333',
            }
        },
        splitLine: {
            show: false
        }
    },

    yAxis: {
        type: 'value',
        name:'分数（分）',
        nameTextStyle: {
            color: '#777777',
            fontSize: 13,
            padding:[0,0,0,60]
        },
        axisLabel: {
            color: '#777777',
            textStyle: {
                fontSize: '13'
            },
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: '#333333',
            }
        },
        splitLine: {
            lineStyle: {
                color: '#D1D1D1',
            },
        }

    },
    series: [{
            name: 'boxplot',
            type: 'boxplot',
            data: getdata,
            itemStyle: {
                normal: {
                    borderColor: '#4B96F3',
                    borderWidth: 2,
                    color: '#D9EAFF',
                }
            },
            tooltip: {
                formatter: function(param) {
                    return [

                        'Upper: ' + param.data[5] + ' 分',
                        'Q3: ' + param.data[4] + ' 分',
                        'Median: ' + param.data[3] + ' 分',
                        'Q1: ' + param.data[2] + ' 分',
                        'Lower: ' + param.data[1] + ' 分'
                    ].join('<br/>')
                }
            }
        }, {
            name: '异常',
            type: 'scatter',
            symbolSize: 10,
            data: [
                [0, 17, "异常"],
            ],
            itemStyle: {
                normal: {
                    color: 'rgba(75,150,243,.7)',
                }
            },
            label: {
                show: false,
            },
        },{
            name: '异常',
            type: 'scatter',
            symbolSize: 10,
            data: [
                [3, 75, "异常"],
            ],
            itemStyle: {
                normal: {
                    color: 'rgba(75,150,243,.7)',
                }
            },
            label: {
                show: false,
            },
        }
    ]
};

常用配置参数

tooltip：工具提示，不是全局的那个tooltip，只是该箱线图的tooltip，用于格式化某一个箱线图的悬浮提示。

基于箱线图(盒须图)的变形有多系列箱线图、垂直箱线图、水平箱线图等。

热力图

热力图是密度型的图表，散点图、气泡图也属于密度型图表，所以热力图的数据，散点图或气泡图也能使用，所以热力图的数据是三维的。但热力图是使用不同的颜色以及深浅颜色来表示数据的差异，而气泡图是通过点的大小来表示数据的差异的。将它的series的type属性设置为heatmap即可。

如：

var hours = [0,1,2,3,4,5,6,7,8,9];
var ydays1 = ['0', '1万', '10万',
        '50万', '100万', '500万', '1000万', '5000万', '1亿', '10亿以上'].reverse();
var ydays2 = ['1万', '10万',
        '50万', '100万', '500万', '1000万', '5000万', '1亿', '10亿', '  '].reverse();

var data = []
for(let i = 0;i<10;i++) {
    for (let j = 0;j<10;j++) {
        data.push([i,j,parseInt(Math.random() * 10)])
    }
}

option = {
    title: {
        text: 'xx规模分布图',
        left: '8%',
        align: 'right'
    },
    tooltip: {
        position: 'top'
    },
    animation: false,
    grid: {
        width: 650,
        height: 500,
        top: '10%'
    },
    xAxis: {
        show: false,
        type: 'category',
        data: hours,
        splitArea: {
            show: true
        }
    },
    yAxis: [{
        name: '单位(元)',
        type: 'category',
        data: ydays1,
        splitArea: {
            show: false
        },
        axisTick: {
          show: false  
        },
        axisLine: {
            show: false
        },
         splitLine: {
            show: false
        }
    },{
        type: 'category',
        data: ydays2,
        splitArea: {
            show: false
        },
        axisTick: {
          show: false  
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    visualMap: [{
        type: 'piecewise',
        splitNumber: 6,
        showLabel: false,
        pieces: [
            {gt: 9, color: '#F06326', symbol: 'rect'},
            {gt: 8, lt: 9, color: '#F06326', symbol: 'rect'},
            {gt: 7, lt: 8, color: '#F06326', symbol: 'rect'},
            {gt: 6, lt: 7, color: '#F48A5D', symbol: 'rect'},
            {gt: 5, lt: 6, color: '#F48A5D', symbol: 'rect'},
            {gt: 4, lt: 5, color: '#FFB366', symbol: 'rect'},
            {gt: 3, lt: 4, color: '#FFB366', symbol: 'rect'},
            {gt: 2, lt: 3, color: '#FFCF9F', symbol: 'rect'},
            {gt: 1, lt: 2, color: '#FFE7CF', symbol: 'rect'},
            {lt: 1, color: '#FFF4EB'},
        ],
        itemWidth: 16,
        itemHeight: 12,
        itemGap: 0,
        text: ['1000','0'],
        inverse: true,
        min: 0,
        max: 10,
        seriesIndex: [0],
        orient: 'horizontal',
        left: '5%',
        bottom: '5%'
    }],
    legend: {
       data: [{
            name: '当前项目预算所在区间',
            icon: 'circle',
        }],
        orient: 'horizontal', 
        seriesIndex: [1],
        right: '30%',
        bottom: '5%',
        itemWidth: 15,
        itemHeight: 15,
        itemGap: 30,
        textStyle: {
            color: '#',
            fontSize: 16,
        },
    },
    series: [{
        name: '类似项目 Punch Card',
        type: 'heatmap',
        data: data,
        label: {
            show: false
        },
        itemStyle: {
           borderWidth: '2',
           borderColor: '#fff'
        },
        zlevel: 2,
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    },{
        name: '当前项目预算所在区间',
        type: 'scatter',
        color: '#2CB7CA',
        zlevel: 3,
        symbolSize: function (val) {
            return 15;
        },
       data: [
            [1,6,4]
        ]
    }]
};

常配合visualMap一起使用。基于热力图变形的有：热力地图、日历图等。

旭日图

旭日图是进化版的饼图，它不仅可以展示数据各项比重，还可以体现各项数据的层级关系。将它的series的type属性设置为sunburst即可。

如：

var data = [{
    name: 'Grandpa',
    children: [{
        name: 'Uncle Leo',
        value: 15,
        children: [{
            name: 'Cousin Jack',
            value: 2
        }, {
            name: 'Cousin Mary',
            value: 5,
            children: [{
                name: 'Jackson',
                value: 2
            }]
        }, {
            name: 'Cousin Ben',
            value: 4
        }]
    }, {
        name: 'Father',
        value: 10,
        children: [{
            name: 'Me',
            value: 5
        }, {
            name: 'Brother Peter',
            value: 1
        }]
    }]
}, {
    name: 'Nancy',
    children: [{
        name: 'Uncle Nike',
        children: [{
            name: 'Cousin Betty',
            value: 1
        }, {
            name: 'Cousin Jenny',
            value: 2
        }]
    }]
}];

option = {
    series: {
        type: 'sunburst',
        // emphasis: {
        //     focus: 'ancestor'
        // },
        data: data,
        radius: [0, '90%'],
        label: {
            rotate: 'radial'
        }
    }
};

常用配置参数

旭日图的data是一棵树哟，每一层基本都是由name、value、children构成，通过children来指示层级。旭日图配上emphasis的focus非常香。

旭日图的变形有：圆角旭日图、单色日爆图等。

桑基图

桑基图是用于表示能量分流的图表，也叫做桑基能量平衡图，每一个延伸的分支宽度代表了能量的大小，主要的特征是首末端的能量相等。将它的series的type设置为sankey即可。它的数据格式很像是关系图，data就像是节点，links就像边，不过边有权重，权重会变成边的宽度。

如：

option = {
    series: {
        type: 'sankey',
        layout: 'none',
        emphasis: {
            focus: 'adjacency'
        },
        // 节点
        data: [{
            name: 'a'
        }, {
            name: 'b'
        }, {
            name: 'a1'
        }, {
            name: 'a2'
        }, {
            name: 'b1'
        }, {
            name: 'c'
        }],
        // 关系
        links: [{
            source: 'a',
            target: 'a1',
            value: 5
        }, {
            source: 'a',
            target: 'a2',
            value: 3
        }, {
            source: 'b',
            target: 'b1',
            value: 8
        }, {
            source: 'a',
            target: 'b1',
            value: 3
        }, {
            source: 'b1',
            target: 'a1',
            value: 1
        }, {
            source: 'b1',
            target: 'c',
            value: 2
        }]
    }
};

桑基图默认是很朴素的，但是在官网和民间画廊中的桑基图都比较炫酷。

词云图

词云图是将文本的权重(重要程度)或频数数值作为文本的大小来呈现的文字图表，图表中全都是文字。只需要将series的type设置为wordCloud即可。

如：

let datas = [
        {name: "雨伞", value: 30},
        {name: "晴天", value: 28},
        {name: "电话", value: 24},
        {name: "手机", value: 23},
        {name: "下雨", value: 22},
        {name: "暴雨", value: 21},
        {name: "多云", value: 20},
        {name: "雨衣", value: 29},
        {name: "屋檐", value: 28},
        {name: "大风", value: 27},
        {name: "台风", value: 26},
        {name: "下雪", value: 25},
        {name: "打雷", value: 24},
        {name: "小雨", value: 30},
        {name: "中雨", value: 18},
        {name: "大雨", value: 14},
        {name: "雷阵雨", value: 13},
        {name: "下雪", value: 12},
        {name: "小雪", value: 11},
        {name: "中雪", value: 10},
        {name: "大雪", value: 9},
        {name: "暴雪", value: 8},
        {name: "东风", value: 7},
        {name: "南风", value: 6},
        {name: "西北风", value: 5},
        {name: "北风", value: 4},
        {name: "闪电", value: 3}
    ]

option = {
    tooltip: {
        show: true,
        position: 'top',
        textStyle: {
            fontSize: 30
        }
    },
    series: [{
        type: "wordCloud",
        // 网格大小，各项之间间距
        gridSize: 20,
        // 形状 circle 圆，cardioid  心， diamond 菱形，
        // triangle-forward 、triangle 三角，star五角星
        shape: 'circle',
        // 字体大小范围
        sizeRange: [20, 50],
        // 文字旋转角度范围
        rotationRange: [0, 90],
        // 旋转步值
        rotationStep: 90,
        // 自定义图形
        // maskImage: maskImage,
        left: 'center',
        top: 'center',
        right: null,
        bottom: null,
        // 画布宽
        width: '50%',
        // 画布高
        height: '50%',
        // 是否渲染超出画布的文字
        drawOutOfBound: false,
        textStyle: {
            normal: {
                color: function() {
                    return 'rgb(' + [
                        Math.round(Math.random() * 200 + 55),
                        Math.round(Math.random() * 200 + 55),
                        Math.round(Math.random() * 200 + 55)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac'
            }
        },
        data: datas
    }]
};

词云图搭配关键字排名，是比较炫酷的可视化效果。

树图

树图是常见的突出层级关系的图表，它可以包含大量的层级关系，父子关系、兄弟姊妹关系。只需要将它的series的type设置为tree即可。树图的数据结构层次很像是旭日图哟，也正如前面所说的，旭日图的data是一棵树嘞。

如：

const data = {
    name: 'flare'
};
data.children = [{
    "name": "flex",
    "children": [{
        "name": "FlareVis",
        "value": 4116
    }]
},
{
    "name": "display",
    "children": [{
        "name": "DirtySprite",
        "value": 8833
    },
    {
        "name": "LineSprite",
        "value": 1732
    },
    {
        "name": "RectSprite",
        "value": 3623
    },
    {
        "name": "TextSprite",
        "value": 10066
    }]
}];
data.children.forEach(function(datum, index) {
    index % 2 === 0 && (datum.collapsed = true);
});

option = {
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [{
        type: 'tree',

        data: [data],

        top: '1%',
        left: '7%',
        bottom: '1%',
        right: '20%',

        symbolSize: 7,

        label: {
            position: 'left',
            verticalAlign: 'middle',
            align: 'right',
            fontSize: 9
        },

        leaves: {
            label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
            }
        },

        emphasis: {
            focus: 'descendant'
        },

        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
    }]
}

树图的应用很常见，但Echarts的树图很普通，没见过什么好看的树图。但是矩形树图就很哇塞。

矩形树图

矩形树图是用于表示数据层级关系和数据的权重关系的图表，它是通过嵌套关系以及矩形大小来。它虽然叫矩形树图，但是展示上并不像树哟，只是数据结构的格式像树，作用和旭日图蛮像的。使用它的话只需要将series中的type设置为treemap。

如：

option = {
    series: [{
        type: 'treemap',
        data: [{
            name: 'nodeA',            // First tree
            value: 10,
            children: [{
                name: 'nodeAa',       // First leaf of first tree
                value: 4
            }, {
                name: 'nodeAb',       // Second leaf of first tree
                value: 6
            }]
        }, {
            name: 'nodeB',            // Second tree
            value: 20,
            children: [{
                name: 'nodeBa',       // Son of first tree
                value: 20,
                children: [{
                    name: 'nodeBa1',  // Granson of first tree
                    value: 20
                }]
            }]
        }]
    }]
};

矩形树图是一个比较有意思的图，我比较喜欢，比如你可以在官网示例中看到Echarts中看到所有配置项组成的矩形图

关系图

关系图是用于表示关系网络的图表，通常由两部分组成，节点和边，节点表示某类实体，实体与实体之间会用边来进行关联，关联之后就表示两个实体之间具有某种关系。使用它的话只需要将series的type设置为treemap即可。

如：

option = {
    title: {
        text: 'Graph 简单示例'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
        {
            type: 'graph',
            layout: 'none',
            symbolSize: 50,
            roam: true,
            label: {
                show: true
            },
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                fontSize: 20
            },
            data: [{
                name: '节点1',
                x: 300,
                y: 300
            }, {
                name: '节点2',
                x: 800,
                y: 300
            }, {
                name: '节点3',
                x: 550,
                y: 100
            }, {
                name: '节点4',
                x: 550,
                y: 500
            }],
            // links: [],
            links: [{
                source: 0,
                target: 1,
                symbolSize: [5, 20],
                label: {
                    show: true
                },
                lineStyle: {
                    width: 5,
                    curveness: 0.2
                }
            }, {
                source: '节点2',
                target: '节点1',
                label: {
                    show: true
                },
                lineStyle: {
                    curveness: 0.2
                }
            }, {
                source: '节点1',
                target: '节点3'
            }, {
                source: '节点2',
                target: '节点3'
            }, {
                source: '节点2',
                target: '节点4'
            }, {
                source: '节点1',
                target: '节点4'
            }],
            lineStyle: {
                opacity: 0.9,
                width: 2,
                curveness: 0
            }
        }
    ]
};

关系图很有意思哟，它多用于数据分析领域，并且它也支持可编辑功能，常见的流程图、类图、时序图也可以用它来实现哟。

Echart中的色彩搭配

echarts中的色彩搭配是一件很有意思的事情，有美感的人可以搭配出各种各样的图表皮肤，当然官方也提供了六套普通的皮肤哟，年代感 vintage、暗黑 drak、麦卡龙 macarons、信息图表 infographic、闪耀 shine、罗马 roma 风格，除了这些风格外，同时我们也可以自己去定制搭配。色彩主题的制定比较讲究哟，毕竟每个人的对场景的理解和审美都不太一样，用错场景的色彩主题，也许效果适得其反。可以多看看不同场景下的可视化色彩主题风格，这样你就有不少对可视化色彩主题风格的理解与感悟了。

定制搭配

在定制搭配界面，官方又给了我们十种默认的搭配方案哟，搭配的界面分为两个部分，分别是功能区和预览区。在功能区中可以调节可视化图表中系列的个数、也能设置echarts中许多配置，比如图例、工具箱、提示框等等。

操作和使用

通过在功能区去调节每一个配置项的数据，就能在右侧预览区看到相应的效果了。配置完毕后，有两种方式获取你配置的主题。

下载主题JSON：一个配置文件，需要你编写注册这套皮肤的代码。注册皮肤的原理是，echarts默认配置与这套皮肤的配置进行合并，合并后的配置就是你最终的echarts配置。
下载主题的js文件：这是一个带有注册这套皮肤代码的umd模块化的js文件，可以直接使用，原理同导出主题JSON一致。

导出主题JSON

导出主题的js文件

导入和导出主题编辑器的操作配置

注意哟，导出的配置并不能直接在Echarts中使用，只能在Echarts主题编辑器中使用，使用的方式就是导入配置。这个配置相当于保存了之前在这个主题编辑器中的操作数据，你可以反复导入导出，来多次编辑你自己定义的主题，让主题中的色彩搭配更加漂亮。

不同场景下的Dashboard 仪表板

可视化图表一般用于制作Dashboard(商业智能仪表盘)，它也可以叫做商业智能仪表板。主要用于呈现数据可视化效果，通过可视化的方式为企业和用户度量信息和关键业务指标，都是有一些关键指标和多张可视化图表构成。

比如DevOps(研发流程一体化)的仪表板，包括折线图、柱状图、雷达图、环形饼图等。我们可以很直观的看到一些工程数的信息，包括接入项目数、接入流水线数、接入工程数、以及构建频率趋势和部署频率随时间变化变化情况等。

Dashboard中的信息可以帮助企业和用户了解他们所关注的内容，辅助他们做出决策。比如电商销售情况的仪表板、车联网情况的仪表板、股票交易情况的仪表板等等。

DevOps(研发流程一体化)的仪表板

一个仪表板的设计，需要保证可用性、易用性、兼容性等。先考虑用户是否满足了需求，然后考虑用户是否能快速上手，最后考虑用户使用这个仪表板时是否流畅、是否能在多台设备上使用。

复杂场景下的可视化图表

一个复杂的可视化图表，一般都能拆分为三部分：数据准备部分、固定显示部分、动态数据显示部分。

数据准备部分：将数据过滤成该可视化图表支持的那种格式
固定显示部分：也就是可视化图表中固定的配置，这些配置带来的效果就是固定显示部分，比如坐标轴、图例、背景色、颜色、宽高、位置、悬浮提示、虚拟地图等等
动态数据显示部分：这部分数据是动态获取的，最终也会需要经过过滤，变成可视化图表支持的数据格式。

复杂场景下的可视化图表有时会使用到一些Echarts高级用法和快速开发工具，比如富文本、响应式自适应、事件行为、三维可视化、基于Echarts封装的更上一层的应用级框架V-charts等等等，这个我会尽快在下一篇Echarts类的文章中对它进行介绍。

我学会了，用Echarts

Echarts 香不香

简单的环境

Echarts 官方文档

Echarts 术语查询手册

小用一把

Echarts 常用

标题 title

提示框 tooltip

工具栏 toolbox

图例 legend

时间轴 timeline

数据区域缩放 dataZoom

网格 grid

坐标轴 xAxis和yAxis

数据系列 series

全局字体样式 textStyle

Echarts 可视化图

折线图

柱状图

饼图

散点图与气泡图

雷达图

漏斗图

仪表盘

箱线图(盒须图)

热力图

旭日图

桑基图

词云图

树图

矩形树图

关系图

Echart中的色彩搭配

定制搭配

操作和使用

导入和导出主题编辑器的操作配置

不同场景下的Dashboard 仪表板

DevOps(研发流程一体化)的仪表板

复杂场景下的可视化图表

热门文章

最新文章

相关电子书