ECharts 的初级使用(黑马程序员)

2301_80068547

1173人浏览 · 2023-12-09 01:12:07

2301_80068547 · 2023-12-09 01:12:07 发布

 数据可视化前言
 Echarts的基本使用
 Echarts的高级使用
 电商平台数据可视化实时监控系统
     + 后台搭建
     + 结合 Vue 开发图表组件
     + WebSocket实现数据推送
     + 主题切换\页面合并\全屏切换......

一、什么是数据可视化

把数据以更直观的形式 (图表) 展现

二、数据可视化的好处

清晰有效地传达与沟通信息

隐藏在数据中的信息

三、可视化的实现方式

报表类
- Excel
- 水晶报表
商业智能 BI
- Microsoft BI
- Power-BI
编码类
- Echarts.js
- D3.js

Echarts 的基本使用

 Echarts 的介绍
 Echarts 的快速入门
 Echarts 的常用图表

一、ECharts 的介绍

ECharts 是一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官方网址：Apache ECharts

二、ECharts 的基本使用

 步骤1：引入 echarts.js 文件
 步骤2：准备一个呈现图表的盒子
 步骤3：初始化echarts实例对象
 步骤4：准备配置项
 步骤5：将配置项设置给 echarts实例对象

 <!-- 步骤1：引入 echarts.js 文件 -->
 <script src="lib/echarts.min.js"></script>
 
 <!-- 步骤2：准备一个呈现图表的盒子 -->
 <div style="width: 600px; height: 400px"></div>
 
 <!-- 步骤3：初始化echarts实例对象 -->
 <script>
     // 参数，dom，决定图表最终呈现的位置
     var mCharts = echarts.init(document.querySelector('div'))
     // 步骤4：准备配置项
     var option = {
         xAxis: {
             type: 'category',
             data: ['小明', '小红', '小王']
         },
         yAxis: {
             type: 'value'
         },
         series: [
             {
                 name: '语文',
                 type: 'bar',
                 data: [70, 92, 87]
             }
         ]
     }
     // 步骤5：将配置项设置给 echarts实例对象
     mCharts.setOption(option)
 </script>

小结：

 快速上手 ECharts 的步骤
     + 引入
     + 准备
     + 设置
 配置项的使用：
     + 除了配置项会变化以外，其他的代码都是固定的
     + 配置项的学习和使用应该参照官方文档和示例
     + https://echarts.apache.org/zh/api.html#title

相关配置项讲解

 xAxis: 直角坐标系中的 x 轴
 yAxis: 直角坐标系中的 y 轴
 series: 系列列表。每个系列通过 type 决定自己的图表类型

  var option = {
         xAxis: {
             type: 'category',   // 类目轴
             data: ['小明', '小红', '小王']
         },
         yAxis: {
             type: 'value'   // 数值轴
         },
         series: [
             {
                 name: '语文',
                 type: 'bar',    // 柱状图(决定图表类型)
                 data: [70, 92, 87]
             }
         ]
     }

ECharts 的常用图表

7大图表：

柱状图

实现步骤：

ECharts 最基本的代码结构：
     引入 js 文件，DOM容器，初始化对象，设置 option
 x 轴数据：
     数组1: ['张三'，'李四'...]
 y 轴数据：
     数组2: [88,92 ...]
 图表类型：
     在series下设置 type: bar

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

一、常见效果

标记：最大值、最小值、平均值
	markPoint(最大值、最小值)
	markLine(平均值)
显示：数值显示	柱宽度 横向柱状图
	label、barWidth、

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

横向柱形图 (将x轴的内容与y轴互换)

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'value'

        },
        yAxis: {
            type: 'category',
            data: xDataArr
        },
        series: [
            {
                name: '语文',
                type: 'bar'
            }
        ]
    }
    mCharts.setOption(option)
</script>

二、通用的配置

通用的配置指的就是任何图表都能使用的配置

标题：title
提示：tootile
工具按钮：toolbox
图例：legend

通用配置 title

文字样式

textStyle

标题边框

borderWidth、borderColor、borderRadius
标题位置

left、top、right、bottom

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        title: {
            text: '成绩展示',
            // 文字样式
            textStyle: {
                color: 'red'
            },
            // 标题边框
            borderWidth: 2,
            borderColor: 'blue',
            borderRadius: 5,
            // 标题位置
            left: '40 %',
            top: 0
        },
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

通用配置 tooltip

tooltip：提示框组件，用于配置鼠标滑过或点击图表时的显示框

触发类型：trigger

item、axis
触发时机：triggerOn

mouserover、click
格式化：formatter

字符串模板、回调函数

字符串模板：Documentation - Apache ECharts

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：


    折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

    散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

    地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

    饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        title: {
            text: '成绩展示',
            textStyle: {
                color: 'red'
            },
            borderWidth: 2,
            borderColor: 'blue',
            borderRadius: 5,
            left: '40 %',
            top: 0
        },
        // 提示框
        tooltip: {
            // item 一定要把鼠标移入柱的内部
            // axis 移入到轴中即可

            // trigger: 'item'
            trigger: 'axis',
            // 鼠标点击出现提示框
            triggerOn: 'click',    // 默认，鼠标经过
            // formatter: '{b}的成绩是 {c}' (模板字符串)
            // 回调函数
            formatter: function (arg) {
                return arg[0].name + '的分数是' + arg[0].data
            }
        },

        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
				data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

通用配置 toolbox

toolbox: ECharts提供的工具栏

内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        title: {
            text: '成绩展示',
            textStyle: {
                color: 'red'
            },
            borderWidth: 2,
            borderColor: 'blue',
            borderRadius: 5,
            left: '40 %',
            top: 0
        },
        toolbox: {
            feature: {
                // 导出图片
                saveAsImage: {},
                // 数据试图
                dataView: {},
                // 重置
                restore: {},
                // 区域缩放
                dataZoom: {},
                // 动态切换图表类型
                magicType: {
                    type: ['bar', 'line']
                }
            }
        },

        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

通用配置 legend

legend：图例，用于筛选系列，需要和 series 配合使用

legend 中的data 是一个数组
legend 中的 data的值需要和 series 数组中某组数据的 name 值一致

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr1 = [70, 92, 87, 64, 67, 75, 86, 93]
    var yDataArr2 = [69, 68, 56, 64, 67, 71, 69, 91]
    var option = {
        // 图例, 用于筛选系列
        legend: {
            data: ['语文', '数学']
        },
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr1
            },
            {
                name: '数学',
                type: 'bar',
                data: yDataArr2
            }
        ]
    }
    mCharts.setOption(option)
</script>

折线图

折线图常用来分析数据随时间的变化趋势。

实现步骤：

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
x 轴数据：
	+ 数组1: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
y 轴数据
	+ 数组2: [3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]
图表类型：
	在series 下设置 type: line

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'line',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

常见效果

标记：最大值、最小值、平均值、标注区间
	markPoint(最大值、最小值)
	markLine(平均值)
	markArea(标准区间)
线条控制：平滑 风格
	smooth、lineStyle
填充风格
	areaStyle
紧挨边缘
	boundaryGap
缩放：脱离 0 值比例
	scale
堆叠图

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            // 紧挨边缘
            boundaryGap: false

        },
        yAxis: {
            type: 'value',
            // 脱离 0 值比例(从最小值开始)
            scale: true
        },
        series: [
            {
                type: 'line',
                data: yDataArr,
                // 最大值、最小值
                markPoint: {
                    data: [
                        {
                            type: 'max'
                        },
                        {
                            type: 'min'
                        }
                    ]
                },
                // 平均值
                markLine: {
                    data: [
                        {
                            type: 'average'
                        }
                    ]
                },
                // 标注区间
                markArea: {
                    data: [
                        [
                            {
                                xAxis: '1月'
                            },
                            {
                                xAxis: '2月'
                            }
                        ],
                        [
                            {
                                xAxis: '7月'
                            },
                            {
                                xAxis: '8月'
                            }
                        ]
                    ]
                },
                // 线条平滑
                smooth: true,
                // 改变线条风格
                lineStyle: {
                    color: 'green',
                    type: 'dashed'  // dotted(点线)、solid(实线)
                },
                // 填充风格
                areaStyle: {
                    color: 'pink'
                }
            }
        ]
    }
    mCharts.setOption(option)
</script>

堆叠图 (第二个图是堆叠在第一个的上面)

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
    var yDataArr2 = [2000, 3800, 1900, 500, 900, 1700, 2400, 300, 1900, 1500, 1800, 200]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            // 紧挨边缘
            boundaryGap: false

        },
        yAxis: {
            type: 'value',
            // 脱离 0 值比例(从最小值开始)
            scale: true
        },
        series: [
            {
                type: 'line',
                data: yDataArr,
                // 实现堆叠图
                stack: 'all'
            },
            {
                type: 'line',
                data: yDataArr2,
                // 实现堆叠图
                stack: 'all'

            }
        ]
    }
    mCharts.setOption(option)
</script>

散点图

散点图 可以帮助我们推断出变量的相关性。

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
x 轴数据和y轴的数据：二维数组
	数组1: [[身高1,体重1],[身高2,体重2],[身高3,体重3]...]
图表类型：
	在 series 下设置 type: scatter
	xAxis 和 yAxis的type都要设置为value
调整：
	将坐标轴都设置为脱离0值比例，scale

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

<div style="width: 600px; height: 400px"></div>

<script>
    var data = [
        { "gender": "male", "height": 137, "weight": 99 },
        { "gender": "male", "height": 183, "weight": 100 },
        { "gender": "fmale", "height": 173, "weight": 110 },
        { "gender": "male", "height": 183, "weight": 120 },
        { "gender": "male", "height": 163, "weight": 140 },
        { "gender": "fmale", "height": 183, "weight": 120 },
        { "gender": "male", "height": 133, "weight": 130 },
        { "gender": "male", "height": 183, "weight": 150 },
        { "gender": "fmale", "height": 173, "weight": 120 },
        { "gender": "male", "height": 183, "weight": 180 },
        { "gender": "male", "height": 168, "weight": 120 },
        { "gender": "fmale", "height": 171, "weight": 120 },
        { "gender": "male", "height": 183, "weight": 120 },
        { "gender": "fmale", "height": 183, "weight": 140 },
        { "gender": "male", "height": 150, "weight": 120 },
        { "gender": "fmale", "height": 177, "weight": 160 },
        { "gender": "male", "height": 183, "weight": 120 },
        { "gender": "fmale", "height": 146, "weight": 170 },
        { "gender": "male", "height": 183, "weight": 120 },
        { "gender": "fmale", "height": 183, "weight": 130 }
    ]
    var axisData = []
    for (var i = 0; i < data.length; i++) {
        var height = data[i].height
        var weight = data[i].weight
        var newArr = [height, weight]
        axisData.push(newArr)
    }
    console.log(axisData);
    var mCharts = echarts.init(document.querySelector('div'))

    var option = {
        xAxis: {
            type: 'value',
            // 脱离0值比例
            scale: true
        },
        yAxis: {
            type: 'value',
            // 脱离0值比例
            scale: true
        },
        series: [
            {
                type: 'scatter',
                data: axisData,
            }
        ]
    }
    mCharts.setOption(option)
</script>

常见效果

气泡图效果

散点的大小不同 symbolSize

散点的颜色不同 itemStyle。color
涟漪动画效果

type: effectScatter

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

<div style="width: 600px; height: 400px"></div>

<script>
    var data = [
        { "gender": "male", "height": 137, "weight": 99 },
        { "gender": "male", "height": 183, "weight": 100 },
        { "gender": "fmale", "height": 173, "weight": 110 },
        { "gender": "male", "height": 183, "weight": 80 },
        { "gender": "male", "height": 163, "weight": 140 },
        { "gender": "fmale", "height": 183, "weight": 120 },
        { "gender": "male", "height": 163, "weight": 90 },
        { "gender": "male", "height": 183, "weight": 150 },
        { "gender": "fmale", "height": 173, "weight": 110 },
        { "gender": "male", "height": 183, "weight": 180 },
        { "gender": "male", "height": 168, "weight": 120 },
        { "gender": "fmale", "height": 171, "weight": 120 },
        { "gender": "male", "height": 183, "weight": 91 },
        { "gender": "fmale", "height": 183, "weight": 140 },
        { "gender": "male", "height": 150, "weight": 120 },
        { "gender": "fmale", "height": 177, "weight": 101 },
        { "gender": "male", "height": 183, "weight": 120 },
        { "gender": "fmale", "height": 146, "weight": 100 },
        { "gender": "male", "height": 183, "weight": 105 },
        { "gender": "fmale", "height": 183, "weight": 150 }
    ]
    var axisData = []
    for (var i = 0; i < data.length; i++) {
        var height = data[i].height
        var weight = data[i].weight
        var newArr = [height, weight]
        axisData.push(newArr)
    }
    console.log(axisData);
    var mCharts = echarts.init(document.querySelector('div'))

    var option = {
        xAxis: {
            type: 'value',
            scale: true
        },
        yAxis: {
            type: 'value',
            scale: true
        },
        series: [
            {
                // type: 'scatter', 散点图
                type: 'effectScatter',  // 散点图涟漪动画
                showEffectOn: 'emphasis',   // render,emphasis(鼠标移入展示)
                rippleEffect: {     // 控制涟漪动画的范围大小
                    scale: 5
                },
                data: axisData,
                // 修改散点的大小
                // symbolSize: 10
                SymbolSize: function (arg) {
                    var height = arg[0] / 100
                    var weight = arg[1]
                    // bmi = 体重kg / (身高m*身高m) 大于28，就代表肥胖
                    var bmi = weight / (height * height)
                    if (bmi > 28) {
                        return 20
                    }
                    return 5
                },
                // 修改散点的颜色
                itemStyle: {
                    color: function (arg) {
                        var height = arg.data[0] / 100
                        var weight = arg.data[1]
                        // bmi = 体重kg / (身高m*身高m) 大于28，就代表肥胖
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return 'blue'
                        }
                        return 'green'

                    }
                }
            }
        ]
    }
    mCharts.setOption(option)
</script>

直角坐标系中的常用配置

直角坐标系图表： 柱状图、折线图、散点图

配置1：网格 grid
配置2：坐标轴 axis
配置3：区域缩放 dataZoom

一、网格 grid

grid 是用来控制直角坐标系的布局和大小

x 轴和 y轴就是在 grid 的基础上进行绘制的

显示 grid

show
grid的边框

borderWidth、borderColor
grid的位置和大小

left、top、right、bottom

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        // 显示网格
        grid: {
            show: true,
            // 网格粗细
            borderWidth: 2,
            // 网格颜色
            borderColor: 'red',
            // 改变边框位置
            left: 120,
            top: 120,
            // 改变图表大小
            width: 150
        },
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

二、坐标轴 axis

坐标轴分为 x轴和 y轴

一个 grid 中最多有两种位置的 x轴和 y轴

坐标类型 type

value：数值轴，自动会从目标数据中读取数据

category：类目轴，该类型必须通过 data 设置类目数据

xAxis: {
            type: 'category',
            data: xDataArr,
            // 紧挨边缘
            boundaryGap: false

        },
        yAxis: {
            type: 'value',
            // 脱离 0 值比例(从最小值开始)
            scale: true
        },
        series: [
            {
                type: 'line',
                data: yDataArr,
                // 实现堆叠图
                stack: 'all'
            },

显示位置 postion

xAxis：可取值为 top 或者 bottom

yAxis：可取值为 left 或者 right

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr,
            position: 'top'
        },
        yAxis: {
            type: 'value',
            position: 'right'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

三、区域缩放 dataZoom

dataZoom 用于区域缩放，对数据范围过滤，x轴和 y轴都可以拥有

dataZoom 是一个数组，意味着可以配置多个区域缩放器

类型 type

slider：滑块

inside：内置，依靠鼠标滚轮或者双指缩放
指明产生作用的轴

xAxisIndex：设置缩放组件控制的是哪个 x轴，一般写 0 即可

yAxisIndex：设置缩放组件控制的是哪个 y轴，一般写 0 即可
指明初始状态的缩放情况

start：数据窗口范围的起始百分比

end：数据窗口范围的结束百分比

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        // 区域缩放
        dataZoom: [
            {
                // 滑块  
                type: 'slider',
                // 滚轮  type: 'inside'
                xAxisIndex: 0
            },
            {
                type: 'slider',
                yAxisIndex: 0,
                // 指明初始状态的缩放情况
                start: 0,
                end: 50
            }
        ],
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

饼图

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
数据准备: {name: "淘宝",value: 11231}
		{name: "京东",value: 22673}
		{name: "唯品会",value: 6123}
		{name: "1号店",value: 8989}
		{name: "聚美优品",value: 6700}
图表类型:
	在series 下设置 type: pie

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
</script>

常见效果

显示数值
```
label.formatter
```
圆环

设置两个半径 radius: ['50%' , '75%']
南丁格尔图

选中效果

选中模式：selectedMode：single\multiple

选中偏移量：selecteOffset: 30

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData,
                label: {
                    // 饼图文字的显示
                    show: true,  // 默认
                    //  formatter: 'hehe'  // 决定文字显示的内容
                    formatter: function (arg) {
                        return arg.name + '平台' + arg.value +
                            '元\n' + '占' + arg.percent + '%'
                    }
                },
                // radius: 20,  // 饼图的半径
                // 百分比参照的是容器宽度和高度中较小的那一部分的一半，最终结果就是 200*20%
                // radius: '20%',  // 参照容器的大小 
                // 第0个元素代表的是内圆的半径，第1个元素是外圆的半径  
                // radius: ['50%', '75%'],
                roseType: 'radius',  // 南丁格尔图,饼图的每个区域的半径是不同的
                // single 选中的效果，能够将选中的区域偏离圆点一小段距离(只能一个)
                selectedMode: 'multiple',  // multiple (和single一样，但是可以选多个)
                selecteOffset: 30   // 偏移距离
            }
        ]
    }
    mCharts.setOption(option)
</script>

地图

地图图表的使用方式

百度地图 API

需要申请百度地图的 ak
矢量地图

需要准备矢量地图数据

矢量地图的实现步骤：

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
准备中国矢量地图 json文件，放到 json/map/的目录下
	china.json
使用 Ajax获取china.json
	$.get('json/map/china.json',function(chinaJson) {})
在回调函数中往echarts全局对象注册地图的 json 数据
	echarts.registerMap('chinaMap','chinaJson');
在geo下设置
	type: 'map'
	map: 'chinaMap'

常用配置

缩放拖动：

roam
名称显示

label
初始化缩放比例

zoom
地图中心点

center

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>

<div style="width: 600px; height: 400px;border: 1px solid #f00"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (ret) {
        // console.log(ret);
        echarts.registerMap('chinaMap', ret)
        var option = {
            geo: {
                type: 'map',
                // chinaMap 需要和 registerMap 中的第一个参数保持一致
                map: 'chinaMap',
                // 缩放拖动
                roam: true,
                // 展示标签
                label: {
                    show: true
                },
                // 初始化的缩放比例
                zoom: 2,
                // 设置地图中心的坐标
                center: [87.617733, 43.792818]
            }
        }
        mCharts.setOption(option)
    })
</script>

常见效果

显示某个区域

加载该区域的矢量地图数据
通过registerMap注册到echarts全局对象中
指明geo配置下的type和map属性
通过zoom放大该区域
通过center定位中心点

不同的城市显示不同颜色

显示基本的中国地图
城市的空气质量数据设置给 series
将 series下的数据和 geo关联起来
	geoIndex: 0、type: 'map'
结合 visualMap 配合使用
	min
	max
	inRange
	calculable

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>

<div style="width: 600px; height: 400px;border: 1px solid #f00"></div>

<script>
    var airData = [
        { name: '北京', value: 39.2 },
        { name: '天津', value: 32.1 },
        { name: '河北', value: 54.8 },
        { name: '山西', value: 42.5 },
        { name: '内蒙古', value: 35.6 },
        { name: '辽宁', value: 46.3 },
        { name: '吉林', value: 31.7 },
        { name: '黑龙江', value: 28.4 },
        { name: '上海', value: 45.2 },
        { name: '江苏', value: 49.6 },
        { name: '浙江', value: 58.7 },
        { name: '安徽', value: 60.8 },
        { name: '福建', value: 41.9 },
        { name: '江西', value: 50.3 },
        { name: '山东', value: 52.7 },
        { name: '河南', value: 56.4 },
        { name: '湖北', value: 62.5 },
        { name: '湖南', value: 44.2 },
        { name: '广东', value: 66.7 },
        { name: '广西', value: 51.5 },
        { name: '海南', value: 49.8 },
        { name: '重庆', value: 40.1 },
        { name: '四川', value: 66.2 },
        { name: '贵州', value: 57.3 },
        { name: '云南', value: 52.6 },
        { name: '西藏', value: 30.6 },
        { name: '陕西', value: 45.9 },
        { name: '甘肃', value: 39.8 },
        { name: '青海', value: 32.5 },
        { name: '宁夏', value: 29.3 },
        { name: '新疆', value: 23.7 },
        { name: '台湾', value: 26.4 },
        { name: '香港', value: 35.2 },
        { name: '澳门', value: 31.9 },
        { name: '南海诸岛', value: 55 }
    ]
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (ret) {
        console.log(ret);
        echarts.registerMap('chinaMap', ret)
        var option = {
            geo: {
                type: 'map',
                map: 'chinaMap',
                roam: true
            },
            series: [
                {
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                },
            ],
            visualMap: {
                min: 0,
                max: 80,
                inRange: {
                    color: ['white', 'red'] // 控制颜色渐变的范围
                },
                // 出现滑块
                calculable: true
            }
        }
        mCharts.setOption(option)
    })
</script>

地图和散点图结合

给 series 下增加新的对象
准备好散点数据，设置给新对象的 data
配置新对象的 type
	 type: 'effectScatter'
让散点图使用地图坐标系统
	coordinateSystem: 'geo',
让涟漪的效果更加明显
    rippleEffect: {
        scale: 10
    }

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>

<div style="width: 600px; height: 400px;border: 1px solid #f00"></div>

<script>
    var airData = [
        { name: '北京', value: 39.2 },
        { name: '天津', value: 32.1 },
        { name: '河北', value: 54.8 },
        { name: '山西', value: 42.5 },
        { name: '内蒙古', value: 35.6 },
        { name: '辽宁', value: 46.3 },
        { name: '吉林', value: 31.7 },
        { name: '黑龙江', value: 28.4 },
        { name: '上海', value: 45.2 },
        { name: '江苏', value: 49.6 },
        { name: '浙江', value: 58.7 },
        { name: '安徽', value: 60.8 },
        { name: '福建', value: 41.9 },
        { name: '江西', value: 50.3 },
        { name: '山东', value: 52.7 },
        { name: '河南', value: 56.4 },
        { name: '湖北', value: 62.5 },
        { name: '湖南', value: 44.2 },
        { name: '广东', value: 66.7 },
        { name: '广西', value: 51.5 },
        { name: '海南', value: 49.8 },
        { name: '重庆', value: 40.1 },
        { name: '四川', value: 66.2 },
        { name: '贵州', value: 57.3 },
        { name: '云南', value: 52.6 },
        { name: '西藏', value: 30.6 },
        { name: '陕西', value: 45.9 },
        { name: '甘肃', value: 39.8 },
        { name: '青海', value: 32.5 },
        { name: '宁夏', value: 29.3 },
        { name: '新疆', value: 23.7 },
        { name: '台湾', value: 26.4 },
        { name: '香港', value: 35.2 },
        { name: '澳门', value: 31.9 },
        { name: '南海诸岛', value: 55 }
    ]
    var scatterData = [
        {
            value: [116.405285, 39.904989]
        }
    ]
    var mCharts = echarts.init(document.querySelector('div'))
    $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (ret) {
        console.log(ret);
        echarts.registerMap('chinaMap', ret)
        var option = {
            geo: {
                type: 'map',
                map: 'chinaMap',
                roam: true
            },
            series: [
                {
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                },
                {
                    data: scatterData,  // 配置散点的坐标数据
                    type: 'effectScatter',
                    // 让散点图使用地图坐标系统
                    coordinateSystem: 'geo',
                    // 设置涟漪动画的缩放比例
                    rippleEffect: {
                        scale: 10
                    }
                }
            ],
            visualMap: {
                min: 0,
                max: 80,
                inRange: {
                    color: ['white', 'red'] // 控制颜色渐变的范围
                },
                // 出现滑块
                calculable: true
            }
        }
        mCharts.setOption(option)
    })
</script>

雷达图

实现步骤：

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
定义各个维度的最大值,通过 radar属性配置
	indicator: [ {name: '易用性', max: 100 }, ......]
准备具体产品的数据
data: [ {name: '华为数据1', value: [80,90,80,82,90]}，......]
图表类型：
	在 series 下设置 type: radar

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    // 定义各个维度的最大值
    var dataMax = [
        {
            name: '易用性',
            max: 100
        },
        {
            name: '功能',
            max: 100
        },
        {
            name: '拍照',
            max: 100
        },
        {
            name: '跑分',
            max: 100
        },
        {
            name: '续航',
            max: 100
        }
    ]
    var option = {
        // 通过 radar属性配置
        radar: {
            indicator: dataMax
        },
        //  准备具体产品的数据
        series: [
            {
                type: 'radar',  // 此图表是一个雷达图
                data: [
                    {
                        name: '华为手机1',
                        value: [80, 90, 80, 82, 90]
                    },
                    {
                        name: '中兴手机1',
                        value: [70, 82, 75, 70, 78]
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
</script>

常用配置：

显示数值：

label
区域面积

areaStyle
绘制类型

shape

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    // 定义各个维度的最大值
    var dataMax = [
        {
            name: '易用性',
            max: 100
        },
        {
            name: '功能',
            max: 100
        },
        {
            name: '拍照',
            max: 100
        },
        {
            name: '跑分',
            max: 100
        },
        {
            name: '续航',
            max: 100
        }
    ]
    var option = {
        // 通过 radar属性配置
        radar: {
            indicator: dataMax,
            // 配置雷达图最外层的图形 polygon(默认)、circle
            shape: 'circle'
        },
        //  准备具体产品的数据
        series: [
            {
                type: 'radar',  // 此图表是一个雷达图
                label: {
                    show: true  // 显示数值
                },
                // 将每一个产品的雷达图形成一个阴影的面积
                areaStyle: {},
                data: [
                    {
                        name: '华为手机1',
                        value: [80, 90, 80, 82, 90]
                    },
                    {
                        name: '中兴手机1',
                        value: [70, 82, 75, 70, 78]
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
</script>

雷达图的特点

雷达图可以用来分析多个维度的数据与标准数据的对比情况

仪表盘图

仪表盘主要用在进度把控以及数据范围的监测

实现步骤：

ECharts 最基本的代码结构	
	+ 引入 js 文件，DOM容器，初始化对象，设置 option
准备数据，设置给 series 下的data
	data: [{ value: 97 }]
图表类型
	在series下设置 type: gauge

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var option = {
        series: [
            {
                type: 'gauge',
                data: [
                    // 每一个对象就代表一个指针
                    {
                        value: 97
                    }
                ]
            }
        ]
    }
    mCharts.setOption(option)
</script>

常用效果：

数值范围：

max，min
多个指针

增加 data 中的数组元素
多个指针颜色差异

itemStyle

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var option = {
        series: [
            {
                type: 'gauge',
                data: [
                    // 每一个对象就代表一个指针
                    {
                        value: 97,
                        itemStyle: {    // 指针的样式
                            color: 'pink'   // 指针的颜色
                        }
                    },
                    {
                        value: 85,
                        itemStyle: {
                            color: 'green'
                        }
                    }
                ],
                min: 50    // min，max控制仪表盘数值范围
            }
        ]
    }
    mCharts.setOption(option)
</script>

ECharts基础小结：

ECharts 的高级使用

显示相关
动画的使用
交互API

显示相关

主题
调色板
样式
自适应

一、主题

内置主题

ECharts 中默认内置了两套主题：light、dark
在初始化对象方法 init 中可以指明

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

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

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

<div style="width: 600px; height: 400px"></div>

<script>
    // init 方法有两个参数，第一个参数代表是一个 dom节点，第二个参数代表你需要哪一套主题
    // 默认内置了两套主题，light、dark
    var mCharts = echarts.init(document.querySelector('div'),'dark')	
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        title: {
            text: '成绩展示',
            // 文字样式
            textStyle: {
                color: 'red'
            },
            // 标题边框
            borderWidth: 2,
            borderColor: 'blue',
            borderRadius: 5,
            // 标题位置
            left: '40 %',
            top: 0
        },
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

自定义主题

在主题编辑器中编辑主题 Apache ECharts

下载主题，是一个 js 文件

引入主题 js 文件

<script src="theme/vintage.js"></script>

在init 方法中使用主题

<script src="lib/echarts.min.js"></script>
<script src="theme/vintage.js"></script>

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'), 'vintage')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        title: {
            text: '成绩展示',
            // 文字样式
            textStyle: {
                color: 'red'
            },
            // 标题边框
            borderWidth: 2,
            borderColor: 'blue',
            borderRadius: 5,
            // 标题位置
            left: '40 %',
            top: 0
        },
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

命名的关键在于引入的js文件里面的

二、调色盘

它是一组颜色，图形、系列会自动从其中选择颜色。

调色盘 的作用遵循就近原则

主题调色盘

<script src="lib/echarts.min.js"></script>
<script src="theme/vintage.js"></script>

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'), 'vintage')
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
</script>

全局调色盘

option: {
	color: ['red','green','blue',],
}

<script src="lib/echarts.min.js"></script>
<script src="theme/vintage.js"></script>

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'), 'vintage')
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        // 全局调色盘
        color: ['red', 'green', 'blue', 'skyblue', 'purple'],
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
</script>

局部调色盘：

series:[{
	type: 'bar',
	color: ['red','green','blue'],
}]

<script src="lib/echarts.min.js"></script>
<script src="theme/vintage.js"></script>

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'), 'vintage')
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        // 全局调色盘
        color: ['red', 'green', 'blue', 'skyblue', 'purple'],
        series: [
            {
                type: 'pie',
                data: pieData,
                color: ['pink', 'yellow', 'black', 'orange', 'red']
            }
        ]
    }
    mCharts.setOption(option)
</script>

三、颜色渐变

线性渐变

itemStyle: {
	color: {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [{
			offset: 0,color: 'red'	// 0% 处的颜色
		},
		{
			offset: 1,color: 'blue'	// 100% 处的颜色
		}],
		globalCoord: false	// 缺省为 false
	}
}

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'red'	// 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'blue'	// 100% 处的颜色
                        }],
                        globalCoord: false	// 缺省为 false
                    }
                }
            }
        ]
    }
    mCharts.setOption(option)
</script>

经向渐变

itemStyle: {
	color: {
		type: 'radial',
		x: 0.5,
		y: 0.5,
		r: 0.5,
		colorStops: [{
			offset: 0,color: 'red'	// 0% 处的颜色
		},
		{
			offset: 1,color: 'blue'	// 100% 处的颜色
		}],
		globalCoord: false	// 缺省为 false
	}
}

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                type: 'bar',
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.5,
                        colorStops: [{
                            offset: 0, color: 'red'	// 0% 处的颜色
                        },
                        {
                            offset: 1, color: 'blue'	// 100% 处的颜色
                        }],
                        globalCoord: false	// 缺省为 false
                    }
                }
            }
        ]
    }
    mCharts.setOption(option)
</script>

四、样式

优先级高，会覆盖主题中、调色盘的效果

直接样式

itemStyle、textStyle、lineStyle、areaStyle、label

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        {
            name: '淘宝', value: 11231, itemStyle: {
                // 控制淘宝这一区域的样式
                color: 'yellow'
            },
            label: {
                color: 'green'
            }
        },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        title: {
            text: '饼图测试',
            textStyle: {
                // 控制标题的文字样式
                color: 'blue'
            }
        },
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
</script>

高亮样式

在 emphasis 中包裹 itemStyle、textStyle、lineStyle、areaStyle、label

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

<div style="width: 600px; height: 400px"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        {
            name: '淘宝', value: 11231, emphasis: {
                itemStyle: {
                    color: 'pink'
                }
            }
        },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
</script>

五、自适应

当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化

监听窗口大小变化的事件
在事件处理函数中调用 ECharts 实例对象的 resize 即可

window.onresize = function() {
	mCharts.resize();
}
// 另一种简便方法
window.onresize = mCharts.resize

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

<div style="height: 400px;border: 1px solid #f00"></div>

<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
    /* 监听 window 窗口大小变化的事件
        window.onresize = function () {
            mCharts.resize();
        }*/
    // 另一种方法
    window.onresize = mCharts.resize
</script>

动画的使用

一、加载动画

ECharts 已经内置好了加载数据的动画，我们只需要在合适的时机显示或者隐藏即可

显示加载动画

mCharts.showLoading()	// 获取数据之前 (合适的时机)

隐藏加载动画

mCharts.hideLoading()	// 获取到数据之后 (合适的时机)

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    mCharts.showLoading()   // 在获取数据之前，显示加载动画
    $.get('data/test_data.json', function (ret) {
        mCharts.hideLoading()   // 当服务器数据获取成功之后，隐藏加载动画
        var axisData = []
        for (var i = 0; i < ret.length; i++) {
            var height = ret[i].height
            var weight = ret[i].weight
            var newArr = [height, weight]
            axisData.push(newArr)
        }
        console.log(axisData);
        var option = {
            xAxis: {
                type: 'value',
                // 脱离0值比例
                scale: true
            },
            yAxis: {
                type: 'value',
                // 脱离0值比例
                scale: true
            },
            series: [
                {
                    type: 'effectScatter',
                    data: axisData,
                    symbolSize: function (arg) {
                        var weight = arg[1]
                        var height = arg[0] / 100
                        var bmi = weight / (height * height)
                        if (bmi > 28) {
                            return 20
                        }
                        return 5
                    },
                    // 修改散点的颜色
                    itemStyle: {
                        color: function (arg) {
                            var height = arg.data[0] / 100
                            var weight = arg.data[1]
                            // bmi = 体重kg / (身高m*身高m) 大于28，就代表肥胖
                            var bmi = weight / (height * height)
                            if (bmi > 28) {
                                return 'blue'
                            }
                            return 'green'
                        }
                    },
                    showEffectOn: 'emphasis',
                    rippleEffect: {
                        scale: 10
                    }
                }
            ]
        };
        mCharts.setOption(option)
    })
</script>

二、增量动画

增量动画的实现方式

mCharts.setOption

所有数据的更新都通过 setOption 实现

不用考虑数据到底产生了哪些变化

ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

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

<div style="width: 600px; height: 400px"></div>
<button id="modify">修改数据</button>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
    var btnModify = document.querySelector('#modify')
    btnModify.onclick = function () {
        var newYDataArr = [68, 32, 99, 64, 67, 75, 86, 93]
        // setOption 可以设置多次
        // 新的 option 和 旧的 option
        // 新旧 option 的关系并不是相互覆盖的关系，是相互整合的
        // 我们在设置新的 option 的时候，只需要考虑到变化的部分就可以了
        var option = {
            series: [
                {
                    data: newYDataArr
                }
            ]
        }
        mCharts.setOption(option)
    }
</script>

三、动画的配置

动画配置项

开启动画

animation: true

动画时长

animationDuration: 5000

缓动动画

animationEasing: 'bounceOut'

动画阈值

单种形式的元素数量大于这个阈值时会关闭动画

animationThreshold: 8

<script src="lib/echarts.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        // 控制动画是否开启，默认开启   false 表示关闭
        animation: true,
        // 动画的时长，它是以毫秒为单位
        // animationDuration: 5000,
        animationDuration: function (arg) {
            console.log(arg);
            return 2000 * arg
        },
        animationEasing: 'bounceOut',
        animationThreshold: 8,
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)
</script>

交互 API

一、全局 echarts 对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

常见方法：

init
registerTheme
registerMap
connect

init方法

初始化 ECharts 实例对象
使用主题

registerTheme方法

注册主题

registerMap方法

注册地图数据

$.get('json/map/china.json',function(chinaJson){
	echarts.registerMap('china',chinaJson);
});

geo 组件使用地图数据

var option = {
	geo: {
		type: 'map',
		map: 'china',
	},
}

connect 方法

一个页面中可以有多个独立的图表

每一个图表对应一个ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 ECharts 实例对象，支持数组。

保存图片的自拼接
刷线按钮
重置按钮
提示框联动、图例选择、数据范围修改等......

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>
<div id="div1" style="width: 600px; height: 400px; border: 1px solid red"></div>
<div id="div2" style="width: 600px; height: 400px; border: 1px solid green"></div>
<script>
    var mCharts = echarts.init(document.querySelector('#div1'))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二牛', '大强']
    var yDataArr = [70, 92, 87, 64, 67, 75, 86, 93]
    var option = {
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '语文',
                type: 'bar',
                // 最大值、最小值展示
                markPoint: {
                    data: [
                        {
                            type: 'max', name: '最大值',
                        },
                        {
                            type: 'min', name: '最小值'
                        }
                    ]
                },
                // 展现平均值
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                // 数值显示
                label: {
                    show: true,
                    // 旋转60°
                    rotate: 60,
                    position: 'inside'	// 默认，数值显示在柱的内部
                },
                // 柱宽度
                barWidth: '30%',
                data: yDataArr
            }
        ]
    }
    mCharts.setOption(option)

    var mCharts2 = echarts.init(document.querySelector('#div2'))
    $.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (ret) {
        // console.log(ret);
        echarts.registerMap('chinaMap', ret)
        var option2 = {
            geo: {
                type: 'map',
                // chinaMap 需要和 registerMap 中的第一个参数保持一致
                map: 'chinaMap',
                // 缩放拖动
                roam: true,
                // 展示标签
                label: {
                    show: true
                }
            }
        }
        mCharts2.setOption(option2)
        echarts.connect([mCharts, mCharts2])
    })
</script>

二、echartsInstance对象

echartsInstance 对象是通过 echarts.init 方法调用之后得到的

setOption
resize
on\off
dispatchAction
clear
dispose

setOption方法

设置或修改图表实例的配置项以及数据
可以多次调用 setOption方法 (合并新的配置和旧的配置 (增量动画))

resize方法

重新计算和绘制图表
一般和 window 对象的 resize 事件结合使用

window.onresize = function() {
	myCharts.resize();
}

on \ off方法

绑定或者解绑事件处理函数
鼠标事件

常见事件：click、dblclick、mousedown、mousemove、mouseup等
事件参数 arg: 和事件相关的数据信息

ECharts 事件

常见事件： legendselectchanged、datazoom、pieselectchanged、mapselectchanged等

<script src="lib/echarts.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        legend: {
            data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
        },
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
    // 对事件进行监听
    mCharts.on('click', function (arg) {
        console.log(arg);
        console.log('click...');
    })
    // 解绑click的事件
    mCharts.off('click', function (arg) {
        console.log(arg);
        console.log('click...');
    })

    mCharts.on('legendselectchanged', function (arg) {
        console.log(arg);
        console.log('legendselectchanged...');
    })    
</script>

dispatchAction方法

触发某些行为
使用代码模拟用户的行为

mCharts.dispatchAction({
	type: 'hightlight',	// 事件类型
	seriesIndex: 0,	// 图表索引
	dataIndex: 1	// 图表中哪一项高亮
})

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<button id="btn1">触发行为</button>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        legend: {
            data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
        },
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)
    $('#btn1').click(function () {
        // 模拟用户的行为
        mCharts.dispatchAction({
            type: 'highlight',	// 事件类型
            seriesIndex: 0,	// 图表索引
            dataIndex: 1	// 图表中哪一项高亮
        }),
            mCharts.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 2
            })
    })
</script>

clear 方法

清空当前实例，会移除实例中的所有组件和图表
清空之后可以再次 setOption

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        legend: {
            data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
        },
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)

    $('#btn2').click(function () {
        // 清空图表的实例
        mCharts.clear()
    })
    $('#btn3').click(function () {
        // 重新设置 option
        mCharts.setOption(option)
    })
</script>

dispose 方法

销毁实例

<script src="lib/echarts.min.js"></script>
<script src="lib/jQuery.min.js"></script>
<div style="width: 600px; height: 400px"></div>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<button id="btn4">dispose</button>
<script>
    var mCharts = echarts.init(document.querySelector('div'))
    var pieData = [
        { name: '淘宝', value: 11231 },
        { name: "京东", value: 22673 },
        { name: "唯品会", value: 6123 },
        { name: "1号店", value: 8989 },
        { name: "聚美优品", value: 6700 }
    ]
    var option = {
        legend: {
            data: ['淘宝', '京东', '唯品会', '1号店', '聚美优品']
        },
        tooltip: {
            show: true
        },
        series: [
            {
                type: 'pie',
                data: pieData
            }
        ]
    }
    mCharts.setOption(option)

    $('#btn2').click(function () {
        // 清空图表的实例
        mCharts.clear()
    })
    $('#btn3').click(function () {
        // 重新设置 option
        mCharts.setOption(option)
    })
    $('#btn4').click(function () {
        // 销毁 mCharts
        mCharts.dispose()
    })
</script>

Koa2 的使用

Koa2的介绍
Koa2快速上手
搭建后台项目

一、Koa2介绍

基于 Node.js 平台的 web 开发框架
由 Express 原班人马打造

框架名	作用	异步处理
Express	web框架	回调函数
Koa	web框架	Generatory + yield
koa2	web框架	async / await

环境依赖 Node v7.6.0及以上

Koa2特点

支持 async \ await
洋葱模型的中间件

二、Koa 2 快速上手

检查 Node 的环境

node -v

安装 Koa

 npm init -y     
 npm install koa

创建并编写 app.js 文件

创建 Koa 对象

 const Koa = require('koa')
 const app = new Koa()

编写响应函数(中间件)

 // ctx：上下文，web容器，ctx.request  ctx.respose
 // next: 下一个中间件，下一层中间件是否能够得到执行，取决于 next 这个函数有没有被调用
 app.use((ctx,next)=> {
     console.log(ctx.request.url)
     ctx.response.body = 'hello world'
 })

监听端口

 app.listen(3000)

启动服务器

 node app.js

中间件的特点

Koa 对象通过 use 方法加入一个中间件
一个中间件就是一个函数
中间的执行顺序符合洋葱模型
内层中间件能否执行取决于外层中间件的 next 函数是否调用
调用 next 函数得到的是 Promise对象

app.use(async(ctx,next)=> {
   	// 刚进入中间件想做的事情
    await next()
    // 内层所有中间件结束之后想做的事情
})

const Koa = require('koa')
const app = new Koa()
// ctx：上下文，web容器，ctx.request  ctx.respose
// next: 下一个中间件，下一层中间件是否能够得到执行，取决于 next 这个函数有没有被调用
app.use((ctx,next)=> {
	console.log('第一层中间件...1')
	ctx.response.body = 'hello world'
    next()
    console.log('第一层中间件...2')
})
// 第二层中间件
app.use((ctx,next)=> {
	console.log('第二层中间件...1')
    next()
    console.log('第二层中间件...2')
})
// 第三层中间件
app.use((ctx,next)=> {
	console.log('第三层中间件')
})
app.listen(3000)

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m